css3实现loading

最新推荐文章于 2024-09-13 23:28:46 发布

丁小柒

最新推荐文章于 2024-09-13 23:28:46 发布

阅读量777

点赞数

分类专栏： css 文章标签： css3

本文链接：https://blog.csdn.net/qq_33548381/article/details/66476801

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML

        <div class="loading">
        <span></span>
        </div>

css

.loading{
            width: 80px;
            height: 80px;
            border-radius: 50%;
            margin: 0 auto;
            margin-top:100px;
            position: relative;
            border:5px solid lightgreen;
            -webkit-animation: rota 2s linear infinite;
        }
        .loading span{
            display: inline-block;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: lightgreen;
            position: absolute;
            left: 50%;
            margin-top: -15px;
            margin-left: -15px;
            -webkit-animation: cb 2s linear infinite;
        }
        @-webkit-keyframes cb{
            0%{
                background:#00FF99;
            }
            50%{
                background:#6699FF;
            }
            100%{
                background:#00FF99 ;
            }
        }
        @-webkit-keyframes rota{
            0%{
                -webkit-transform: rotate(0deg);
                border-color:#00FF99;
            }
            50%{
                -webkit-transform: rotate(180deg);
                border-color:#6699FF;
            }
            100%{
                -webkit-transform: rotate(360deg);
                border-color:#00FF99 ;
            }
        }