css3 简笔画 动画 |css禁止界面选中文字 无效

.box {
width: 300px;
height: 300px;
background-color: #ccc;
position: relative;
}
.circle {
width: 100px;
height: 100px;
background-color: #26A69A;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: rotate 5s infinite linear;
}
@keyframes rotate {
0% {
transform: translate(-50%, -50%) rotate(0deg);
}
100% {
transform: translate(-50%, -50%) rotate(360deg);
}
}

以上是一个简单的例子，演示了如何使用 CSS3 和简单的 HTML 结构来创建一个圆形动画效果。

首先，大家需要一个外层容器，这里使用了一个 div 元素，并设置了其宽和高。

接着，大家创建了一个名为 circle 的 div 元素，并设置其样式。

其中，大家使用了 border-radius 属性来将其样式设置为圆形，使用了 position 属性来让它在外层容器内具有绝对定位，使用了 transform 属性来设置其位置，并使用 animation 属性来设置动画。

最后，大家定义了名为 rotate 的关键帧动画，让这个圆形以固定速度无限旋转。

这个例子虽然简单，但展示了 CSS3 动画的基本用法和原理。以此为基础，大家可以创建出更加复杂的动画效果。