CSS是一门很特殊的语言，不像一般的编程语言那样需要抽象的思维和严密的逻辑，它真正需要的是想象力——将你脑中所想的意象用代码来表现出来。那么意象又是如何产生的呢？最常用的方法就是探索和观察。举个例子，笔者平时热爱看番，每看到有意思的场景画面总会下意识地记录下来，这对动画创作会非常有帮助；同样地，一旦笔者发现一个制作精良的网站，也会将网站上那些吸引人的元素仔细审查一遍，灵感也自然就有了。 本文的所有技巧都可以在我的codepen上找到 如果codepen访问慢的话可以直接访问这个网站 灵感不息，创作不止。
注意 本文的所有技巧都未考虑兼容性，因为个人认为兼容性是一种束缚，它会妨碍你写出优秀的作品。如果硬是要考虑的话请自行解决，这个网站或许能帮到你。 至于框架，本文所用到的技巧皆是SCSS+TypeScript。如果想移植到React或Vue上的话请根据框架本身的特点自行适配。笔者不用这类框架的原因很简单：框架很容易就会过时，原生CSS+JS才是王道。 动画 利用不同的delay实现交错动画
Reveal Text Staggered Stair Loading Staggered Square Loading Staggered Wave Loading Gleaming Loading Particle Burst Gleaming Heading Staggered Shrinking Loading Snow Staggered Rise In Text
文本 利用background-clip:text配合color实现渐变文字效果
Shining Text Menu Hover Fill 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
利用绝对定位、3D变换和JS实现翻转文字
Rotating Text
视觉 利用backdrop-filter实现毛玻璃背景效果
Frosted Glass
利用背景、绝对定位和filter实现毛玻璃景深效果
Frosted Glass Depth of Field
利用blur和contrast滤镜实现融合效果
Snow Scratch
利用元素叠加blur滤镜实现日光效果
Eclipse Loader Glowing List Hover Glowing Gradient Border Glowing Gradient Button
利用mix-blend-mode:screen实现文本遮罩效果
Video Mask Text
利用-webkit-box-reflect实现倒影效果
Card Flip Reflection
页面 利用3D变换实现视差效果
Parallax
利用position:sticky实现粘性滚动效果
Sticky Sections
利用绝对定位和交错动画实现镜头拉伸背景效果
Ken Burns Effect
利用伪元素、绝对定位和动画实现滑动幻灯片
Animated Image Slider
组件 利用border-radius实现曲边导航栏
Nav Tab
利用动画和绝对定位实现汉堡菜单
Burger Menu
利用伪元素和动画实现动态划线效果
Menu Hover Underline Menu Hover Magnify Button Hover Border Stroke With Float Text Header With Slide Bar
利用伪元素和overflow:hidden实现交错分割文本菜单
Split Text Menu Staggered Float Text Menu
利用伪元素和overflow:hidden实现填充按钮
Confirm Modal
利用伪元素、渐变和overflow:hidden实现闪光按钮
Button Hover Shining
利用绝对定位、动画、渐变和overflow:hidden实现蛇形边框按钮
Snake Border Button
利用伪元素、渐变、背景运动实现动态渐变边框
Gradient Border
利用oveflow:hidden、max-height和:target实现手风琴菜单
Accordion Menu Accordion Panel
利用overflow:hidden和scroll相关属性实现无缝轮播图
Carousel
利用兄弟选择器配合伪元素自定义单复选框
Todo List Radio Button Checkbox Toggle Elevator Switch
利用各种属性实现各种按钮特效
Button Collection Share Button Login Button One-Field Login Form
利用多重box-shadow阴影实现发光按钮菜单
Glowing Menu Buttons
利用counter在伪元素的content中显示var的值
Progress Bar
利用-webkit-slider-thumb定制滑块
Gradient Range Slider
利用伪类校验表单
Transparent Material Login Form
利用动画实现卡片展开
Card Hover Expand Body
利用clip-path实现卡片多方向展开
Name Card Hover Expand
利用没有perspective的transform-style:preserve-3d实现等距3D效果
3D Cube Isometric Icon Hover Isometric Images Hover Isometric Icon Nav Bar
利用3D变换实现3D下拉菜单
3D Dropdown Menu
利用动画和JS实现简单的分页栏
Pagination
利用伪元素、overflow:hidden、动画、JS实现标签页
Tabs
利用伪元素、:checked、~兄弟选择器实现5星评分
Star Rating
运用伪元素、层叠关系、3D变换、JS实现翻牌时钟
Flip Card Clock
利用鼠标事件监听和web animation实现图片悬浮菜单
Menu Hover Image
作者：alphardex 链接：juejin.cn/post/684490… 来源：掘金 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
