CSS3 實現(xiàn)圖形下落動畫效果
發(fā)布時間：2020-11-13 17:22:34 作者：mariaskare 
我要評論
我要評論這篇文章主要介紹了CSS3 實現(xiàn)圖形下落動畫效果，幫助大家更好的理解和制作CSS3特效，美化自身網(wǎng)頁，感興趣的朋友可以了解下
先看效果
實現(xiàn)代碼
<div class="box box1"></div> <div class="box box2"></div> <div class="box box3"></div> <div class="box box4"></div> <div class="box box5"></div> <div class="box box6"></div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 100%;
height: auto;
background: #f90;
overflow: hidden;
}
.box {
width: 50px;
height: 50px;
background: #f70;
transform: rotate(45deg);
position: absolute;
box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3);
}
.box1 {
left: calc(50% - 25px);
top: calc(100% - 75px);
animation: box1 cubic-bezier(1, 0, 0.45, 1.4) 2s 1;
}
.box2 {
left: calc(50% - 65px);
top: calc(100% - 115px);
animation: box2 cubic-bezier(1, 0, 0.45, 1.4) 2.5s 1;
}
.box3 {
left: calc(50% + 15px);
top: calc(100% - 115px);
animation: box3 cubic-bezier(1, 0, 0.45, 1.4) 3s 1;
}
.box4 {
left: calc(50% + 55px);
top: calc(100% - 155px);
animation: box4 cubic-bezier(1, 0, 0.45, 1.4) 3.5s 1;
}
.box5 {
left: calc(50% - 105px);
top: calc(100% - 155px);
animation: box5 cubic-bezier(1, 0, 0.45, 1.4) 4s 1;
}
.box6 {
left: calc(50% - 25px);
top: calc(100% - 155px);
animation: box6 cubic-bezier(1, 0, 0.45, 1.4) 4.5s 1;
}
@keyframes box1 {
from {
top: -100px;
}
to {
top: calc(100% - 75px);
}
}
@keyframes box2 {
from {
top: -100px;
}
to {
top: calc(100% - 115px);
}
}
@keyframes box3 {
from {
top: -100px;
}
to {
top: calc(100% - 115px);
}
}
@keyframes box4 {
from {
top: -100px;
}
to {
top: calc(100% - 155px);
}
}
@keyframes box5 {
from {
top: -100px;
}
to {
top: calc(100% - 155px);
}
}
@keyframes box6 {
from {
top: -100px;
}
to {
top: calc(100% - 155px);
}
}
以上就是CSS3 實現(xiàn)圖形下落動畫效果的詳細內(nèi)容，更多關(guān)于CSS3 圖形下落的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
一組純css3加載圖標(biāo)動畫特效代碼大全是一款8種不同效果的loading加載動畫，基于css3 keyframes屬性制作的。2020-11-09
這篇文章主要介紹了CSS3制作3D立方體loading特效的示例，幫助大家更好的理解和使用CSS3特效，美化自身網(wǎng)頁，感興趣的朋友可以了解下2020-11-09- 這篇文章主要介紹了純css3實現(xiàn)橫向無限滾動的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)2020-11-06
這篇文章主要介紹了CSS3實現(xiàn)蓮花綻放得動畫效果，幫助大家更好得理解和制作CSS特效，美化自身網(wǎng)頁，感興趣的朋友可以了解下2020-11-06
這篇文章主要介紹了CSS3制作圓形滾動進度條動畫的示例，幫助大家制作CSS3特效，美化自身網(wǎng)頁，感興趣的朋友可以了解下2020-11-05
這篇文章主要介紹了一篇文章帶你學(xué)習(xí)CSS3圖片邊框,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-11-04
CSS3實現(xiàn)的3D導(dǎo)航欄旋轉(zhuǎn)切換特效源碼
是一段基于css3 transform屬性制作的綠色導(dǎo)航欄鼠標(biāo)懸停3D翻轉(zhuǎn)切換特效代碼，非常有意思，歡迎有興趣的朋友前來下載使用2020-11-04
這篇文章主要介紹了CSS3如何實現(xiàn)時間軸特效，幫助大家更好的理解和制作css3特效，美化自身網(wǎng)頁，感興趣的朋友可以了解下2020-11-02
這篇文章主要介紹了CSS3制作皮卡丘動畫壁紙的示例，幫助大家更好的理解和制作CSS3特效，感興趣的朋友可以了解下2020-11-02
這篇文章主要介紹了background屬性的8個屬性值(面試題)，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友參考下吧2020-11-02
