< p >CSS3 動畫是現代 Web 開發的一個非常重要的技術，它可以讓網頁制作更加動態、交互、生動。下面為大家介紹一些 CSS3 動畫源碼的示例。< pre >/* 定義一個從左側進入的動畫 */
@keyframes my-anim {
from { left: -200px; }
to { left: 0; }
}
/* 使用上述動畫來制作從左側進入的動畫效果 */
.my-element {
animation: my-anim 1s ease;
}
/* 定義一個旋轉的動畫 */
@keyframes spin {
to { transform: rotate(360deg); }
}
/* 使用上述動畫來制作一個旋轉的按鈕 */
.btn {
animation: spin 1s ease-in-out infinite;
}
/* 定義一個縮放的動畫 */
@keyframes zoom {
0% { transform: scale(1, 1); }
50% { transform: scale(1.2,1.2); }
100% { transform: scale(1, 1); }
}
/* 使用上述動畫來制作一個縮放的圖像 */
.img {
animation: zoom 2s ease-in-out infinite;
}
/* 定義一個淡入淡出的動畫 */
@keyframes fade {
from { opacity: 0; }
to { opacity: 1; }
}
/* 使用上述動畫來制作一段淡入淡出的文字 */
.text {
animation: fade 2s ease-in-out alternate-reverse infinite;
}< /pre >< p >以上四個例子僅僅是 CSS3 動畫的冰山一角，開發者們可以創造出更加豐富多彩、獨具創意的動畫效果來，讓網頁展現更加鮮明的個性。當然，在開發過程中也需要注意動畫的使用，合理運用動畫可以增加用戶體驗，但過度使用則可能會降低網頁性能和用戶使用感受。
上一篇html 上傳代碼
下一篇html 打開微信代碼