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

css3幾個動畫輪流

洪振霞2年前12瀏覽0評論

CSS3擁有豐富的動畫效果,其中輪流動畫是最常用的之一。下面我們來介紹幾種常見的輪流動畫效果。

/* 平移動畫 */
@keyframes move {
0% {
transform: translateX(0);
}
100% {
transform: translateX(100px);
}   
}
/* 縮放動畫 */
@keyframes scale {
0% {
transform: scale(1);
}
100% {
transform: scale(2);
}
}
/* 旋轉動畫 */
@keyframes rotate {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}

以上三種動畫分別為平移、縮放和旋轉。接下來我們將它們應用到HTML元素上,并設置它們的延遲時間和次數。

/* 動態樣式 */
.box {
width: 100px;
height: 100px;
background: red;
animation-duration: 2s;
animation-iteration-count: infinite;
}
/* 平移動畫應用 */
.move {
animation-name: move;
animation-delay: 0s;
}
/* 縮放動畫應用 */
.scale {
animation-name: scale;
animation-delay: 0.5s;
}
/* 旋轉動畫應用 */
.rotate {
  animation-name: rotate;
  animation-delay: 1s;
}

最后,我們在HTML文件中設置三個元素,分別應用不同的動畫效果。

以上就是CSS3輪流動畫的應用方式,通過組合不同的動畫效果可以創造出更加炫酷的效果。