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

css點擊旋轉動畫效果

江奕云2年前10瀏覽0評論

CSS點擊旋轉動畫效果

/*html代碼*/ 
<div class="rotate-box"></div>
/*css代碼*/ 
.rotate-box { 
width: 100px; 
height: 100px;
background-color: #ff5722;
cursor: pointer; /*光標設置為手指形狀*/
animation: rotate 1s ease-in-out forwards; /*默認旋轉效果*/
}
.rotate-box.active { /*旋轉后狀態*/
animation: rotate2 1.5s ease-in-out forwards; 
} 
/*動畫:以自身中心點順時針旋轉一周*/
@keyframes rotate { 
0% { 
transform: rotate(0deg); 
} 
100% { 
transform: rotate(360deg); 
} 
} 
/*動畫:逆時針旋轉一周*/
@keyframes rotate2 { 
0% { 
transform: rotate(360deg); 
} 
100% { 
transform: rotate(0deg); 
} 
}
/*JS代碼*/
var box = document.querySelector('.rotate-box'); //找到需要點擊的元素
box.addEventListener('click', function() { //為元素添加點擊事件
this.classList.add('active'); //添加類名,修改樣式
});

以上是一段CSS代碼,包含了點擊旋轉動畫效果的實現過程。首先,定義了一個div元素,設置了其寬高、背景顏色和光標樣式,并給予了默認的旋轉動畫效果。

通過關鍵幀動畫的定義,實現了元素在自身中心點順時針旋轉一周的效果。在JS代碼中,通過添加點擊事件,觸發元素狀態的改變,使其執行逆時針旋轉一周的動畫,從而達到“點擊旋轉”的效果。

在實際應用中,可以根據需要對元素樣式和動畫效果進行調整,實現更加豐富多彩的點擊動畫效果。