数字轮播
通过CSS的:nth-child选择器实现的数字内容轮播效果创建了一种数字序列(0123456789)轮播效果,使用CSS的:nth-child选择器来为每个数字添加不同的样式,实现了有趣丝滑的轮播切换效果。其中,数字的颜色、数字下的横杠外观以及底部内容...
倾斜面板
CSS实现响应式面板倾斜排列布局,附带悬停面板扩大效果使用 CSS 中的 Flexbox 布局结合变形(skew)变换实现了倾斜面板排列效果。默认是横向的排列布局,针对较小屏幕的设备,布局会自动调整为纵向布局,具有将强的自适应能力,并且在鼠标悬停时...
轮播插件
React 实现带鼠标追随效果的轻量级轮播切换组件,完全响应式布局!使用 React 构建的轻量级轮播与幻灯片插件,外观特别的时尚大方简约,其中的鼠标追随效果是通过设置当前幻灯片的 x 和 y 坐标的CSS值,以便在鼠标移动时创建跟踪鼠标的动态过渡效果。切换等交...
悬停幻灯片
JavaScript带悬停效果的环绕型内容轮播插件这是一款现代的超级时尚的带悬停效果的环绕型内容轮播插件,是基于JavaScript与CSS实现的,其中CSS负责外观及布局,JavaScript负责实现切换事件以及鼠标悬停事件。切换插件的下方带...
个性开关按钮
CSS制作的Emoji表情开关切换按钮使用CSS实现的超级时尚开关切换按钮,按钮上的滑块处于关闭状态时呈现的是「难过」Emoji表情,当打开开关时呈现的是「快乐」的Emoji表情,而且在滑动开关时Emoji表情滑块是以滚动的动画效果...
糖果开关
CSS 创意棒棒糖开关切换按钮,切换次数越多糖果越小!一款超有创意的棒棒糖开关切换效果,底层就是checkbox,外观基于CSS实现了棒棒糖的切换按钮,通过多次的切换操作棒棒糖会因为「摩擦」而逐渐减小,下方是切换前后的对比图片。切换的事件效果是通过...
双层叠加
GSAP 实现叠加覆盖布局页面,并实现像素化切换过渡效果使用GSAP与CSS结合实现的像素动画切换过渡效果,HTML页面包含两部分内容,其中一部分内容在初始化时会被隐藏,另一部分内容会预先显示,这两部分叠加到一切的布局是通过CSS实现的。这两部分内容...
重复输入
JavaScript 文本删除输入轮播效果本 JavaScript 代码片段可创建持续的文本输入与擦除效果,可设置多个关键文本的轮播效果,只需要在数组中设置要用于输入和删除动画的段语文本,便可以在 ID 为"retype "的span...
带进度轮播
gsap 超实用炫酷的圆点进度指示器效果一款通过gsap.js实现的滚动轮播效果带圆点进度指示器的插件,左侧的圆点与右侧的内容一一对应,随着滚动鼠标内容切换的同时圆点进度指示器也会跟着移动,并且当鼠标悬浮在圆点上时圆点会变为右侧对应...
滚动消息
JavaScript 文本无限横向滚动动画效果这是一款基于JavaScript结合CSS实现的文本横向滚动动画效果,非常适合应用于网站的滚动新闻、网站公告、警示信息、中奖信息等大量信息展示的场景,使其有条理的展示内容。实现上主要是利用JS控...
步骤流转
CSS + JS 实现的多步骤多状态流转动画效果这是一款超级实用的状态、多步骤手动驱动前后流转动画效果,其中 CSS 实现了状态、步骤节点的横向规范布局以及状态流转时的连线动画效果,JavaScript负责手动驱动步骤流转事件的实现。使用起来...
轮播特性
Swiper 动感十足的百叶窗轮播图动画效果这是一款使用Swiper + Particles + 少许CSS 创建的百叶窗轮播效果插件,下方带有圆点轮播进度指示器,能够通过指示器直观地观察图片切换的进度,可通过点击图片或者滚动鼠标两种方式...