CSS3是一種用于美化網頁的樣式語言,具有許多強大的特性和效果。下面來介紹兩個比較流行的動畫效果:
.anim1 { animation: move 2s ease-in-out infinite alternate; } @keyframes move { 0% { transform: translateX(0); } 50% { transform: translateX(200px); } 100% { transform: translateX(0); } }
其中,move
是自定義的動畫名,2s
表示動畫時長為2秒,ease-in-out
表示動畫速度會先加速再減速,infinite
表示動畫無限循環,alternate
表示動畫往返運動。該動畫的效果為元素來回移動。
.anim2 { animation: scale 1s ease-in-out infinite alternate; } @keyframes scale { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } }
同樣的,scale
是自定義的動畫名,1s
表示動畫時長為1秒,ease-in-out
表示動畫速度會先加速再減速,infinite
表示動畫無限循環,alternate
表示動畫往返運動。該動畫的效果為元素放大再縮小。
以上兩個動畫效果都非常簡單易用,只需要根據自己的需求進行一些調整即可。希望這篇介紹能夠幫助大家更好地運用CSS3來打造美觀的網頁效果。
上一篇css3 不繼承