CSS动画——加载的菊花转动画
最近在整理工作过程中用到的一些动画,菊花转loading就是其中一个。本人比较爱较劲,看到这个就想用代码实现,虽然我很菜,但是我也要做一个菜中VIP!!!
话不多说,先插播一个类似想要实现的gif吧:
对不起这个gif太大了,可能因为我近视太严重了,这样才能看得见吧,下面来分解一下它:
1.由于每个线条要对称,这里将每个线条分解为上下两部分,分别用before和after伪元素表示
2.根据需要定义一定的线条个数,通过css的rotate对线条进行旋转,旋转度数根据线条个数而定,最后就可以形成一个空心的菊花
3.最后通过animation,控制每个线条before与after元素的透明度与动画的时间间隔,就可以让它富有时代感的闪耀起来了
最后附上完整代码:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8;" />
<title>加载的菊花转动画效果</title>
<style type="text/css">
.load-cont {
width: 100px;
height: 100px;
position: relative;
margin: 50px auto;
background-color: #535353;