CSS3是Web開發中必不可少的一部分,它可以幫助我們實現各種各樣的效果,比如動畫、漸變等。在這篇文章中,我們將通過實例來學習如何使用CSS3來修飾網頁。
/* 實例一:文字陰影 */ p { text-shadow: 2px 2px #ccc; } /* 實例二:圓角邊框 */ .box { border-radius: 10px; border: 2px solid #ccc; } /* 實例三:漸變背景 */ .background { background: linear-gradient(to bottom, #ccc, #fff); } /* 實例四:旋轉和縮放 */ .logo { transform: rotate(30deg) scale(1.5); } /* 實例五:動畫效果 */ .animate { animation: move 2s infinite alternate; } @keyframes move { 0% { transform: translate(0, 0); } 100% { transform: translate(100px, 100px); } }
以上是五個使用CSS3實現的修飾練習案例,每個案例都有注釋說明作用。在實際開發中,我們可以將這些效果結合起來使用,創造出更加復雜且炫酷的效果。
下一篇css3位移怎么實現