不思議のCSS技巧大全

全部技巧均可以在个人codepen上找到

动画

利用不一样的delay实现交错动画

• Reveal Text
• Staggered Stair Loading
• Staggered Square Loading
• Staggered Wave Loading
• Gleaming Loading
• Particle Burst
• Gleaming Heading
• Share Button

文本

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

• Shining Text

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

• Rainbow Color Text

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

• Neon Text
• Staggered Glow In Text

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

• Staggered Bouncing 3D Loading

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

• Bubbling Text

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

• Abbr Expansion

滤镜

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

• Frosted Glass

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

• Frosted Glass Depth of Field

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

• Snow Scratch

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

• Eclipse Loader
• Glowing List Hover

组件

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

• Nav Tab

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

• Burger Menu

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

• Menu Hover Underline
• Menu Hover Magnify
• Button Hover Border Stroke With Float Text

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

• Split Text Menu

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

• Confirm Modal

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

• Button Hover Shining

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

• Accordion Menu

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

• Carousel

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

• Todo List
• Radio Button
• Checkbox
• Toggle
• Elevator Switch

利用box-shadow实现各类按钮悬浮特效

• Button Collection

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

• Glowing Menu Buttons

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

• Progress Bar

利用伪类校验表单

• Transparent Material Login Form

利用绝对定位实现特殊的表单和按钮

• One-Field Login Form
• Login Button

利用动画实现卡片展开

• Card Hover Expand Body

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

• Name Card Hover Expand