本文讲述的原理和相关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 class="fan-wrapper"> <div class="fan"></div> </div>
实现效果如下图所示
(因为篇幅有限,渐变就不加了2333)