点击上方 前端瓶子君,关注公众号
回复算法,加入前端编程面试算法每日一题群
前言
CSS是一门很特殊的语言,不像一般的编程语言那样需要抽象的思维和严密的逻辑,它真正需要的是想象力——将你脑中所想的意象用代码来表现出来。那么意象又是如何产生的呢?最常用的方法就是探索和观察。举个例子,笔者平时热爱看番,每看到有意思的场景画面总会下意识地记录下来,这对动画创作会非常有帮助;同样地,一旦笔者发现一个制作精良的网站,也会将网站上那些吸引人的元素仔细审查一遍,灵感也自然就有了。
演示网址1:codepen[1]
演示网址2:shiroi[2]
源码地址:github[3]
本文的技巧将不会止步于72个。灵感不息,创作不止。
注意
兼容性
本文的所有技巧都未考虑兼容性,因为个人认为兼容性是一种束缚,它会妨碍你写出优秀的作品。如果硬是要考虑的话请自行解决,这个网站[4]或许能帮到你。
框架
本文所用到的技巧皆是SCSS+TypeScript。如果想移植到React或Vue上的话请根据框架本身的特点自行适配。笔者不用这类框架的原因很简单:框架很容易就会过时,原生CSS+JS才是王道。
教程
笔者实在是不擅长写这类东西,不过倒是可以把常用的属性和模式列出来,供大家参考参考。
常用属性:猛戳这里[5]
常用模式:猛戳这里[6]
动画
利用不同的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]
关于本文
来源:alphardex
https://juejin.cn/post/6844904031513477128
最后
欢迎关注【前端瓶子君】✿✿ヽ(°▽°)ノ✿
回复「算法」,加入前端编程源码算法群,每日一道面试题(工作日),第二天瓶子君都会很认真的解答哟!
回复「交流」,吹吹水、聊聊技术、吐吐槽!
回复「阅读」,每日刷刷高质量好文!
如果这篇文章对你有帮助,「在看」是最大的支持
》》面试官也在看的算法资料《《
“在看和转发”就是最大的支持