css3 绕轨道转动 |css3 点击水波纹效果

CSS3绕轨道转动是一种非常有趣、炫酷的效果，通过CSS3的transform属性和@keyframes关键帧动画实现。下面大家来一步步实现这个效果。首先，大家需要创建一个圆形的div容器，用作轨道。在样式表中设置这个div容器的宽高、边框、圆角及显示位置等属性。

.circle {
width: 300px;
height: 300px;
border: 5px solid #ccc;
border-radius: 50%;
position: relative;
margin: 50px auto;
}

接着，大家需要创建一个小球（div）用来绕着轨道旋转。在样式表中设置小球的宽高、圆角、背景颜色、绝对定位等属性。并使用@keyframes关键帧动画使小球绕轨道旋转。

.ball {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #00bcd4;
position: absolute;
top: 0;
left: 50%;
margin-left: -25px;
animation: rotate 4s ease-in-out infinite;
}
@keyframes rotate {
0% {
transform: rotate(0deg) translate(125px) rotate(0deg);
}
25% {
transform: rotate(90deg) translate(125px) rotate(-90deg);
}
50% {
transform: rotate(180deg) translate(125px) rotate(180deg);
}
75% {
transform: rotate(270deg) translate(125px) rotate(-270deg);
}
100% {
transform: rotate(360deg) translate(125px) rotate(-360deg);
}
}

上述代码中，大家先在@keyframes中设置小球的旋转方式，旋转的四个关键帧分别为0%、25%、50%、75%和100%，每次旋转的角度为90度，最后的位置是360度旋转后的位置。接着，在.ball中设置动画时间、运动方式和是否无限循环播放等属性。最后，大家将小球放到轨道容器内，如下所示：

<div class="circle">
<div class="ball"></div>
</div>

经过上述步骤，大家成功地实现了一个绕轨道转动的小球效果。你可以尝试修改不同的旋转方式、时间和角度，打造出不同的动态效果来。