前端知识笔记（三十一）———css实现水波纹效果（水球图）

最新推荐文章于 2024-08-23 16:40:40 发布

瑞崽崽崽

最新推荐文章于 2024-08-23 16:40:40 发布

阅读量1.2k

点赞数 8

文章标签：前端笔记 css

本文链接：https://blog.csdn.net/lrx276/article/details/134777778

版权

css实现水球图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wave-box {
            position: relative;
            width: 180px;
            height: 180px;
            border-radius: 50%;
            border: 3px solid rgb(246, 247, 248);
            box-shadow: 0 0 0 3px rgb(41, 134, 196);
        }

        .wave {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgb(23, 106, 201);
            border-radius: 50%;
            overflow: hidden;
        }
        .wave::before,
        .wave::after {
            content: '';
            position: absolute;
            top: 0;
            left: 50%;