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