css多圆动画效果图

CSS是网页设计中最重要的语言之一，可以为网页增添各种效果。其中，多圆动画效果图是非常有趣的一种效果，下面我们一起来看看怎样实现这个动画吧。

.circle{
        width: 100px;
        height: 100px;
        background-color: red;
        border-radius: 50%;
        animation-name: move-right;
     /* 动画名 */    animation-duration: 2s;
     /* 动画持续时间 */    animation-iteration-count: infinite;
     /* 动画循环次数 */    animation-direction: alternate;
 /* 动画方向 */}
@keyframes move-right {
    0% {
     transform: translateX(0px);
 }
    100% {
     transform: translateX(100px);
 }
}
@keyframes move-left {
    0% {
     transform: translateX(0px);
 }
    100% {
     transform: translateX(-100px);
 }
}
@keyframes move-down {
    0% {
     transform: translateY(0px);
 }
    100% {
     transform: translateY(100px);
 }
}
@keyframes move-up {
    0% {
     transform: translateY(0px);
 }
    100% {
     transform: translateY(-100px);
 }
}
    

我们需要一个圆形的元素，用css中的border-radius属性设置为50%即可。接着，我们需要定义四个动画，分别是往右、往左、往下和往上移动的动画。动画的定义使用了@keyframes关键字，分别将初始位置和结束位置用transform属性设置为位移。

最后，在圆形元素中引用这些动画即可。动画名使用animation-name属性引用，动画的持续时间用animation-duration属性设置，动画的循环次数用animation-iteration-count属性设置，动画方向用animation-direction属性设置。我们需要使用“alternare”选项，让圆形元素往返运动。

这样，一个简单的多圆动画效果图就完成了。利用@keyframes和animation属性，我们可以轻松实现各种有趣的动画效果，让网页页面更加丰富多彩。

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