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

最新推荐文章于 2023-03-15 21:29:05 发布
最新推荐文章于 2023-03-15 21:29:05 发布
阅读量546 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39670012/article/details/108796047
版权

模拟简单的电池充电效果
先画出电池的轮廓

<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: 0px 0px 5px 5px;
            box-shadow: 0 14px 28px rgba(33, 150, 243, 0), 0 10px 10px rgba(9, 188, 215, 0.08);
            filter: hue-rotate(90deg);
            /*使用 filter: hue-rotate() 对渐变色彩进行色彩过渡变换动画*/
            animation: charging 6s linear infinite;
        }

        @keyframes charging {
            50% {
                box-shadow: 0 14px 28px rgba(0, 150, 136, 0.83), 0px 4px 10px rgba(9, 188, 215, 0.4);
            }

            95% {
                top: 5%;
                filter: hue-rotate(0deg);
                border-radius: 0 0 5px 5px;
                box-shadow: 0 14px 28px rgba(4, 188, 213, .2), 0 10px 10px rgba(9, 188, 215, 0.08);
            }

            100% {
                top: 0%;
                filter: hue-rotate(0deg);
                border-radius: 15px 15px 5px 5px;
                box-shadow: 0 14px 28px rgba(4, 188, 213, 0), 0 10px 10px rgba(9, 188, 215, 0.4);
            }
        }

第一种简单的效果已经实现了，这种效果可以继续进行优化。

2.水波效果的充电效果
css 实现这种波浪滚动效果，其实只是用了一种障眼法，用圆形进行模拟.

先实现圆形得效果：

<html>
<head>
    <style>
        html,body {
            width: 100%;
            height: 100%;
            display: flex;
            background: #e4e4e4;
        }
        .container {
            position: relative;
            width: 140px;
            margin: auto;
        }
        .wave-box {
            position: absolute;
            top: 0;
            left: 0;
            height: 220px;
            width: 140px;
            border-radius: 15px 15px 5px 5px;
        }
        .g-wave {
            position: absolute;
            width: 300px;
            height: 300px;
            background: rgba(255, 255, 255, .8);
            border-radius: 45% 47% 44% 42%; /*不可以是纯圆形*/
            bottom: 25px;
            left: 50%;
            transform: translate(-50%, 0);
            z-index: 1;
            /*animation: move 10s linear infinite;*/
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="wave-box">
            <div class="g-wave"></div>
            <!-- <div class="g-wave"></div>
            <div class="g-wave"></div> -->
        </div>
    </div>
</body>
</html>

在加两个圆，进行效果得叠加：

 .g-wave:nth-child(2) {
     border-radius: 38% 46% 43% 47%;
     transform: translate(-50%, 0) rotate(-135deg);
}

.g-wave:nth-child(3) {
    border-radius: 42% 46% 37% 40%;
    transform: translate(-50%, 0) rotate(135deg);
}

之后让第一个圆转起来：

 @keyframes move {
     100% {
         transform: translate(-50%, -160px) rotate(720deg);
     }
}

之后把圆形可电池效果进行合并：

<html>
<head>
    <title></title>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            display: flex;
            background: #e4e4e4;
        }

        .container {
            position: relative;
            width: 140px;
            margin: auto;
        }

        .header {
            position: absolute;
            width: 26px;
            height: 10px;
            left: 50%;
            top: 0;
            transform: translate(-50%, -10px);
            border-radius: 5px 5px 0 0;
            background: rgba(255, 255, 255, .88);
        }

        .battery {
            position: relative;
            height: 220px;
            box-sizing: border-box;
            border-radius: 15px 15px 5px 5px;
            box-shadow: 0 0 5px 2px rgba(255, 255, 255, 0.22);
            background: #fff;
            z-index: 1;
        }

        .battery::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            top: 80%;
            background: linear-gradient(to bottom, #7abcff 0%, #00BCD4 44%, #2196F3 100%);
            border-radius: 0px 0px 5px 5px;
            box-shadow: 0 14px 28px rgba(33, 150, 243, 0), 0 10px 10px rgba(9, 188, 215, 0.08);
            animation: charging 10s linear infinite;
            filter: hue-rotate(90deg);
        }

        .wave-box {
            position: absolute;
            top: 0;
            left: 0;
            height: 220px;
            width: 140px;
            border-radius: 15px 15px 5px 5px;
            overflow: hidden; /*隐藏掉多余得圆形部分*/
        }

        .g-wave {
            position: absolute;
            width: 300px;
            height: 300px;
            background: rgba(255, 255, 255, .8);
            border-radius: 45% 47% 44% 42%;
            bottom: 25px;
            left: 50%;
            transform: translate(-50%, 0);
            z-index: 1;
            animation: move 10s linear infinite;
        }

        .g-wave:nth-child(2) {
            border-radius: 38% 46% 43% 47%;
            transform: translate(-50%, 0) rotate(-135deg);
        }

        .g-wave:nth-child(3) {
            border-radius: 42% 46% 37% 40%;
            transform: translate(-50%, 0) rotate(135deg);
        }

        @keyframes charging {
            50% {
                box-shadow: 0 14px 28px rgba(0, 150, 136, 0.83), 0px 4px 10px rgba(9, 188, 215, 0.4);
            }

            95% {
                top: 5%;
                filter: hue-rotate(0deg);
                border-radius: 0 0 5px 5px;
                box-shadow: 0 14px 28px rgba(4, 188, 213, .2), 0 10px 10px rgba(9, 188, 215, 0.08);
            }

            100% {
                top: 0%;
                filter: hue-rotate(0deg);
                border-radius: 15px 15px 5px 5px;
                box-shadow: 0 14px 28px rgba(4, 188, 213, 0), 0 10px 10px rgba(9, 188, 215, 0.4);
            }
        }

        @keyframes move {
            100% {
                transform: translate(-50%, -160px) rotate(720deg);
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header"></div>
        <div class="battery"></div>
        <div class="wave-box">
            <div class="g-wave"></div>
            <div class="g-wave"></div>
            <div class="g-wave"></div>
        </div>
    </div>
</body>
</html>

完结撒花

qq_39670012
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
battery:内置HTML，CSS和JS的电池充电动画
03-16
电池 内置HTML，CSS和JS的电池充电动画。
CSS3动画 -- 充电效果
南乡人的博客
12-26 1198
1.0 基础实现版 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-...
uniapp 小程序 地图＜map＞ 渲染标注点 且自定义气泡内容(slot写到页面中/样式自定义)
weixin_44805839的博客
12-06 3983
uniapp map 自定义标注气泡
css实现炫酷充电动画
分享互联网的有趣知识~
03-15 4177
一直以来，css实现水流动画是非常困难的，这里通过一些css技巧来实现水流的动画效果，通过电池充电来体现该效果的真实感。
css 动画电池充电
BYH的博客
01-13 572
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
纯CSS 实现酷炫的充电动画
01-19
循序渐进，看看只使用 CSS ，可以鼓捣出什么样的充电动画效果。 画个电池 当然，电池充电，首先得用 CSS 画一个电池，这个不难，随便整一个： 欧了，勉强就是它了。有了电池，那接下来直接充电吧。最最简单的动画，那应该是用色彩把整个电池灌满即可。 方法很多，代码也很简单，直接看效果： 有内味了，如果要求不高，这个勉强也就能够交差了。通过蓝色渐变表示电量，通过色块的位移动画实现充电的动画。但是总感觉少了点什么。 增加阴影及颜色的变化 如果要继续优化的话，需要添加点细节。 我们知道，低电量时，电量通常表示为红色，高电量时表示为绿色。再给整个色块添加点阴影的变化，呼吸的感觉，让充电的效果看起来确
CSS 实现充电动画
W Y L
01-21 550
html代码： <div class="container"> <div class="battery"></div> </div> css代码： <style> html, body { width: 100%; height: 100%;...
CSS动画：移动端充电效果
weixin_45670873的博客
03-02 345
CSS动画：移动端充电效果
css电池充电视频,CSS电池充电动画
weixin_42469012的博客
08-04 190
* {margin:0px;padding:0px;}.box {width:800px;height:800px;margin:50px auto;background:black;position:relative;padding-top:20px;}.battery {width:200px;height:320px;background:floralwhite;margin:50px au...
css的animation实现充电式loading加载动画
苏苏就是小苏苏的博客
12-12 394
1.实现效果 2.实现原理 div+伪元素实现外边框样式 渐变+伪元素实现内部波浪 动画，实现在一定时间内，内部波浪高度的0到100% 3.实现代码 <div class="box"> <div class="charge"> <div class="wave"></div> </div> </div> .box { margin: 20px auto; width: 685px; height: 250px; ba
CSS 滤镜实现安卓充电动画效果
05-28
这个是安卓手机在充电的时候的效果,经过一番尝试，发现使用 CSS 也是可以很好的。模拟这种动画效果： 单独将两个滤镜拿出来，它们的作用分别是： filter: blur()： 给图像设置高斯模糊效果。 filter: contrast()： 调整图像的对比度。
HTML5/CSS3 Loading动画 水位充满文字特效
08-23
这款HTML5动画既是Loading特效也是文字特效，Loading动画开始时，文字中的水位渐渐上升，为了模拟水位上升的真实效果，水面还会波浪浮动，当Loading动画结束时，文字中的水位又会渐渐退去，动画效果和上升类似，这样周而复始，从而达到很酷HTML5 Loading动画效果。
手机充电电池CSS3特效
04-25
手机充电电池CSS3特效是一款css3基于keyframe，border-radius属性绘制的手机电池充电特效。
css实现行间距效果
10-30
css实现行间距效果
用CSS实现基本条状图表效果
10-30
用CSS实现基本条状图表效果
CSS实现模拟position的fixed页面定位效果
09-25
主要为大家介绍了CSS实现模拟position的fixed页面定位效果的方法,可通过absolute绝对定位来实现fixed的固定位置效果,非常具有实用价值,需要的朋友可以参考下
浅谈电动自行车智能充电管理系统的设计及应用
Acrellee的博客
03-23 3139
李婧婧 安科瑞电气股份有限公司 13651946738 摘要：为了解决电动自行车由于私拉电线、充电线路老化、充电设施无保护等引发的火灾事故频发问题，研发了电动自行车智能充电管理系统。针对该系统中所采用的功率监测、负载检测技术和负载均衡等进行深入研究。系统依靠功率监测和负载检测技术实现了对充电功率的检测和系统各个环节的闭环自检，根据采集到的有功功率对电池充电模式进行匹配，通过电池状态多参量实时在线监测，能够在电池充满或负载不在线的情况下实现0.5s内自动起停并发出报警信号。系统实现对电动自行车充电的智能安
巧用 CSS 实现酷炫的充电动画
终极冥帝
12-23 605
循序渐进，看看只使用 CSS ，可以鼓捣出什么样的充电动画效果。 画个电池小说网站 wap.youxs.org 当然，电池充电，首先得用 CSS 画一个电池，这个不难，随便整一个： 欧了，勉强就是它了。有了电池，那接下来直接充电吧。最最简单的动画，那应该是用色彩把整个电池灌满即可。 方法很多，代码也很简单，直接看效果： 有内味了，如果要求不高，这个勉强也就能够交差了。通过蓝色渐变...
Svg 画图(电池)
weixin_34146805的博客
04-10 418
公司现在在做充电桩项目，其中要显示充电桩的电池充电情况，功能展示的时候要画图，之前做的时候准备使用HightChar来画，但是，hightchar好像没有这样的电池图形，最后，项目经理要我自己通过svg画，所以到网上找了一些网址学习svg,其中就有：点击这里，下面我就粘贴下代码和显示图片效果，希望能够帮助到一些朋友。 这里显示的是js文件： $(function () { var i...
css3实现烟花效果
最新发布
01-20
要实现烟花效果，我们可以使用CSS3动画和一些特殊效果来实现。首先，我们可以创建一个HTML文档，并在文档中添加一个div元素来表示烟花的爆炸效果。然后，我们可以使用CSS3动画来使烟花的花瓣散开，以模拟烟花爆炸的效果。 在CSS中，我们可以使用关键帧动画来控制烟花的爆炸效果。例如，我们可以定义一个关键帧动画，使烟花的花瓣从中心点向外散开，并在动画中添加一些旋转和透明度变化，以使烟花看起来更加生动。 此外，我们还可以使用CSS3的渐变效果来为烟花花瓣添加颜色，以使烟花看起来更加绚丽多彩。我们也可以使用CSS3的边框特效来为烟花的花瓣添加轮廓，使其更加立体，更加逼真。 总之，通过结合CSS3的动画、渐变和特效，我们可以实现一个逼真的烟花效果，给用户带来视觉上的享受。这种方法可以在网页制作、活动页面等多个领域中得到应用，为用户带来更加丰富多彩的体验。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值