css3沿着半圆走动 |css3的动画旋转

dw link css，如何清除定位 css，关于css的优化命名，css3 烟雾效果，vue 显示css资源全路径，css文字堆叠到图片上，css3的动画旋转 css3沿着半圆走动 |css3的动画旋转

/*HTML*/
<div class="circle"></div>
/*CSS*/
.circle{
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #f00;
position: absolute;
top: 50%;
left: 0;
animation: move 2s infinite;
}
@keyframes move{
0%{
transform: translate(0, -50%) rotate(0deg);
}
50%{
transform: translate(100px, -50%) rotate(180deg);
}
100%{
transform: translate(0, -50%) rotate(360deg);
}
}

在HTML中大家只需要创建一个div元素即可，并在CSS中设置其样式。

在CSS中，大家首先设置元素的基本样式，包括宽、高、圆角和背景颜色，并将其定位到父元素的中心位置。接着，大家使用animation属性来添加动画效果，其中move表示动画名称，2s表示动画持续时间，infinite表示动画循环次数。

在@keyframes中，大家设置元素的移动轨迹和旋转角度。0%表示动画起始位置，50%表示动画中间位置，100%表示动画结束位置。具体来说，在0%时，元素在初始位置；在50%时，元素向右平移100px并顺时针旋转180度；在100%时，元素再次回到初始位置并继续顺时针旋转以形成循环效果。

这就是使用CSS3实现沿着半圆走动的方法。大家可以根据自己的需要调整元素的样式和动画参数来达到不同的效果。