css3区块围绕圆旋转 |网页css属性词

.block {
width: 100px;
height: 100px;
background-color: #f44336;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(0deg);
animation: rotate 5s linear infinite; 
}
@keyframes rotate {
from {
transform: translate(-50%, -50%) rotate(0deg);
}
to {
transform: translate(-50%, -50%) rotate(360deg);
}
}

这里大家首先定义了一个区块，给它设置了宽高、背景颜色和边框半径，然后通过绝对定位将它放置在父元素的中心位置。接着使用transform属性将区块水平移动50%，垂直移动50%并且旋转0度。最后使用animation属性将图像无限循环旋转。

在keyframes中，大家定义了两个关键帧，一个是从0度开始旋转，另一个是旋转到360度。这样就能使区块在一个周期内完成一次完整的旋转。

以上是围绕圆旋转的效果的实现方式，运用CSS3元素的属性达到心满意足的效果，也给了Web作者更多的创作空间。通过对样式的修改，大家还可以得到其它很多有趣的效果，例如：缩放、变换、翻转等等。相信在不断的探索中，你也能为你的页面增添不同寻常的色彩。