css波浪百分比

最新推荐文章于 2024-06-04 14:56:07 发布

W Y L

最新推荐文章于 2024-06-04 14:56:07 发布

阅读量415

点赞数

分类专栏：网页特效

本文链接：https://blog.csdn.net/weixin_45959525/article/details/104299094

版权

网页特效专栏收录该内容

51 篇文章 0 订阅

订阅专栏

HTML代码：

<div class="container">
    <div class="wave"></div>
</div>

CSS代码：

<style>
        .container {
            position: absolute;
            width: 200px;
            height: 200px;
            padding: 5px;
            border: 5px solid rgb(0, 102, 204);
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border-radius: 50%;
            overflow: hidden;
        }
        .wave {
            position: relative;
            width: 200px;
            height: 200px;
            background-color: rgb(51, 102, 204);
            border-radius: 50%;
        }
        .wave:before,
        .wave:after {
             content: "";
             position: absolute;
             width: 400px;
             height: 400px;
             top: 0;
             left: 50%;
             background-color: rgba(255, 255, 255, 0.4);
             border-radius: 45%;
             transform: translate(-50%, -70%) rotate(0);
             animation: rotate 6s linear infinite;
             z-index: 10;
         }

        .wave:after {
             border-radius: 47%;
             background-color: rgba(255, 255, 255, 0.9);
             transform: translate(-50%, -70%) rotate(0);
             animation: rotate 10s linear -5s infinite;
             z-index: 20;
        }


        @keyframes rotate {
            50% {
                transform: translate(-50%, -73%) rotate(180deg);
            }
            100% {
                transform: translate(-50%, -70%) rotate(360deg);
            }
        }
    </style>