旋转(360度）圆形分区内的文本框动画

Rotating (360deg) Text marquee animation inside a circle div

本文关键字：文本 动画 分区 360度 旋转      更新时间：2023-09-26

我只想问一下，是否可以使用？

<style>
div{
    -moz-border-radius: 50px/50px;
    -webkit-border-radius: 50px 50px;
    border-radius: 80px/80px;;
    border:solid 21px #f00; 
    width:100px;
    height:100px;   
}
</style>
<div>this will rotate 360 deg like marquee</div>

感谢

看看这个小提琴。不过，你必须正确对齐你的文本（这将取决于你的一般布局方式。）

CSS：

div{
    -moz-border-radius: 50px/50px;
    -webkit-border-radius: 50px 50px;
    border-radius: 80px/80px;;
    border:solid 21px #f00; 
    width:100px;
    height:100px;
    -webkit-animation: rotation 2s linear infinite;
    -moz-animation: rotation 2s linear infinite;
    -ms-animation: rotation 2s linear infinite;
}
@-webkit-keyframes rotation {
    0%   { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}
@-moz-keyframes rotation {
    0%   { -moz-transform: rotate(0deg); }
    100% { -moz-transform: rotate(360deg); }
}
@-ms-keyframes rotation {
    0%   { -ms-transform: rotate(0deg); }
    100% { -ms-transform: rotate(360deg); }
}
相关文章：