css显示时动画效果

CSS动画效果是现代网页设计中不可或缺的一环。通过CSS的属性和选择器，我们可以实现各种炫酷的动画效果。以下是一些常见的CSS动画效果。

/* 旋转动画 */.rotate {
    animation: rotate 2s linear infinite;
}
@keyframes rotate {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}
/* 跳跃动画 */.jump {
    animation: jump 1s ease-in-out infinite alternate;
}
@keyframes jump {
from {
    transform: translateY(0);
}
to {
    transform: translateY(-50px);
}
}
/* 渐变动画 */.gradient {
    animation: gradient 2s ease infinite alternate;
}
@keyframes gradient {
0% {
    background: #ff9a9e;
}
50% {
    background: #fad0c4;
}
100% {
    background: #ffd1ff;
}
}
/* 淡入动画 */.fade-in {
    animation: fade-in 1s ease-in;
}
@keyframes fade-in {
from {
    opacity: 0;
}
to {
    opacity: 1;
}
}
/* 放大动画 */.scale-up {
    animation: scale-up 2s ease-in-out;
}
@keyframes scale-up {
from {
    transform: scale(1);
}
to {
    transform: scale(1.5);
}
}
    

以上是几种常见的CSS动画效果。你可以根据自己的需求，自由组合调整属性和选择器，创造出更加炫酷的动画效果。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！