注意

兼容性

框架

教程

动画

利用不同的delay实现交错动画

• Reveal Text^[7]
• Staggered Stair Loading^[8]
• Staggered Square Loading^[9]
• Staggered Wave Loading^[10]
• Gleaming Loading^[11]
• Particle Burst^[12]
• Gleaming Heading^[13]
• Staggered Shrinking Loading^[14]
• Snow^[15]
• Staggered Rise In Text^[16]
• Staggered LandIn Text^[17]

文本

利用background-clip:text配合color实现渐变文字效果

• Shining Text^[18]
• Menu Hover Fill Text^[19]

利用动态hsl颜色实现彩虹文字效果

• Rainbow Color Text^[20]

利用text-shadow实现发光文字效果

• Neon Text^[21]
• Staggered Glow In Text^[22]

利用text-shadow实现伪3D文字效果

• Staggered Bouncing 3D Loading^[23]

利用web animation实现冒泡文字效果

• Bubbling Text^[24]

利用动态max-width实现文本展开效果

• Abbr Expansion^[25]

利用绝对定位、3D变换和JS实现翻转文字

• Rotating Text^[26]

视觉

利用backdrop-filter实现毛玻璃背景效果

• Frosted Glass^[27]

利用背景、绝对定位和filter实现毛玻璃景深效果

• Frosted Glass Depth of Field^[28]

利用blur和contrast滤镜实现融合效果

• Snow Scratch^[29]

利用元素叠加blur滤镜实现日光效果

• Eclipse Loader^[30]
• Glowing List Hover^[31]
• Glowing Gradient Border^[32]
• Glowing Gradient Button^[33]
• Crimson Crescent Loading^[34]

利用mix-blend-mode:screen实现文本遮罩效果

• Video Mask Text^[35]

利用-webkit-box-reflect实现倒影效果

• Card Flip Reflection^[36]

页面

利用3D变换实现视差效果

• Parallax^[37]

利用position:sticky实现粘性滚动效果

• Sticky Sections^[38]

利用绝对定位和交错动画实现镜头拉伸背景效果

• Ken Burns Effect^[39]

利用伪元素、绝对定位和动画实现滑动幻灯片

• Animated Image Slider^[40]

组件

利用border-radius实现曲边导航栏

• Nav Tab^[41]

利用动画和绝对定位实现汉堡菜单

• Burger Menu^[42]

利用伪元素和动画实现动态划线效果

• Menu Hover Underline^[43]
• Menu Hover Magnify^[44]
• Button Hover Border Stroke With Float Text^[45]
• Header With Slide Bar^[46]
• Button Hover Multiple Border Stroke^[47]

利用伪元素和overflow:hidden实现交错分割文本菜单

• Split Text Menu^[48]
• Staggered Float Text Menu^[49]
• Shinchou Menu^[50]（慎重勇者风格菜单）

利用伪元素和overflow:hidden实现填充按钮

• Confirm Modal^[51]

利用伪元素、渐变和overflow:hidden实现闪光按钮

• Button Hover Shining^[52]

利用绝对定位、动画、渐变和overflow:hidden实现蛇形边框按钮

• Snake Border Button^[53]

利用伪元素、渐变、背景运动实现动态渐变边框

• Gradient Border^[54]

利用oveflow:hidden、max-height和:target实现手风琴菜单

• Accordion Menu^[55]
• Accordion Panel^[56]

利用overflow:hidden和scroll相关属性实现无缝轮播图

• Carousel^[57]

利用兄弟选择器配合伪元素自定义单复选框

• Todo List^[58]
• Radio Button^[59]
• Checkbox^[60]
• Toggle^[61]
• Elevator Switch^[62]

利用各种属性实现各种按钮特效

• Button Collection^[63]
• Share Button^[64]
• Login Button^[65]
• One-Field Login Form^[66]

利用多重box-shadow阴影实现发光按钮菜单

• Glowing Menu Buttons^[67]

利用counter在伪元素的content中显示var的值

• Progress Bar^[68]

利用-webkit-slider-thumb定制滑块

• Gradient Range Slider^[69]

利用伪类校验表单

• Transparent Material Login Form^[70]

利用动画实现卡片展开

• Card Hover Expand Body^[71]

利用clip-path实现卡片多方向展开

• Name Card Hover Expand^[72]

利用没有perspective的transform-style:preserve-3d实现等距3D效果

• 3D Cube^[73]
• Isometric Icon Hover^[74]
• Isometric Images Hover^[75]
• Isometric Icon Nav Bar^[76]

利用3D变换实现3D下拉菜单

• 3D Dropdown Menu^[77]

利用动画和JS实现简单的分页栏

• Pagination^[78]

利用伪元素、overflow:hidden、动画、JS实现标签页

• Tabs^[79]

利用伪元素、:checked、~兄弟选择器实现5星评分

• Star Rating^[80]

运用伪元素、层叠关系、3D变换、JS实现翻牌时钟

• Flip Card Clock^[81]

利用鼠标事件监听和web animation实现图片悬浮菜单

• Menu Hover Image^[82]

利用conic-gradient，伪元素和CSS变量实现圆盘度量计

• Gauge \(No SVG\)^[83]

逆锋起笔是一个专注于程序员圈子的技术平台，你可以收获最新技术动态、最新内测资格、BAT等大厂的经验、精品学习资料、职业路线、副业思维，微信搜索逆锋起笔关注！