CSS3是一種非常強大的樣式表語言,可用于為網站添加動態和吸引人的效果。下面是一些CSS3動態效果的示例:
/* 1. 旋轉 */ .rotate { transition: transform 1s ease; } .rotate:hover { transform: rotate(360deg); } /* 2. 放大 */ .scale { transition: transform 0.5s ease; } .scale:hover { transform: scale(1.5); } /* 3. 漸變 */ .gradient { background: linear-gradient(45deg, #fc466b, #3f5efb); transition: background 0.5s ease; } .gradient:hover { background: linear-gradient(45deg, #3f5efb, #fc466b); } /* 4. 文字陰影 */ .shadow { text-shadow: 0px 0px 5px rgba(0,0,0,0.5); transition: text-shadow 0.5s ease; } .shadow:hover { text-shadow: 0px 0px 15px rgba(0,0,0,0.5); }
以上示例僅僅是CSS3動態的一部分,還有很多其他的效果可以使用。 但是,要注意不要過度使用這些動態效果,否則可能會影響到用戶體驗。在使用CSS3動態效果時,最好保持簡單和清晰。
上一篇css3好看的返回頂部
下一篇css js圖標列表