css一个标签有多个动画 |css权重最大

.box {
width: 100px;
height: 100px;
background-color: #69c0ff;
border-radius: 50%;
position: relative;
animation: rotate 2s ease-in-out 1s infinite;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.box:before {
content: "";
position: absolute;
top: 50%;
left: -5px;
width: 10px;
height: 5px;
background-color: #fff;
border-radius: 50%;
animation: moveX 2s linear infinite;
}
@keyframes moveX {
0% {
transform: translateX(0);
}
50% {
transform: translateX(200px);
}
100% {
transform: translateX(0);
}
}
.box:after {
content: "";
position: absolute;
top: -5px;
left: 50%;
width: 5px;
height: 10px;
background-color: #fff;
border-radius: 50%;
animation: moveY 2s linear infinite;
}
@keyframes moveY {
0% {
transform: translateY(0);
}
50% {
transform: translateY(200px);
}
100% {
transform: translateY(0);
}
}

上面的代码展示了利用CSS为一个box元素添加圆形旋转、横向移动和纵向移动的动画。首先，利用border-radius属性使box成为一个圆形，并且添加了旋转动画，使它不断的旋转。

接着，为了添加一个横向移动的动画，大家利用:before伪元素在box元素的左边添加了一个小圆点，并为它添加了循环运动的动画。通过改变translateX属性来实现在横向上的移动。

然后，为了添加纵向移动的动画，大家利用:after伪元素在box元素的上方添加了一个小圆点，并为它添加了循环运动的动画。通过改变translateY属性来实现在纵向上的移动。

这样，一个简单的box元素就变得更加生动起来了。通过CSS的多种动画效果，大家可以让网页更加有趣、更加富有动感。