CSS3动画简单实现顺时针旋转

效果截图：
CSS3顺时针旋转动画.gif

HTML+CSS代码：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>css3简单实现旋转</title>
    <style type="text/css">
        .rotate{
            width: 100px; 
            height: 100px; 
            background-color: #0082CA; 
            margin: 10%;
            color: #FFFFFF;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .clockwise-rotate{
            -moz-animation: spin 3s infinite linear; 
            -o-animation: spin 3s infinite linear; 
            -webkit-animation: spin 3s infinite linear; 
            animation: spin 3s infinite linear;
        }
        @-moz-keyframes spin{
            0%{-moz-transform:rotate(0)}
            100%{-moz-transform:rotate(359deg)}
        }
        @-webkit-keyframes spin{
            0%{-webkit-transform:rotate(0)}
            100%{-webkit-transform:rotate(359deg)}
        }
        @-o-keyframes spin{
            0%{-o-transform:rotate(0)}
            100%{-o-transform:rotate(359deg)}
        }
        @-ms-keyframes spin{
            0%{-ms-transform:rotate(0)}
            100%{-ms-transform:rotate(359deg)}
        }
        @keyframes spin{
            0%{transform:rotate(0)}
            100%{transform:rotate(359deg)}
        }
    </style>
</head>
<body>
    
    <div class="rotate clockwise-rotate">angbike.com</div>
    
</body>
</html>

已自动关闭评论