CSS3是一種非常有用的技術,它提供了許多顯示特效,可以讓我們的網頁更加有趣和吸引人。以下是一些最常用的CSS3特效:
/* 漸變背景 */ background: linear-gradient(red, yellow); /* 邊框動畫 */ .border { border: 2px solid black; animation: border-anim 1s infinite; } @keyframes border-anim { 0% { border-color: black; } 50% { border-color: blue; } 100% { border-color: black; } } /* 旋轉動畫 */ .rotate { animation: rotate-anim 2s infinite; } @keyframes rotate-anim { 0% { transform: rotate(0deg); } 50% { transform: rotate(180deg); } 100% { transform: rotate(360deg); } } /* 陰影效果 */ .shadow { box-shadow: 5px 5px 10px grey; }
以上是一些CSS3的基礎特效,當然還有更多的特效可以探索。在應用這些效果時,需要注意它們可能會影響網頁的性能和響應速度,尤其是在移動設備上。因此,建議盡可能地優化代碼并減少不必要的特效。
下一篇301 php 代碼