海浪进度球 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="new_file.css"/>
    </head>
    <body>
        <div class="circle">
            <div class="wave"></div>
        </div>
    </body>
</html>


*{
    margin: 0px;
    padding: 0px;
}
body{
    /* 当前浏览器窗口的100% */
    height: 100vh;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background-color: gray;
}
.circle{
    width: 200px;
    height: 200px;
    background-color: white;
    border-radius: 50%;
    border: 10px solid royalblue;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.wave{
    width: 90%;
    height: 90%;
    background-color: royalblue;
    border-radius: 50%;
    border: 1px solid lightgray;
    position: relative;
    overflow: hidden; 
    box-shadow: inset 0 0 50px rgba(0,0,0,0.5);
}
.wave::before{
    content: "";
    display: block;
    width: 200%;
    height: 200%;
    background-color: white;
    position: absolute;
    top: -150%;
    left: -50%;
    border-radius: 40%;
    animation: abc 8s linear infinite;
}
.wave::after{
    content: "";
    display: block;
    width: 200%;
    height: 200%;
    background-color: white;
    position: absolute;
    top: -150%;
    left: -50%;
    border-radius: 30%;
    opacity: 0.5;
    animation: abc 8s linear infinite;
}
@keyframes abc{
    from{transform: rotateZ(0deg);}
    to{transform: rotateZ(360deg);}
}
posted @ 2022-12-24 18:26  不尽人意的K  阅读(20)  评论(0)  编辑  收藏  举报