我写CSS的经常使用套路

全ては計算通り。

前言

本文是笔者写CSS时经常使用的套路。不论效果再怎么华丽，万变不离其宗。

以前发的CSS技巧大部分都是依照本文的套路来写的

经常使用套路

交错动画

有时候，咱们须要给多个元素添加同一个动画，播放后，不难发现它们会一块儿运动，一块儿结束，这样就会显得很平淡无奇。

那么如何将动画变得稍微有趣一点呢？很简单，既然它们都是同一时刻开始运动的，那么让它们不在同一时刻运动不就能够了吗。如何让它们不在同一时刻运动呢？注意到CSS动画有延迟（delay）这一属性。举个栗子，好比有十个元素播放十个动画，将第二个元素的动画播放时间设定为比第一个元素晚0.5秒（也就是将延迟设为0.5秒），其余元素以此类推，这样它们就会错开来，造成一种独特的视觉效果。

这就是所谓的交错动画：经过设置不一样的延迟时间，达到动画交错播放的效果。

本demo地址：Staggered Wave Loading

用JS分割文本

还有一种常常用到的玩法：用JS将句子或单词分割成字母，并给每一个字母加上不一样延时的动画，一样也很华丽

本demo地址：Staggered LandIn Text

通常咱们都是从第一个元素开始交错的。但若是要从中间元素开始交错的话，就要用到绝对值（本质就是数轴上两点的距离，这样会好理解一点），时间的计算方法：delay + Math.abs(i - middle) * 0.1

本demo地址：Reveal Text

全部有交错特性的动画都在这儿

随机粒子动画

说到随机性，咱们能够实现一种更疯狂的效果：给几百个粒子添加交错动画，而且交错时间随机，位置大小也都是随机。如此一来咱们就能用纯CSS模拟出下雪的效果。

又到了白色相簿的季节呢~为何你写CSS这么熟练啊？

本demo地址：Snow (Pure CSS)

伪类和伪元素

伪类

HTML元素的状态是能够动态变化的。举个栗子，当你的鼠标悬浮到一个按钮上时，按钮就会变成“悬浮”状态，这时咱们就能够利用伪类:hover来选中这一状态的按钮，并对其样式进行改变。

:hover是笔者最最经常使用的一个伪类。还有一个很经常使用的伪类是:nth-child，用于选中元素的某一个子元素。其余的相似:focus、:focus-within等也有必定的使用。

本demo地址：Button Hover Border Stroke With Float Text

全部:hover的动画都在这儿

伪元素

简而言之，伪元素就是在原先的元素基础上插入一个额外的元素，并且这个元素不充当HTML的标签，这样就能保持HTML结构的整洁。

什么状况下用伪元素呢？好比实现一根条子划过文本的动画，在这个动画中每一个文本都有属于本身的一根条子，那么咱们就能够用伪元素为每一个文本生成一个条子，而无需特意在HTML标签中加入条子的div（固然，若是条子数量超过了2个，仍是用div吧）

本demo地址：Header With Slide Bar

overflow障眼法

以前有作过闪光按钮的效果：鼠标悬浮按钮上时一道光从左到右划过去。

笔者就用渐变来模拟那道光，经过transform: translateX()将其平移至右边

但这样明显不对啊，这光为啥能被看见呢？不该该把它给“挡”起来吗？

因而乎，给按钮加上overflow: hidden，光在按钮外的位置时就被隐藏起来了

这就是障眼法的力量:)

本demo地址：Button Hover Shining

更多障眼法能够看看这个做品，一次性看个够XD

CSS特性

善用某些CSS特性，也能够为你的做品增色很多哦

border-radius

为盒子添加圆角，甚至你还能够用它作圆形和椭圆等形状

box-shadow

为盒子添加阴影，增长盒子的立体感。注意还有内发光（inset）的效果

text-shadow

本质上和box-shadow相同，只不过是相对于文本而言

background-clip:text

用来和color: transparent配合生成渐变文本

gradient

渐变能够做为可替换内容（相似图片）的一种

transform

PS里的自由变换，各类CSS动画都离不开它，能够3D

filter

PS里的滤镜，玩过的都懂，blur最经常使用

mix-blend-mode

PS里的混合模式

clip-path

PS里的裁切

-webkit-box-reflect

投影效果，不怎么经常使用，适合立体感强的做品

彩蛋

将交错动画和伪类伪元素结合起来写出来的慎重勇者风格的菜单

本demo地址：Shinchou Menu