css3电池效果

最新推荐文章于 2025-08-21 11:39:57 发布

原创

最新推荐文章于 2025-08-21 11:39:57 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css3

css3电池效果，页面加载，从左到右增长到传入的值。
效果：
在这里插入图片描述

分析：
黑色的小间隔是自己画的，保证页面伸缩的时候样式不会异样，间隔是循环定位上去的，让间隔的层级最高，然后彩色的小块是循环产生的，宽度固定，撑满整个盒子，一共10个，然后，右边有一个灰色盒子，用100%-要显示的值，就是他的长度，把他定位到右边，最初给他100%，然后在生命周期中500毫秒让他缩到（100%-要显示的值）这个宽度，就可以看到动画增长的效果了；这里直接transition过度也可以实现效果了

代码：

<template>
  <div class="progressWrap">
    <div class="progressLine">
      <ul class="lineUl">
        <!-- 画间隔 -->
        <div v-for="(item,index) in lengthes" :key="index" class="cross" :style="{left:index*24+'px'}">
          <!-- <img src="/static/img/image/间隔.png" alt=""> -->
          <div class="crosses"></div>
        </div>
        <li class="lightPart" v-for="ite in colorList" :key="ite.id" :style="{background:ite.color}"></li>
        <!-- <li class="lightPart" :style="{width:value+'%'}"></li<