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 class="fan-wrapper">
  <div class="fan"></div>
</div>

 

实现效果如下图所示

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

 

DIV环形布局—实现loading圈