css3图片360旋转动画 css旋转360度动画

css3圆环旋转效果动画怎么做

1、首先新建一个html空白文档，取名字叫做css3动画，保存一下。

2、然后写html结构，只需要一个div元素即可，class名字叫做img

3、设置其边框为不同的颜色，边框宽度设置成100px。

4、因为是圆环，所以我们用到了css3的圆角效果，设置圆角为50%，也就是border-radius:50%，看一下效果。

5、接下来就是关键的步骤了，也就是添加动画效果。输入以下代码

6、来看一下最后的效果，还是不错的。

相关问答

Q1: 如何用css3实现360度旋转动画

写了例子，效果不是很好，仅供参考

!DOCTYPE html

html lang="en"

    head

    meta http-equiv="Content-Type" content="text/html; charset=utf-8"

    titleIE浏览器CSS transform旋转属性的演示/title

    meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" /

    style type="text/css"

            body { font-family: "Arial", sans-serif; }

            #example {

                position: absolute; 

                top: 100px; 

                left: 100px; 

                border: #09f solid 1px; 

                font-weight: 900; 

                color: #09f; 

                display: block; 

                width: 200px; 

                height: 200px; 

                text-align:center;

                line-height:200px;

                cursor:pointer;

            }

    /style

    

    /head

    body

    div id="example"./div

        script type="text/javascript"

            function rotate(percent, scale){

                var radian = Math.PI * percent;

                var angle  = 180 * percent;

                var scale  = 0.8;

                var style  = document.getElementById("example").style;

                var transform = "rotate("+ angle +"deg) scale("+ scale +")";

                style.filter = "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',M11="+Math.cos(radian)*scale+",M12="+(Math.sin(radian) * -1)*scale+",M21="+Math.sin(radian)*scale+",M22="+Math.cos(radian)*scale+");";

                style.MozTransform    = transform;

                style.WebkitTransform = transform;

                style.OTransform      = transform;

                style.Transform       = transform;

            }

            i=0.25;

            setInterval("rotate(i);i+=0.01", 10);

        /script

    /body

/html

Q2: css3 实现360度无线旋转

使用css3 属性方法 rotate() 实现旋转

transform-origin是规定如何旋转

: center center；为以围绕中心点旋转；

top left; 以围绕左上角旋转；

top right; 以围绕右上角旋转；

css3图片360旋转动画的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于css旋转360度动画、css3图片360旋转动画的信息别忘了在本站进行查找喔。