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代碼中,通過添加點擊事件,觸發元素狀態的改變,使其執行逆時針旋轉一周的動畫,從而達到“點擊旋轉”的效果。
在實際應用中,可以根據需要對元素樣式和動畫效果進行調整,實現更加豐富多彩的點擊動畫效果。
上一篇mysql建表 序列號
下一篇css點擊按鈕的邊框