CSS模拟电池充电效果的实现

最新推荐文章于 2024-07-03 11:44:47 发布

静水流深之鑫

最新推荐文章于 2024-07-03 11:44:47 发布

阅读量3.7k

点赞数 19

分类专栏： Web前端

本文链接：https://blog.csdn.net/qq_26941173/article/details/103680638

版权

本文介绍了如何使用CSS模拟电池充电效果，包括基本的充电动画和更复杂的水波滚动效果。通过伪元素创建电池轮廓，利用色块位移实现动画，以及通过圆形叠加和旋转创造出逼真的水波充电视觉体验。

摘要由CSDN通过智能技术生成

模拟简单的电池充电效果

先画出电池的轮廓

<html>
<head>
    <style>
        html,body {
      
            width: 100%;
            height: 100%;
            display: flex;
            background-color: #e4e4e4;
            overflow: hidden;
        }
        .container {
      
            position: relative;
            width: 140px;
            margin: auto;
        }
        .battery {
      
            height: 220px;
            box-sizing: border-box;
            border-radius: 15px 15px 5px 5px;
            filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.22));
            background: #fff;
            z-index: 1;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="battery"></div>
    </div>
</body>
</html>

电池的轮廓如下：

在这里插入图片描述

此时需要给电池加上一个冒，使用伪元素实现：

 .battery::before {
   
     content: '';
     /*清除浮动*/
     position: absolute;
     width: 26px;
     height: 10px;
     top: 0;
     left: 50%;
     transform: translate(-50%, -10px);
     border-radius: 5px 5px 0 0;
     background: rgba(240, 240, 240, .88);
}

效果如下：

在这里插入图片描述

下面模拟充电的效果：通过色块的位移动画实现充电的动画。

.battery::after {
   
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            top: 90%;
            background: linear-gradient(to bottom, #7abcff 0%, #00BCD4 44%, #2196F3 100%);
            border-radius