CSS3動感網頁是指通過使用CSS3中的動畫效果和變換效果,使網頁更加生動、有趣、豐富多彩。
/* 代碼示例 */ .box { width: 300px; height: 300px; background-color: #1ABC9C; position: relative; animation: bounce 2s infinite; } @keyframes bounce { 0% { top: 0; } 50% { top: 250px; } 100% { top: 0; } }
CSS3動畫效果可以通過@keyframes來定義,而變換效果可以通過transform屬性來實現。這些效果可以與其他CSS屬性一起使用,例如opacity、transition等,以創造更加豐富的效果。
/* 代碼示例 */ .box { width: 100px; height: 100px; background-color: #3498DB; position: relative; transform: rotate(45deg); transition: transform 0.5s; } .box:hover { transform: rotate(90deg); }
CSS3動感網頁不僅可以讓網頁更加生動有趣,還可以提高用戶體驗和互動性。但是需要注意的是,過多的動畫效果可能會影響網頁性能和加載速度,因此應該慎重使用,并盡可能優化性能。
下一篇mac php 擴展