请收下这72个炫酷的CSS技巧

超、凢脫俗 2022-09-11 12:12 46阅读 0赞

点击上方 前端瓶子君，关注公众号

回复算法，加入前端编程面试算法每日一题群![4d0d49372c0ac769858856b2ffb4b1c4.png][]

## 前言 ##

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

## 最后 ##

欢迎关注【前端瓶子君】✿✿ヽ(°▽°)ノ✿

回复「算法」，加入前端编程源码算法群，每日一道面试题（工作日），第二天瓶子君都会很认真的解答哟！

回复「交流」，吹吹水、聊聊技术、吐吐槽！

回复「阅读」，每日刷刷高质量好文！

如果这篇文章对你有帮助，「在看」是最大的支持

》》面试官也在看的算法资料《《

“在看和转发”就是最大的支持

[4d0d49372c0ac769858856b2ffb4b1c4.png]: /images/20220828/1e70c97992a64bee8554221a3b32240b.png

请收下这72个炫酷的CSS技巧

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关收下这波 JS 技巧，从此少加班

相关这 68 个 Python 内置函数请收好！

相关 CSS实现炫酷导航栏

相关【CSS】试试酷炫的 CSS 3D 视角

相关请收下这72个炫酷的CSS技巧

相关 CSS3实现酷炫导航

相关比较酷炫的css鼠标悬浮效果

相关创建炫酷 CSS 背景效果的 10 个代码片段

相关 CSS实现文字动画炫酷效果

相关请收下这 7 点建议，宝贝儿！