css3两个圆移动在一起

CSS3是网页设计中应用广泛的一种技术，其强大的特性可以让我们实现各种炫酷的效果，其中，动画效果是非常受欢迎的一个。

.circle {
width: 50px;
height: 50px;
border-radius: 50%;
position: absolute;
top: 50%;
transform: translateY(-50%);
animation: circle-1 3s ease-in-out infinite;
}
.circle-2 {
left: 60px;
animation: circle-2 3s ease-in-out infinite;
}
@keyframes circle-1 {
0% {
transform: translateY(-50%) translateX(0);
}
50% {
transform: translateY(-50%) translateX(110px);
}
100% {
transform: translateY(-50%) translateX(0);
}
}
@keyframes circle-2 {
0% {
transform: translateY(-50%) translateX(0);
}
50% {
transform: translateY(-50%) translateX(-110px);
}
100% {
transform: translateY(-50%) translateX(0);
}
}

在上面的代码中，我们定义了两个class，分别对应两个圆。通过设置它们的位置、大小、圆角等属性，我们可以让圆看起来更加完美。而通过 transform 属性，我们将它们放在了页面中心的位置。

最重要的是，通过定义两个动画 @keyframes 来控制两个圆的移动。我们的目标是让它们在不停地左右移动，仿佛是在闹钟上的秒针。我们可以通过设置 translateX 属性来实现这个效果。

最后，我们将两个class应用于HTML元素中，同时设置它们的动画，这样两个圆就能一起晃动了。

查看更多关于css3两个圆移动在一起的详细内容...