Staggered animation
Sometimes, we need to give more elements with animation, the player, will find that they move together, end together, this will seem very bland.
So how will the animation becomes a little interesting point then? Very simple, since they are all the same time begins to move, then let them not at the same time movement is not on it yet. How do they not at the same time activities? CSS animations have noted the delay ( delay) this property. For chestnut, such as a ten ten elements animation playback, the animation that the second element is set to be later than the first element of 0.5 seconds (i.e. the delay to 0.5 second), and so other elements , so that they will be displaced to form a unique visual effects.
This is called cross Animation: by setting a different delay time to achieve staggered animation playback effect.
This demo Institute Add: Staggered Wave Loading
Text split with JS
There is also a frequently used play: JS with the sentence or word into letters, and each letter to animate different delays, is also very gorgeous
This demo Address: Staggered drive Landin Text
Generally, we are the first element of the staggered start. However, if the element start from the middle of the interleaved words, it is necessary to add a current value of each of the delay elements, this value is the index of the intermediate element to the lower element distance to the subject (i.e. the difference between the absolute value of standard) and the product of step size, namely: delay + Math.abs(i - middle) * stepthe subscript wherein the intermediate elementmiddle = letters.filter(e => e !== "").length / 2
This demo addresses: the Reveal Text
All animations have staggered characteristics are here
Random particle animation
Speaking of randomness, we can achieve a more crazy effect: hundreds of particles to add animation staggered and staggered random time, location, size are also random. In this way we will be able to use pure CSS to simulate the effect of snow.
Went to the season White Album - Why do you write CSS so skilled ah?
This demo Address: Snow (Pure CSS)
Pseudo-classes and pseudo elements
Pseudo-classes
HTML元素的状态是可以动态变化的。举个栗子，当你的鼠标悬浮到一个按钮上时，按钮就会变成“悬浮”状态，这时我们就可以利用伪类:hover来选中这一状态的按钮，并对其样式进行改变。
:hover是笔者最最常用的一个伪类。还有一个很常用的伪类是:nth-child，用于选中元素的某一个子元素。其他的类似:focus、:focus-within等也有一定的使用。
本demo地址：Button Hover Border Stroke With Float Text
所有:hover的动画都在这儿
绝对定位实现多重边框
谁规定按钮只能有一套边框的？利用绝对定位和padding，我们可以给按钮做出3套大小不一的边框来，这样效果更炫了有木有！
本demo地址：Button Hover Multiple Border Stroke
伪元素
简而言之，伪元素就是在原先的元素基础上插入一个额外的元素，而且这个元素不充当HTML的标签，这样就能保持HTML结构的整洁。
什么情况下用伪元素呢？比如实现一根条子划过文本的动画，在这个动画中每个文本都有属于自己的一根条子，那么我们就可以用伪元素为每个文本生成一个条子，而无需特地在HTML标签中加入条子的div（当然，如果条子数量超过了2个，还是用div吧）
本demo地址：Header With Slide Bar
overflow障眼法
之前有做过闪光按钮的效果：鼠标悬浮按钮上时一道光从左到右划过去。
笔者就用渐变来模拟那道光，通过transform: translateX()将其平移至右边
但这样明显不对啊，这光为啥能被看见呢？不应该把它给“挡”起来吗？
于是乎，给按钮加上overflow: hidden，光在按钮外的位置时就被隐藏起来了
这就是障眼法的力量:)
本demo地址：Button Hover Shining
更多障眼法可以看看这个作品，一次性看个够XD
兄弟选择符定制表单元素
提示：这里最好将input作为label的子元素，这样用户点击label时就能传到input上
默认的input太丑怎么办？那就把它先抹掉，用appearance: none或opacity: 0都可以
然后，利用兄弟选择符~来定制和input相邻的所有元素（+号也行，只不过只能选中最近的元素），例如可以用伪元素生成一个新的方框代替原先的input，利用伪类:checked和动画来表示它被勾选后的状态，本质上还是障眼法哦~
本demo地址：Todo List
CSS特性
善用某些CSS特性，也可以为你的作品增色不少哦
transform
PS里的自由变换，各种CSS动画都离不开它。它也可以进行3D变换。
例子就不举了，因为几乎我所有的动画都用到了它
border-radius
为盒子添加圆角，经常用来美化按钮等组件
如果设定为50%则是圆形，也很常用
不规则的曲边形状
调整多个顶点的border-radius可以做出不规则的曲边形状
本demo地址：Nav Tab
box-shadow
为盒子添加阴影，增加盒子的立体感，如果多层叠加的话会使阴影更加丝滑
本demo地址：Pagination
遮罩
如果给box-shadow的扩张半径设定足够大的值，可以用它来遮住背景，而无需额外的div元素
本demo地址：Burger Menu
内发光
注意到box-shadow还有个inset，用于盒子内部发光
利用这个特性我们可以在盒子内部的某个范围内设定颜色，做出一个新月形
再加点动画和滤镜效果，“猩红之月”闪亮登场！
本demo地址：Crimson Crescent Loading
text-shadow
文本阴影，本质上和box-shadow相同，只不过是相对于文本而言，常用于文本发光，也可通过多层叠加来制作霓虹文本和伪3D文本等效果
发光文本
本demo地址：Staggered GlowIn Text
霓虹文本
本demo地址：Neon Text
伪3D文本
本demo地址：Staggered Bouncing 3D Loading
background-clip:text
能将背景裁剪成文字的前景色，常用来和color: transparent配合生成渐变文本
本demo地址：Menu Hover Fill Text
gradient
渐变可以作为背景图片的一种，具有很强的色彩效果，甚至可以用来模拟光
linear-gradient
线性渐变是笔者最常用的渐变
这个作品用到了HTML的dialog标签，渐变背景，动画以及overflow障眼法，细心的你看出来了吗:)
本demo地址：Confirm Modal
radial-gradient
径向渐变笔者没怎么用过，上面例子中Snow的背景就是一个径向渐变
conic-gradient
圆锥渐变可以用于制作扇形，因此配合CSS变量笔者制作了一个度量计，也用到了伪元素障眼法
本demo地址：Gauge (No SVG)
filter
PS里的滤镜，玩过的都懂，blur最常用
backdrop-filter
对背景应用滤镜，产生毛玻璃的效果
本demo地址：Frosted Glass
mix-blend-mode
PS里的混合模式，常用于文本在背景下的特殊效果
以下利用滤色模式（screen）实现文本视频蒙版效果
本demo地址：Video Mask Text
clip-path
PS里的裁切，可以制作各种不规则形状。如果和动画结合也会相当有意思
本demo地址：Name Card Hover Expand
-webkit-box-reflect
投影效果，不怎么常用，适合立体感强的作品
本demo地址：Card Flip Reflection
web animations
虽然这并不是一个CSS特性，但是它经常用于完成那些CSS所做不到的事情
那么何时用它呢？当CSS动画中有属性无法从CSS中获取时，自然就会使用到它了
跟踪鼠标的位置
目前CSS还尚未有获取鼠标位置的API，因此考虑用JS来进行
通过查阅相关的DOM API，发现在监听鼠标事件的API中，可通过e.clientX和e.clientY来获得鼠标当前的位置
Since it can get the mouse position, mouse tracking the location of it is not difficult: by listening mouseenterand mouseleaveevents, to get out of a position when the mouse elements, and use this as the mouse coordinates the displacement distance, monitor mousemoveevents, to get position in moving a mouse over the element, in the same manner as with the mouse coordinates of this displacement distance, so that a tracking effect is realized mouse
This demo Institute Add: Menu Hover Image
Egg
The staggered pseudo-classes and pseudo-elements animation combine to write out carefully brave style menu
This demo Institute Add: Shinchou Menu
Author: alphardex
link: https: //juejin.im/post/5e070cd9f265da33f8653f00
Source: Nuggets
copyright reserved by the authors. Commercial reprint please contact the author authorized, non-commercial reprint please indicate the source.