css3顺时针旋转动画 |对话窗口 css

/*以下是CSS代码*/
.box{
width: 100px;
height: 100px;
background-color: red;
/*设置旋转中心为盒子的中心*/
transform-origin: 50% 50%;
/*设置动画时间为3秒*/
animation: rotate 3s linear infinite;
}
/*定义旋转动画*/
@keyframes rotate{
from{
transform:rotate(0deg);
}
to{
transform:rotate(360deg);
}
}

首先，大家会创建一个div盒子，用来展示旋转动画效果，给盒子设置宽高和背景色，然后设置旋转中心为盒子的中心。这里大家通过transform-origin属性来实现。接着大家定义一个动画，命名为rotate，并设置它的时间为3秒、变化方式为线性、循环播放。最后，在@keyframes规则中定义了旋转的起点和终点，从0度到360度，这样旋转动画就成型了。

你可以根据需要设置动画效果的时间、循环次数、变化方式等等。使用CSS3顺时针旋转动画可以为网站添加一些生动的效果，提高用户体验。