CSS实现手机信号条

HainesFreeman

已于 2022-09-19 16:46:53 修改

阅读量909

点赞数 1

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

于 2022-09-19 16:27:40 首次发布

本文链接：https://blog.csdn.net/weixin_41829196/article/details/126936586

版权

css 专栏收录该内容

28 篇文章 2 订阅

订阅专栏

如图想实现下图效果：

纯原生 html + css 实现方式：

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        list-style: none;
      }
      .box {
        width: 300px;
        height: 300px;
        margin: 200px auto;
      }
      ul {
        position: relative;
        width: 200px;
        height: 200px;
      }
      li {
        width: 5px;
        position: absolute;
        bottom: 0;
        border-radius: 10px;
        background: rgba(0, 0, 0, 0.5);
      }
      ul li:nth-child(1) {
        height: 10px;
        left: 0px;
      }
      ul li:nth-child(2) {
        height: 15px;
        left: 10px;
      }
      ul li:nth-child(3) {
        height: 20px;
        left: 20px;
      }
      ul li:nth-child(4) {
        height: 25px;
        left: 30px;
      }
      ul li:nth-child(5) {
        height: 30px;
        left: 40px;
      }
      ul li:nth-child(6) {
        height: 35px;
        left: 50px;
      }
    </style>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  </head>
  <body>
    <div class="box">
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
    <script type="text/javascript">
      setInterval(function () {
        var n = Math.random() * 100;
        console.log(n);
        $("li").css("background-color", "rgba(0,0,0,.5)");
        if (n < 16) {
          $("ul li:lt(1)").css("background", "limegreen");
        } else if (16 < n && n < 32) {
          $("ul li:lt(2)").css("background", "limegreen");
        } else if (32 < n && n < 48) {
          $("ul li:lt(3)").css("background", "limegreen");
        } else if (48 < n && n < 64) {
          $("ul li:lt(4)").css("background", "limegreen");
        } else if (64 < n && n < 80) {
          $("ul li:lt(5)").css("background", "limegreen");
        } else {
          $("ul li").css("background", "limegreen");
        }
      }, 1000);
    </script>
  </body>
</html>

vue实现方式：

<template>
  <div
    class="signal-wrapper"
    :style="{ transform: 'scale(' + scaleX + ',' + scaleY + ')' }"
  >
    <ul>
      <li
        v-for="i in 6"
        :key="i"
        :style="{
          background:
            '' + (i <= strength ? '#5cf548' : 'rgba(0, 0, 0, 0.4)') + ''
        }"
      ></li>
    </ul>
  </div>
</template>

<script>
export default {
  name: `demo`,
  props: {
    // 尺寸
    width: {
      type: Number,
      default: 60
    },
    height: {
      type: Number,
      default: 40
    },
    // 信号强度，默认满格信号
    strength: {
      type: Number,
      default: 6,
      validator: function (value) {
        // 必须为不大于6的整数
        if (value > 6 || value < 0) {
          console.error(`ERROR in 'SignalStrength.vue':you must provide a number <=6 and >=0!`)
          return false
        } else {
          return true
        }
      }
    }
  },
  computed: {
    scaleX () {
      return this.width / 60
    },
    scaleY () {
      return this.height / 40
    }
  }
}
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
.signal-wrapper {
  width: 60px;
  height: 40px;
}
ul {
  position: relative;
  width: 100%;
  height: 100%;
}
li {
  width: 5px;
  position: absolute;
  bottom: 0;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.5);
}
ul li:nth-child(1) {
  height: 10px;
  left: 0px;
}
ul li:nth-child(2) {
  height: 15px;
  left: 10px;
}
ul li:nth-child(3) {
  height: 20px;
  left: 20px;
}
ul li:nth-child(4) {
  height: 25px;
  left: 30px;
}
ul li:nth-child(5) {
  height: 30px;
  left: 40px;
}
ul li:nth-child(6) {
  height: 35px;
  left: 50px;
}
</style>