标签：

原文:CSS动效集锦，视觉魔法的碰撞与融合（三）

目录

正文

本文讲述的道理和相关demo

扇形DIV的使用——实现雷达扫描图

DIV环形构造—实现loading圈

动画的向量合成—实现抛物线动画

无限滚动动画—实现跑马灯效果

perspective和transform的运用——实现卡片翻转

 

话不久不多说，请看。

 

扇形DIV的使用——实现雷达扫描图

在一些杀毒或文件扫描类的软件上，我们可能会看到一些雷达扫描的UI样式，例如下图所示

 

如果我们要通过CSS该如何去实现话，我们的想法一般是先画个扇形，然后给它加上渐变。

实现渐变的方法很简单，但我们该如何实现一个扇形呢？

 

我们可以通过一些技巧实现这一点，请看：

没错，我们可以通过skew函数，将黄色的div倾斜，然后溢出部分通过overflow:hidden遮住就可以了。

锐角扇形：deg<0，向右边倾斜，即可得到锐角扇形

钝角扇形：deg>0, 向左边倾斜，即可得到钝角扇形

 

代码如下

// CSS代码 @keyframes rotateAnimate { from { transform: rotate(0deg) skew(-30deg) } to { transform: rotate(360deg) skew(-30deg) } } .fan-wrapper { overflow: hidden; position: relative; margin: 100px; width: 200px; height: 200px; border-radius: 50%; background: red; } .fan { position: absolute; right: 0; animation: rotateAnimate 2s linear infinite; /* 这一行很重要，设置左下角为旋转点 */ transform-origin: 0% 100%; width: 100px; height: 100px; background: blue; } // HTML代码 <div> <div></div> </div>

 

实现效果如下图所示

（因为篇幅有限，渐变就不加了2333）

 

DIV环形构造—实现loading圈

 

loading加载条是常见的一种UI组件，如下图所示

而要实现它，就需要考虑怎么把一堆小圆等距地构造在一个“大圆”的边框上，也就是DIV的环形构造的问题。

固然我们可以通过暴力丈量解决，但很麻烦且不优雅，而且如果小圆的数量变革的话要从头测一遍。

我的解决步伐如下：

 

第一步：按照圆的数量计算相邻圆和圆心形成的夹角

例如假设我们需要摆列8个圆，那么夹角为360度 / 8 = 45度。图示如下，每个数字代表以该位置为圆心放一个小圆