色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

css 實現煙花

老白2年前21瀏覽0評論

CSS可以實現炫酷的效果,比如煙花效果,只需要幾行代碼就可以實現。接下來,我們通過幾個步驟來實現煙花效果。

/* 1.創建容器 */
.fireworks{
position:relative;
width: 500px;
height: 500px;
}
/* 2.創建一個煙花 */
.fireworks .fire{
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #fff;
}
/* 3.煙花動畫 */
@keyframes fireworks {
0% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(2);
opacity: 0;
}
}
/* 4.每個煙花的動畫時間間隔不同,模仿真實煙花爆炸效果 */
.fireworks .fire:nth-child(1){
left: 200px;
top: 250px;
animation: fireworks 1s ease-in-out 1.1s infinite alternate;
}
.fireworks .fire:nth-child(2){
left: 300px;
top: 200px;
animation: fireworks 1s ease-in-out 1.4s infinite alternate;
}
.fireworks .fire:nth-child(3){
left: 250px;
top: 300px;
animation: fireworks 1s ease-in-out 1.7s infinite alternate;
}
.fireworks .fire:nth-child(4){
left: 150px;
top: 200px;
animation: fireworks 1s ease-in-out 2s infinite alternate;
}
.fireworks .fire:nth-child(5){
left: 350px;
top: 250px;
animation: fireworks 1s ease-in-out 2.3s infinite alternate;
}

以上是實現煙花效果的代碼,我們可以在頁面中引入這些代碼,并在HTML中創建一個div容器,然后把創建的煙花放到這個容器中, 就可以實現炫酷的煙花效果了。