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

css3 星光動畫

孫婉娜1年前7瀏覽0評論

CSS3星光動畫是一種非常酷炫的效果,它可以讓頁面元素像是星空一般閃爍。下面我們來詳細了解一下CSS3星光動畫的實現方式。

/* 定義關鍵幀 */
@keyframes twinkle {
0% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.5);
opacity: 0.5;
}
100% {
transform: scale(1);
opacity: 1;
}
}
/* 定義星光樣式 */
.star {
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
animation-name: twinkle;
animation-duration: 1s;
animation-iteration-count: infinite;
}
/* 定義星光位置 */
.star1 {
top: 50px;
left: 100px;
background-color: #ffffff;
}
.star2 {
top: 150px;
left: 200px;
background-color: #ffff00;
}
.star3 {
top: 250px;
left: 300px;
background-color: #00ffff;
}
/* 調用星光元素 */
<div class="star star1"></div>
<div class="star star2"></div>
<div class="star star3"></div>

以上代碼中,首先通過關鍵幀@keyframes定義了星光每個動畫階段應有的樣式變化,然后在.star類中調用該關鍵幀及設定星光的基本樣式。接著在每個星光元素中通過類名的區分并設定其位置及背景色,最后引用這些星光元素,即可呈現出酷炫的星光效果。