CSS 波浪百分比，在线预览HTML/Vue

license

TA的作品

1粉丝0获赞

当前作品：

CSS 波浪百分比

关键点： 1. 利用 border-radius 生成椭圆 2. 并不是利用旋转的椭圆本身生成波浪效果，而是利用它去切割背景，产生波浪的效果。参考文章：https://csscoco.com/inspiration/#/./border/border-wave-percent

TA的更多作品：

查看作者更多作品

HTML

格式化

支持Emmet，输入 p 后按 Tab键试试吧！

<head> ...

展开

</head>

<body>

<div class="container">
    <div class="wave"></div>
    <span class="number">45%</span>
</div>

</body>

SCSS

格式化

.container {
    position: absolute;
    width: 200px;
    height: 200px;
    padding: 5px;
    border: 5px solid rgb(118, 218, 255);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    overflow: hidden;
}
.wave {
    position: relative;
    width: 200px;
    height: 200px;
    background-color: rgb(118, 218, 255);
    border-radius: 50%;
 
    &::before,
    &::after{
        content: "";
        position: absolute;
        width: 400px;
        height: 400px;
        top: 0;
        left: 50%;
        background-color: rgba(255, 255, 255, .4);
        border-radius: 45%;
        transform: translate(-50%, -70%) rotate(0);
        animation: rotate 6s linear infinite;
        z-index: 1;
    }
    
    &::after {
        border-radius: 47%;
        background-color: rgba(255, 255, 255, .9);
        transform: translate(-50%, -70%) rotate(0);
        animation: rotate 10s linear -5s infinite;
        z-index: 2;
    }
}

.number {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 0;
    transform: translate(-50%, -50%);
    font-size: 36px;
    color: #000;
    z-index: 10;
}

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

格式化

预览

控制台