首先我們先看一下效果如下：
HTML部分如下：
<div class="box">
<span class="a one"></span>
<span class="b one"></span>
<span class="c one"></span>
<span class="d one"></span>
<span class="e one"></span>
<span class="f one"></span>
<span class="g one"></span>
<span class="h one"></span>
<span class="i one"></span>
</div>
一個大的div里面九個span標簽，分別給他們 一個相同的類和一個不相同的類，
CSS部分如下:
body{
background: #252A34;
}
.box{
margin: 300px auto;
width: 500px;
}
.one{
height: 30px;
width: 30px;
display: inline-block;
animation:change 1s infinite;
margin-left: 20px;
}
@keyframes change{
50%{
transform: rotate(180deg);
transform: translateY(180px);
border-radius: 50%;
}
100%{
transform: rotate(360deg);
transform: translateY(0px);
border-radius: 0%;
}
}
.a{
background:rgba(241,193,6,1.00);
animation-delay: 0.1s;
}
.b{
background: rgba(15,193,79,1.00);
animation-delay: 0.2s;
}
.c{
background:rgba(241,193,6,1.00);
animation-delay: 0.3s;
}
.d{
background: rgba(15,193,79,1.00);
animation-delay: 0.4s;
}
.e{
background:rgba(241,193,6,1.00);
animation-delay: 0.5s;
}
.f{
background: rgba(15,193,79,1.00);
animation-delay: 0.6s;
}
.g{
background:rgba(241,193,6,1.00);
animation-delay: 0.7s;
}
.h{
background: rgba(15,193,79,1.00);
animation-delay: 0.8s;
}
.i{
background:rgba(241,193,6,1.00);
animation-delay: 0.9s;
}
這里給大家解說一下：
rotate：旋轉
translate：位移
關鍵幀的創建：
0%和 100%之間可以創建多個百分比，分別給每個百分比中給需要有影片
效果的元素加上不同的樣式；
0%和 100%可以使用關鍵詞 from 和 to 來表示，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/262936.html
標籤：其他
上一篇：JS前端圖片壓縮上傳