css动画案例大全

CSS动画案例大全是一个非常棒的网站，里面收录了很多有趣、实用的CSS动画效果，不仅有基础的动画效果，也有更加复杂、特别的动画效果。下面，我们来看一些 CSS动画案例大全中的经典案例。

/* 一些基础的动画效果 *//* 1. 渐变动画 */.box {
    opacity: 0;
    transition: opacity .5s ease;
}
.box:hover {
    opacity: 1;
}
/* 2. 缩放动画 */.box {
    transform: scale(0);
    transition: transform .5s ease;
}
.box:hover {
    transform: scale(1);
}
/* 3. 旋转动画 */.box {
    transform: rotate(0);
    transition: transform .5s ease;
}
.box:hover {
    transform: rotate(180deg);
}
/* 4. 移动动画 */.box {
    transform: translateX(0);
    transition: transform .5s ease;
}
.box:hover {
    transform: translateX(100px);
}
/* 一些特别的动画效果 *//* 1. 球体滚动动画 */.ball {
    animation: rollBall 2s linear infinite;
}
@keyframes rollBall {
0% {
     transform: rotateX(0);
 }
100% {
     transform: rotateX(360deg);
 }
}
/* 2. 翻转动画 */.flip {
    transform-style: preserve-3d;
    transition: transform .5s;
}
.flip:hover {
    transform: rotateY(180deg);
}
/* 3. 飞入动画 */.flyIn {
    animation: flyInFromBottom .5s ease;
}
@keyframes flyInFromBottom {
from {
    transform: translateY(100%);
}
to {
    transform: translateY(0);
}
}
/* 4. 发光动画 */.glow {
    animation: glow .5s ease infinite alternate;
}
@keyframes glow {
from {
    box-shadow: 0 0 10px white;
}
to {
    box-shadow: 0 0 20px white;
}
}
    

以上就是一些 CSS动画案例大全中比较经典的动画案例，它们展示了 CSS动画的无限可能性，可以实现各种各样的动画效果，为网页增添生动、有趣的元素。

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