在圆圈div内旋转(360度)文字选框动画

时间:2012-03-06 11:19:13

标签: javascript jquery css

我只想问一下div中是否可以使用旋转文本?

<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>

由于

1 个答案:

答案 0 :(得分:5)

结帐this fiddle。但是,您必须正确对齐文本(这取决于您的一般布局方式。)

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); }
}