uniapp是一款基于vue.js開發的跨平臺應用開發框架,它的特點是可以將一份代碼編譯成多端應用,支持微信小程序、H5、安卓、iOS等平臺,使用方便、功能強大。而在uniapp中,使用css動畫來實現頁面的動效是一種常用的方法。
/* 以下是一個例子 */ /* html */ <div class="ani-box"></div> /* css */ .ani-box { width: 100px; height: 100px; background-color: #ff0000; animation: rotate 2s infinite; } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
在上面的例子中,我們定義了一個大小為100px的正方形盒子,并給它添加了一個名為rotate的css動畫。通過transform: rotate(Xdeg)屬性來實現盒子的旋轉效果,動畫時長為2秒,并設置了無限循環。其中@keyframes關鍵字表示定義動畫關鍵幀,0%、100%表示動畫起始和結束時盒子的狀態,而transform: rotate(Xdeg)則表示每一步的變化。通過這樣的方式,可以輕松實現旋轉、縮放、移動等動畫效果,為應用增添美觀性。
上一篇uni加載css樣式
下一篇html5怎么調試代碼