css3圆环闪烁动画

最新推荐文章于 2024-06-23 09:34:01 发布

weixin_34327223

最新推荐文章于 2024-06-23 09:34:01 发布

阅读量494

点赞数

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style type='text/css'>
.circle {
    width: 200px;
    height: 200px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -100px 0 0 -100px;
}

.circle1,
.circle2,
.circle3,
.center {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -30px 0 0 -30px;
    width: 60px;
    height: 60px;
    border-radius: 30px;
    background-color: #666666;
}

.center {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -35px 0 0 -35px;
    width: 70px;
    height: 70px;
    border-radius: 35px;
    background: #111111;
    / text-align: center;
    line-height: 70px;
    color: #EAEAEA;
    font-size: 16px;
    font-family: '';
}

.circle1 {
    -webkit-animation: circle 3s linear infinite;
    animation: circle 3s linear infinite;
}

.circle2 {
    -webkit-animation: circle 3s linear 0.8s infinite;
    animation: circle 3s linear 0.8s infinite;
}

.circle3 {
    -webkit-animation: circle 3s linear 1.6s infinite;
    /* Safari and Chrome */
    animation: circle 3s linear 1.6s infinite;
}

@-webkit-keyframes circle {
    /* Safari and Chrome */
    from {
        opacity: 1;
        -webkit-transform: scale(0);
    }
    to {
        opacity: 0;
        -webkit-transform: scale(3);
    }
}
</style>
</head>

<body>
    <div class='circle'>
        <div class='circle1'>&nbsp;</div>
        <div class='circle2'>&nbsp;</div>
        <div class='circle3'>&nbsp;</div>
        <div class='center'></div>
    </div>
</body>

</html>