css实现div一直旋转

html示例

<html>
    <head>
        <meta charset="UTF-8">
        <script src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script>
        <style>
            #xuanzhun {
                -webkit-transition-property: -webkit-transform;
                -webkit-transition-duration: 1s;
                -moz-transition-property: -moz-transform;
                -moz-transition-duration: 1s;
                -webkit-animation: rotate 3s linear infinite;
                -moz-animation: rotate 3s linear infinite;
                -o-animation: rotate 3s linear infinite;
                animation: rotate 3s linear infinite;
            }

            @-webkit-keyframes rotate {
                from {
                    -webkit-transform: rotate(0deg)
                }

                to {
                    -webkit-transform: rotate(360deg)
                }
            }

            @-moz-keyframes rotate {
                from {
                    -moz-transform: rotate(0deg)
                }

                to {
                    -moz-transform: rotate(359deg)
                }
            }

            @-o-keyframes rotate {
                from {
                    -o-transform: rotate(0deg)
                }

                to {
                    -o-transform: rotate(359deg)
                }
            }

            @keyframes rotate {
                from {
                    transform: rotate(0deg)
                }

                to {
                    transform: rotate(359deg)
                }
            }
        </style>
    </head>
    <body>
        <div id="xuanzhun" style="width: 30px; height: 30px; background-color: aquamarine;">

        </div>
    </body>
</html>

内容来自互联网

posted @ 2021-01-25 16:43  _DC  阅读(641)  评论(0)  编辑  收藏  举报