微信小程序–电池容量、电池剩余电量样式

微信小程序–电池容量、电池剩余电量样式效果如图所示:竖列的我用的旋转横列90度实现的wxml:<viewclass=”complex”><viewdata-charge=’0’class=”battery”></view><viewdata-charge=’1’class=”battery”></view><viewdata-charge=’2’class=”battery”></view&gt…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

效果如图所示:竖列的我用的旋转横列90度实现的

微信小程序--电池容量、电池剩余电量样式

wxml:

<view class=”complex”>

      <view data-charge=’0′ class=”battery”></view>

      <view data-charge=’1′ class=”battery”></view>

      <view data-charge=’2′ class=”battery”></view>

      <view data-charge=’3′ class=”battery”></view>

      <view data-charge=’4′ class=”battery”></view>

      <view data-charge=’5′ class=”battery”></view>

      <view data-charge=’6′ class=”battery”></view>

      <view data-charge=’7′ class=”battery”></view>

      <view data-charge=’8′ class=”battery”></view>

      <view data-charge=’9′ class=”battery”></view>

      <view data-charge=’10’ class=”battery”></view>

</view>

 

<view class=”complex”>

      <view data-charge=’0′ class=”battery1″></view>

      <view data-charge=’1′ class=”battery1″></view>

      <view data-charge=’2′ class=”battery1″></view>

      <view data-charge=’3′ class=”battery1″></view>

      <view data-charge=’4′ class=”battery1″></view>

      <view data-charge=’5′ class=”battery1″></view>

      <view data-charge=’6′ class=”battery1″></view>

      <view data-charge=’7′ class=”battery1″></view>

      <view data-charge=’8′ class=”battery1″></view>

      <view data-charge=’9′ class=”battery1″></view>

      <view data-charge=’10’ class=”battery1″></view>

</view>

wxss:

.battery {

  color: #34495e;

  border: 1px solid currentColor;

  display: inline-block;

  width: 50px;

  height: 20px;

  position: relative;

  border-radius: 2px;

  display: border-box;

  margin: 5px;

}

.battery::before,

.battery::after {

  content: “”;

  position: absolute;

}

.battery::before {

  top: 2px;

  bottom: 2px;

  right: -3px;

  width: 1px;

  display: border-box;

  border: 1px solid currentColor;

  border-left: 0;

}

.battery::after {

  top: 0;

  bottom: 0;

  left: 0;

  right: 0;

  margin: 1px;

  border-radius: 1px;

  background-color: currentColor;

  transition: right 500ms;

}

.battery.low {

  color: #c0392b;

}

.battery.low::after {

  right: 80%;

  border-top-right-radius: 0;

  border-bottom-right-radius: 0;

}

.battery.med {

  color: #f39c12;

}

.battery.med::after {

  right: 40%;

  border-top-right-radius: 0;

  border-bottom-right-radius: 0;

}

.battery.full {

  color: #27ae60;

}

.battery[data-charge=’0′],

.battery[data-charge=’1′],

.battery[data-charge=’2′],

.battery[data-charge=’3′] {

  color: #c0392b;

}

.battery[data-charge=’4′],

.battery[data-charge=’5′],

.battery[data-charge=’6′] {

  color: #f39c12;

}

.battery[data-charge=’7′],

.battery[data-charge=’8′],

.battery[data-charge=’9′],

.battery[data-charge=’10’] {

  color: #27ae60;

}

.battery[data-charge=’0′]::after {

  right: 100%;

}

.battery[data-charge=’1′]::after {

  right: 85%;

}

.battery[data-charge=’2′]::after {

  right: 80%;

}

.battery[data-charge=’3′]::after {

  right: 70%;

}

.battery[data-charge=’4′]::after {

  right: 60%;

}

.battery[data-charge=’5′]::after {

  right: 50%;

}

.battery[data-charge=’6′]::after {

  right: 40%;

}

.battery[data-charge=’7′]::after {

  right: 30%;

}

.battery[data-charge=’8′]::after {

  right: 20%;

}

.battery[data-charge=’9′]::after {

  right: 10%;

}

.battery[data-charge=’10’]::after {

  right: 0%;

}

 

/*纵向*/

.battery1 {

  color: #34495e;

  border: 1px solid currentColor;

  display: inline-block;

  width: 50px;

  height: 20px;

  position: relative;

  border-radius: 2px;

  display: border-box;

  margin: 30px;

  transform: rotate(-90deg);

/*   transition: color 500ms; */

}

.battery1::before,

.battery1::after {

  content: “”;

  position: absolute;

}

.battery1::before {

  top: 2px;

  bottom: 2px;

  right: -3px;

  width: 1px;

  display: border-box;

  border: 1px solid currentColor;

  border-left: 0;

}

.battery1::after {

  top: 0;

  bottom: 0;

  left: 0;

  right: 0;

  margin: 1px;

  border-radius: 1px;

  background-color: currentColor;

  transition: right 500ms;

}

.battery1.low {

  color: #c0392b;

}

.battery1.low::after {

  right: 80%;

  border-top-right-radius: 0;

  border-bottom-right-radius: 0;

}

.battery1.med {

  color: #f39c12;

}

.battery1.med::after {

  right: 40%;

  border-top-right-radius: 0;

  border-bottom-right-radius: 0;

}

.battery1.full {

  color: #27ae60;

}

.battery1[data-charge=’0′],

.battery1[data-charge=’1′],

.battery1[data-charge=’2′],

.battery1[data-charge=’3′] {

  color: #c0392b;

}

.battery1[data-charge=’4′],

.battery1[data-charge=’5′],

.battery1[data-charge=’6′] {

  color: #f39c12;

}

.battery1[data-charge=’7′],

.battery1[data-charge=’8′],

.battery1[data-charge=’9′],

.battery1[data-charge=’10’] {

  color: #27ae60;

}

.battery1[data-charge=’0′]::after {

  right: 100%;

}

.battery1[data-charge=’1′]::after {

  right: 85%;

}

.battery1[data-charge=’2′]::after {

  right: 80%;

}

.battery1[data-charge=’3′]::after {

  right: 70%;

}

.battery1[data-charge=’4′]::after {

  right: 60%;

}

.battery1[data-charge=’5′]::after {

  right: 50%;

}

.battery1[data-charge=’6′]::after {

  right: 40%;

}

.battery1[data-charge=’7′]::after {

  right: 30%;

}

.battery1[data-charge=’8′]::after {

  right: 20%;

}

.battery1[data-charge=’9′]::after {

  right: 10%;

}

.battery1[data-charge=’10’]::after {

  right: 0%;

}

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/171046.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • Asp.net WebForm使用NPOI导出Excel

    Asp.net WebForm使用NPOI导出Excel废话不多说,直接上代码publicvoidExportExcel(){stringdatefrom=Request.QueryString[“datefrom”];stringdateto=Request.QueryString[“dateto”];string…

  • dos命令进入文件夹[通俗易懂]

    输入D:回车,进入D盘的根目录,然后输入dir回车可以查看根目录下的文件和文件夹,输入cd空格文件夹的名字(不区分大小写)进入文件夹根目录下,依次输入dir查看该目录下的文件和文件夹。   附录:MSDOS命令大全一、基础命令1dir无参数:查看当前所在目录的文件和文件夹。/s:查看当前目录已经其所有子目录的文件和文件夹。

  • 《好想好想谈恋爱》插曲整理[通俗易懂]

    《好想好想谈恋爱》插曲整理[通俗易懂]《好想好想谈恋爱》插曲整理转自:http://mingmeiyoushang.bokee.com/2560391.html推荐:完美的一天PERFECTDAYLOUREED《完美生活》许

  • Linux 镜像文件ISO下载

    Linux 镜像文件ISO下载Linux镜像文件ISO下载地址:https://archive.kernel.org/centos-vault/6.1/isos/x86_64/

  • getopt函数[通俗易懂]

    getopt函数[通俗易懂]getopt函数函数说明getopt–解析命令的可选项getopt只是一个简单的解析命令可选项的函数,只能进行简单的格式命令解析,格式如下:对短选项的解析:cmd[-a][-b]对短选项及短选项的参数解析:cmd[-aa_argument][-bb_argument]选项a的参数也是可选的情况解析:cmd[-a[a_argument]]函数原型#include&…

  • iPAD越狱后下载激活成功教程版的pad软件方法总录[通俗易懂]

    iPAD越狱后下载激活成功教程版的pad软件方法总录[通俗易懂]声明:本文所说的安装软件方法都不是原创,都是前人的经验,只不过为了方便大家,做一个整理。一、事前的准备工作1、还是先说越狱,网上越狱的方法不止一种,建议按照下文操作办法(在ipad上操作)简单说就两步(1)用safari登陆www.jailbreakme.co

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号