css3点随着圆圈转

最新推荐文章于 2024-09-20 14:14:01 发布

chongtaogou6003

最新推荐文章于 2024-09-20 14:14:01 发布

阅读量139

点赞数

原文链接：https://my.oschina.net/joldy/blog/845017

版权

1：html文件

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>css3 radius实现圆形动画特效</title>
    <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
</head>

<body>
    <div id="caseBlanche">
        <div id="rond">
            <div id="test"></div>
        </div>
        <div id="load">
            <p></p>
        </div>
    </div>
    <div id="caseBlanche2">
        <div id="rond">
            <div id="test"></div>
        </div>
        <div id="load">
            <p></p>
        </div>
    </div>
    <div id="caseBlanche3">
        <div id="rond">
            <div id="test"></div>
        </div>
        <div id="load">
            <p></p>
        </div>
    </div>
    <div id="caseBlanche4">
        <div id="rond">
            <div id="test"></div>
        </div>
        <div id="load">
            <p></p>
        </div>
    </div>
    <div id="caseBlanche5">
        <div id="rond">
            <div id="test"></div>
        </div>
        <div id="load">
            <p></p>
        </div>
    </div>
    <div id="caseBlanche6">
        <div id="rond">
            <div id="test"></div>
        </div>
        <div id="load">
            <p></p>
        </div>
    </div>
    <div id="caseBlanche7">
        <div id="rond">
            <div id="test"></div>
        </div>
        <div id="load">
            <p></p>
        </div>
    </div>
    </div>
</body>

</html>

2：css文件

* {
    padding: 0px;
    margin: 0px;
}

body {
    background: #F6F6F6;
    font-size: 14px;
}


/****一次性****/

#caseBlanche {
    height: 100px;
    width: 100px;
    position: absolute;
    left: -10px;
    top: 20px;
}

#caseBlanche #load {
    color: #fff;
    font-family: calibri;
    text-align: center;
    position: absolute;
    top: 32px;
    left: 26px;
    height: 80px;
    width: 80px;
    border-radius: 40px;
    background: #0CF;
}

#caseBlanche #load p {
    line-height: 80px;
}


/****DEBUT TEST****/

#test {
    height: 10px;
    width: 10px;
    position: absolute;
    background-color: #0CF;
    border-radius: 50%;
    top: 0px;
    left: 10px;
    margin: 5px;
}

#rond {
    height: 100px;
    width: 100px;
    border: 1px solid #0CF;
    border-radius: 50%;
    position: absolute;
    top: 20px;
    left: 15px;
    animation: rond 3s infinite;
    -webkit-animation: rond 3s infinite;
}

@keyframes rond {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@-webkit-keyframes rond {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}


/****第一个****/


/****流量包月****/

#caseBlanche2 {
    height: 100px;
    width: 100px;
    position: absolute;
    top: 100px;
    left: 100px;
}

#caseBlanche2 #load {
    color: #fff;
    font-family: calibri;
    text-align: center;
    position: absolute;
    top: 32px;
    left: 26px;
    height: 80px;
    width: 80px;
    border-radius: 40px;
    background: #F60;
}

#caseBlanche2 #load p {
    line-height: 80px;
}

#caseBlanche2 #test {
    height: 10px;
    width: 10px;
    position: absolute;
    background-color: #F60;
    border-radius: 50%;
    top: 0px;
    left: 10px;
    margin: 5px;
}

#caseBlanche2 #rond {
    height: 100px;
    width: 100px;
    border: 1px solid #F60;
    border-radius: 50%;
    position: absolute;
    top: 20px;
    left: 15px;
    animation: rond 3s infinite;
    -webkit-animation: rond 3s infinite;
}


/****第二个****/


/****流量包日****/

#caseBlanche3 {
    height: 100px;
    width: 100px;
    position: absolute;
    top: 140px;
    left: -10px;
}

#caseBlanche3 #load {
    color: #fff;
    font-family: calibri;
    text-align: center;
    position: absolute;
    top: 32px;
    left: 26px;
    height: 80px;
    width: 80px;
    border-radius: 40px;
    background: #0C3;
}

#caseBlanche3 #load p {
    line-height: 80px;
}

#caseBlanche3 #test {
    height: 10px;
    width: 10px;
    position: absolute;
    background-color: #0C3;
    border-radius: 50%;
    top: 0px;
    left: 10px;
    margin: 5px;
}

#caseBlanche3 #rond {
    height: 100px;
    width: 100px;
    border: 1px solid #0C3;
    border-radius: 50%;
    position: absolute;
    top: 20px;
    left: 15px;
    animation: rond 3s infinite;
    -webkit-animation: rond 3s infinite;
}


/****第三个****/


/****夜间流量****/

#caseBlanche4 {
    height: 100px;
    width: 100px;
    position: absolute;
    top: 20px;
    left: 200px;
}

#caseBlanche4 #load {
    color: #fff;
    font-family: calibri;
    text-align: center;
    position: absolute;
    top: 32px;
    left: 26px;
    height: 80px;
    width: 80px;
    border-radius: 40px;
    background: #900;
}

#caseBlanche4 #load p {
    line-height: 80px;
}

#caseBlanche4 #test {
    height: 10px;
    width: 10px;
    position: absolute;
    background-color: #900;
    border-radius: 50%;
    top: 0px;
    left: 10px;
    margin: 5px;
}

#caseBlanche4 #rond {
    height: 100px;
    width: 100px;
    border: 1px solid #900;
    border-radius: 50%;
    position: absolute;
    top: 20px;
    left: 15px;
    animation: rond 3s infinite;
    -webkit-animation: rond 3s infinite;
}


/****第四个****/


/****定向流量****/

#caseBlanche5 {
    height: 100px;
    width: 100px;
    position: absolute;
    top: 140px;
    left: 200px;
}

#caseBlanche5 #load {
    color: #fff;
    font-family: calibri;
    text-align: center;
    position: absolute;
    top: 32px;
    left: 26px;
    height: 80px;
    width: 80px;
    border-radius: 40px;
    background: #CC3;
}

#caseBlanche5 #load p {
    line-height: 80px;
}

#caseBlanche5 #test {
    height: 10px;
    width: 10px;
    position: absolute;
    background-color: #CC3;
    border-radius: 50%;
    top: 0px;
    left: 10px;
    margin: 5px;
}

#caseBlanche5 #rond {
    height: 100px;
    width: 100px;
    border: 1px solid #CC3;
    border-radius: 50%;
    position: absolute;
    top: 20px;
    left: 15px;
    animation: rond 3s infinite;
    -webkit-animation: rond 3s infinite;
}


/****第五个****/


/****4G专享流量****/

#caseBlanche6 {
    height: 100px;
    width: 100px;
    position: absolute;
    top: 210px;
    left: 100px;
}

#caseBlanche6 #load {
    color: #fff;
    font-family: calibri;
    text-align: center;
    position: absolute;
    top: 32px;
    left: 26px;
    height: 80px;
    width: 80px;
    border-radius: 40px;
    background: #F0F;
}

#caseBlanche6 #load p {
    line-height: 80px;
}

#caseBlanche6 #test {
    height: 10px;
    width: 10px;
    position: absolute;
    background-color: #F0F;
    border-radius: 50%;
    top: 0px;
    left: 10px;
    margin: 5px;
}

#caseBlanche6 #rond {
    height: 100px;
    width: 100px;
    border: 1px solid #F0F;
    border-radius: 50%;
    position: absolute;
    top: 20px;
    left: 15px;
    animation: rond 3s infinite;
    -webkit-animation: rond 3s infinite;
}


/****第六个****/


/****4G加餐流量****/

#caseBlanche7 {
    height: 100px;
    width: 100px;
    position: absolute;
    top: -10px;
    left: 100px;
}

#caseBlanche7 #load {
    color: #fff;
    font-family: calibri;
    text-align: center;
    position: absolute;
    top: 32px;
    left: 26px;
    height: 80px;
    width: 80px;
    border-radius: 40px;
    background: #06F;
}

#caseBlanche7 #load p {
    line-height: 80px;
}

#caseBlanche7 #test {
    height: 10px;
    width: 10px;
    position: absolute;
    background-color: #06F;
    border-radius: 50%;
    top: 0px;
    left: 10px;
    margin: 5px;
}

#caseBlanche7 #rond {
    height: 100px;
    width: 100px;
    border: 1px solid #06F;
    border-radius: 50%;
    position: absolute;
    top: 20px;
    left: 15px;
    animation: rond 3s infinite;
    -webkit-animation: rond 3s infinite;
}


/****第七个****/

转载于:https://my.oschina.net/joldy/blog/845017