前端实现进度球水波荡漾效果

最新推荐文章于 2024-05-21 23:21:19 发布

VIP文章 aghh

最新推荐文章于 2024-05-21 23:21:19 发布

阅读量743

点赞数 1

分类专栏：前端效果文章标签：前端 html css

本文链接：https://blog.csdn.net/u011964241/article/details/128017944

版权

纯前端实现以下效果：

页面结构如下：

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

<head>

    <meta charset="UTF-8">
 
</head>

<body>
    <div class="wrapper">
        <div class="green">
            <div class="progress">
                <div class="inner">
                    <div class="percent"><span>25</span>%</div>
                    <div class="water"></div>
                    <div class="glare"></div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

Css如下：