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

css動畫來回運動

張吉惟2年前11瀏覽0評論

在前端開發中,CSS動畫是一個很常用的特效。其中一種比較常見的動畫效果就是來回運動的動畫效果。下面我們來介紹一下如何實現這種動畫效果。

/* CSS代碼 */
.box{
width: 100px;
height: 100px;
background: #ff0000;
position: relative;
animation: move 2s infinite alternate;
}
@keyframes move  {
0%{
left: 0;
}
100%{
left: 200px;
}
}

上面代碼中,我們給一個class為box的元素設置了一個animation屬性,屬性值為move 2s infinite alternate。其中,move為一個自定義的動畫名稱,2s表示動畫持續的時間,infinite表示動畫循環無限次,alternate表示動畫來回循環播放。

接下來我們在@keyframes中定義move動畫,動畫效果是將.box元素從左側位置移動到距離左側200px的位置。0%和100%代表動畫的開始和結束狀態,left屬性可以改變元素的位置。

通過這樣的CSS代碼,我們實現了一個來回運動的動畫效果。你也可以根據需要對CSS代碼進行調整,實現不同的動畫效果。