CSS3是網頁設計中常用的技術之一,它能夠讓我們實現各種各樣的驚人特效。下面是一些CSS3特效示例,可以讓你的網站更加美觀和吸引人。
/*示例1:旋轉特效*/ .box{ width: 100px; height: 100px; background-color: red; transform: rotate(20deg); /*旋轉20度*/ transition: transform 1s ease; /*變換動畫,1秒時長,緩入緩出*/ } .box:hover{ transform: rotate(200deg); /*鼠標懸停時旋轉至200度*/ } /*示例2:漸隱漸現特效*/ .box{ opacity: 0.5; /*初始不透明度*/ transition: opacity 1s ease; /*變換動畫,1秒時長,緩入緩出*/ } .box:hover{ opacity: 1; /*鼠標懸停時完全可見*/ } /*示例3:陰影特效*/ .box{ box-shadow: 0px 0px 10px rgba(0,0,0,0.5); /*陰影效果*/ transition: box-shadow 1s ease; /*變換動畫,1秒時長,緩入緩出*/ } .box:hover{ box-shadow: 0px 0px 20px rgba(0,0,0,0.5); /*鼠標懸停時增加陰影大小*/ } /*示例4:文字特效*/ .text{ font-size: 30px; color: red; text-shadow: 2px 2px 5px rgba(0,0,0,0.5); /*文字陰影效果*/ transition: text-shadow 1s ease; /*變換動畫,1秒時長,緩入緩出*/ } .text:hover{ text-shadow: 4px 4px 10px rgba(0,0,0,0.5); /*鼠標懸停時文字陰影增加*/ }
以上就是一些基礎的CSS3特效示例,當然還有很多更加復雜和高級的特效可以實現。在實現特效的同時,我們也需要注意性能和瀏覽器兼容性,使用合適的技術手段來達到最好的效果。
上一篇mysql查詢兩個最小值
下一篇mysql查詢兩個數據庫