CSS3在動畫效果方面提供了非常多的選擇,比如文字飛入效果,非常適合用來增加網頁的視覺效果,讓用戶對網頁留下更深刻的印象。
/* 定義關鍵幀動畫 */
@keyframes flyin {
0% {
opacity: 0;
transform: translateX(-100%);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
/* 應用關鍵幀動畫 */
.element {
animation: flyin 1s ease-out forwards;
/* 1s是動畫持續時間,ease-out是動畫速度曲線,forwards是動畫結束后保持最后一幀狀態 */
}
以上代碼定義了一個名為flyin的關鍵幀動畫,將元素從左側飛入,同時從0%到100%設置了透明度從0到1的變化。通過給元素應用這個動畫,就可以實現文字飛入的效果。
進一步自定義
除了上述基本的文字飛入效果,我們還可以根據實際需求進一步自定義動畫效果。例如,可以修改關鍵幀中的transform屬性,改變文字從哪個方向飛入。也可以修改動畫持續時間,改變整個動畫效果的快慢程度。
/* 定義關鍵幀動畫 */
@keyframes flyin-fromtop {
0% {
opacity: 0;
transform: translateY(-100%);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
/* 應用關鍵幀動畫 */
.element {
animation: flyin-fromtop 2s ease-in-out forwards;
/* 2s是動畫持續時間,ease-in-out是動畫速度曲線,forwards是動畫結束后保持最后一幀狀態 */
}
以上代碼將元素從頂部飛入,同時動畫持續時間為2秒,速度曲線為先加速后減速。通過這些自定義操作,可以讓動畫效果更加豐富生動。
上一篇css 去除文本框邊框
下一篇css 去掉點擊邊框虛線