欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

css3 兩個動畫效果

老白2年前11瀏覽0評論

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來打造美觀的網頁效果。