CSS3是最新的CSS標準，它不僅僅擁有過去CSS2的所有功能，還包含了豐富的新功能。CSS3使得我們可以更加輕松地創(chuàng)造一些酷炫的效果。其中就包括CSS3動態(tài)內(nèi)容。
.box{
animation: rotate 3s linear infinite;
-webkit-animation: rotate 3s linear infinite;
}
@keyframes rotate{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
@-webkit-keyframes rotate{
0%{
-webkit-transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(360deg);
}
}我們可以利用CSS3動畫和transform屬性來制作一個旋轉(zhuǎn)的效果，只需要定義一個@keyframes規(guī)則來指定動畫中所使用的關(guān)鍵幀。例如以上的代碼，就是定義了一個旋轉(zhuǎn)的動畫，效果如下：
CSS3動態(tài)內(nèi)容演示
為了實現(xiàn)在不同瀏覽器中的兼容性，我們需要加上-webkit-前綴。除此之外，CSS3動態(tài)內(nèi)容還可以應(yīng)用在非常多的情況下，例如通過:hover實現(xiàn)懸停效果、通過:focus實現(xiàn)獲取焦點效果等等。
總之，CSS3動態(tài)內(nèi)容是我們設(shè)計網(wǎng)頁時不可或缺的一種元素，它可以讓我們的網(wǎng)頁更加生動、有趣、并且充滿靈性。
上一篇apc.php
下一篇ajax 提交后按鈕置灰