CSS3是CSS的升級版本,追求更高效更美觀的網頁展示效果,為網頁設計師帶來了更多的工具和技巧。下面我們來介紹一些CSS3的特效:
/*使用CSS3實現徑向漸變背景*/
background: -webkit-radial-gradient(center, ellipse cover, #FFFFFF 0%, #CCCCCC 100%);
background: -moz-radial-gradient(center, ellipse cover, #FFFFFF 0%, #CCCCCC 100%);
background: -o-radial-gradient(center, ellipse cover, #FFFFFF 0%, #CCCCCC 100%);
background: radial-gradient(ellipse at center, #FFFFFF 0%, #CCCCCC 100%);
上面的代碼使用4種瀏覽器前綴以適應不同的瀏覽器,實現了一個徑向漸變背景。其中,#FFFFFF是漸變開始的顏色,#CCCCCC是漸變結束的顏色。
/*使用CSS3實現3D變換*/
.box {
transform-style: preserve-3d;
transform: rotateY(25deg);
}
上面的代碼實現了一個簡單的3D變換效果。transform-style:preserve-3d保持3D,transform:rotateY(25deg)將元素繞Y軸旋轉25度。
/*CSS3動畫*/
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.box {
animation: rotate 2s linear infinite;
}
上面的代碼實現了一個簡單的CSS3動畫效果。使用@keyframes定義了一個名稱為“rotate”的動畫,只需要指定起始狀態和結束狀態,然后將其應用到元素上,就能實現元素的旋轉效果。
CSS3還有很多其它的特效可以使用,如過渡效果、陰影效果、文字效果等,可以讓我們的網頁設計更加生動有趣。