CSS3是Web前端中常用的樣式表語言之一,它可以為網頁添加豐富的特效和動態效果,讓網頁看起來更加生動,吸引人。下面就是一些我認為很有趣的CSS3特效,希望能夠給大家帶來靈感和啟發。
/*1.懸浮效果*/ a:hover{ color: red; font-weight: bold; text-decoration: underline; } /*2.邊框效果*/ .box{ border: 2px dashed #000; } /*3.漸變效果*/ .bg{ background: -webkit-gradient(linear, left top, left bottom, from(#FFA500), to(#FF4500)); background: -moz-linear-gradient(top, #FFA500, #FF4500); background: linear-gradient(to bottom, #FFA500, #FF4500); } /*4.動畫效果*/ @keyframes rotate{ 0%{ transform: rotate(0deg); } 100%{ transform: rotate(360deg); } } .box{ animation: rotate 2s linear infinite; } /*5.縮放效果*/ .box{ transform: scale(0.8); } /*6.傾斜效果*/ .box{ transform: skew(30deg, 10deg); } /*7.陰影效果*/ .box{ box-shadow: 10px 10px 5px #888888; } /*8.字體特效*/ .text{ font-size: 60px; font-weight: bold; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; } /*9.透明度效果*/ .box{ opacity: 0.5; } /*10.過渡效果*/ .box{ transition: background 1s ease-in-out; } .box:hover{ background: #00FF00; }
以上是一些非常有趣的CSS3特效,它們可以幫助我們更好的實現想要的效果,同時還可以讓網頁內容更加生動有趣,吸引用戶的注意力。希望大家可以嘗試使用這些特效,并且不斷探索更多的CSS3特效,讓我們的網頁變得更加美觀和豐富多彩。
上一篇css3服務器地址
下一篇mysql查詢哪個語句慢