css3文字环绕旋转
CSS3可以使文字环绕旋转,通过transform
属性的rotate
函数和animation
属性实现动态效果。以下是一个简单的例子:
HTML:
<div class="text-rotator">
<div class="text-wrapper">
<h1>文字环绕旋转效果</h1>
</div>
</div>
CSS:
.text-rotator {
width: 200px;
height: 200px;
position: relative;
margin: 50px;
}
.text-wrapper {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.text-rotator h1 {
font-size: 20px;
color: #333;
margin: 0;
animation: rotate 5s linear infinite;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
这段代码会使得.text-rotator
中的h1
标签文字不断旋转,形成一个环绕的动画效果。可以通过调整animation
属性中的时长和其他参数来改变旋转的速度和行为。
评论已关闭