【模拟车辆充电过程动画】

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

大东！

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

阅读量475

点赞数

文章标签：动画 css3 css

本文链接：https://blog.youkuaiyun.com/weixin_45469213/article/details/121984627

版权

该博客展示了如何使用CSS创建一个车辆充电的动态进度效果。通过设置背景图和动画关键帧，实现背景充电动画，同时更新充电百分比和已充电量信息。示例代码中包含HTML结构和CSS样式，以及JavaScript部分用于在3秒后更新充电状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

背景图需要是透明的才能有效果，其实就是利用的css，给一个盒子设置颜色，然后让它的宽度逐渐放大的效果


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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>车辆充电demo</title>
    <style>
        /* 背景充电动画效果  */
        .charging-vehicle-wrap {
            height: 127px;
            margin-left: 10px;
            width: 271px;
            display: inline-block;
            vertical-align: top;
        }

        .charging-vehicle-wrap .charging-vehicle {
            width: 100%;
            height: 104px;
            position: relative;
            margin-top: 8px;
        }

        .charging-vehicle-image {
            position: absolute;
            z-index: 2;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            line-height: 87px;
            font-size: 36px;
            text-align: center;
            color: #2274c7;
            /* 车辆充电背景图 */
            background: url("../img/charger.png") no-repeat 50%;
            background-size: cover;
        }

        .charging-progress {
            position: absolute;
            z-index: 1;
            left: 0;
            bottom: 0;
            height: 100%;
        }

        @keyframes animate-shine {
            0% {
                opacity: 0.4;
                width: 0;
            }

            100% {
                opacity: 1;
                width: 100%;
            }
        }

        .charging-progress:after {
            content: '';
            opacity: 0;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background-color: #4aaef8;
            border-radius: 5px;
            animation: animate-shine 2s ease-out infinite;
        }

        /* 背景充电动画效果end  */



        .charging-vehicle-wrap .charging-vehicle-power {
            text-align: center;
            line-height: 34px;
        }

        .charging-vehicle-wrap .charging-vehicle-power .key {
            color: #8d9098;
            margin-top: -5px;
        }

        .charging-vehicle-wrap .charging-vehicle-power {
            text-align: center;
            line-height: 34px;
            font-size: 18px;
            font-weight: bold;
            margin-top: 10px;
        }
    </style>
</head>

<body>
    <div class="charging-vehicle-wrap">
        <div class="charging-vehicle">
            <div class="charging-vehicle-image">50%</div>
            <div class="charging-progress" style="width: 50%;"></div>
        </div>
        <div class="charging-vehicle-power">
            <div style="font-size: 18px; font-weight:  bold; margin-top:  10px;">180 kW•h</div>
            <div class="key">已充电量</div>
        </div>
    </div>
    <script>
        let progress1 = document.getElementsByClassName('charging-progress')[0]
        let progress2 = document.getElementsByClassName('charging-vehicle-image')[0]
        console.log(progress1, progress2)
        setTimeout(function () {
            progress2.innerHTML = '90%'
            progress1.style.width = '90%'
        }, 3000)
    </script>
</body>

</html>