在DW中寫HTML簡單動畫代碼,可以通過CSS的transition或animation屬性來實現。
/* 使用transition屬性實現動畫 */ .box { width: 100px; height: 100px; background-color: green; transition: width 2s ease-in-out; } .box:hover { width: 200px; } /* 使用animation屬性實現動畫 */ .rotate { width: 100px; height: 100px; background-color: blue; animation: rotate 2s linear infinite; } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
在上述代碼中,使用transition屬性可以給元素添加動畫效果。在.box的樣式中,將寬度的變化設置為2秒,使用ease-in-out緩動函數讓動畫更加自然。在:hover的樣式中,將寬度變為200px,實現了一個簡單的放大動畫。
使用animation屬性同樣可以實現動畫效果。在.rotate的樣式中,設置了寬高和背景色,并添加了一個名為rotate的動畫。下面使用@keyframes來定義動畫的詳細效果:從0度旋轉至360度,使用線性變換,無限循環播放。
以上是在DW中寫HTML簡單動畫代碼的基本實現方法,嘗試修改屬性值來實現不同的動畫效果吧!
上一篇html< >代碼轉換
下一篇qunee vue實例