css圆圈旋转特效

最新推荐文章于 2023-12-19 15:25:58 发布

bsh_csn

最新推荐文章于 2023-12-19 15:25:58 发布

阅读量4.2k

点赞数 1

分类专栏： html/css

本文链接：https://blog.csdn.net/bsh_csn/article/details/52794667

版权

html/css 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

css圆圈旋转特效

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">


            #loading{
                border-width: 4px;
                background: green;
                width: 40px;
                height: 40px;
                border-style: solid;
                border-color: #ccc #eee red blue;
                border-radius: 50%;
                -webkit-animation: "loading" 1s infinite linear;/***一秒循环执行**/      
        }
        @-webkit-keyframes "loading"{/**关键帧名称**/
                0%{-webkit-transform: rotate(0deg);}
                100%{-webkit-transform: rotate(360deg);}
        }

        </style>
    </head>

    <body>
        <div id="loading"></div>
    </body>

</html>