html css 画电池,CSS画的电量提示图形
CSS
语言:
CSSSCSS
确定
*,
*:before,
*:after {
box-sizing: border-box;
}
.wrapper {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: #132133;
background: -webkit-radial-gradient(center circle, #132133 10%, rgba(7, 33, 39, 0.93) 85%);
background: radial-gradient(circle at center, #132133 10%, rgba(7, 33, 39, 0.93) 85%);
}
.outer {
display: table;
height: 100%;
width: 100%;
}
.inner {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.battery {
position: relative;
display: inline-block;
height: 100px;
width: 300px;
padding: 10px;
background: rgba(194, 254, 225, 0.88);
border: 7px solid transparent;
border-radius: 7px;
box-shadow: inset 0 0 22px -5px rgba(194, 254, 225, 0.58), 0 0 22px -5px rgba(194, 254, 225, 0.58);
}
.battery:before {
content: "";
position: absolute;
background-color: #132133;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 5px;
box-shadow: inset 0 0 22px -5px rgba(194, 254, 225, 0.58);
}
.battery:after {
content: "";
position: absolute;
top: calc(50% - 20px);
right: -27px;
height: 40px;
width: 20px;
border-radius: 0 7px 7px 0;
background-color: rgba(194, 254, 225, 0.88);
box-shadow: 0 0 22px -5px rgba(194, 254, 225, 0.68);
}
.power {
background-color: white;
display: block;
position: absolute;
top: 10px;
left: 10px;
bottom: 10px;
right: 10px;
border-radius: 5px;
-webkit-transform: scaleX(0.5);
transform: scaleX(0.5);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
background: rgba(194, 254, 225, 0.88);
-webkit-transition: -webkit-transform 1s cubic-bezier(0, 0, 0.28, 0.95);
transition: -webkit-transform 1s cubic-bezier(0, 0, 0.28, 0.95);
transition: transform 1s cubic-bezier(0, 0, 0.28, 0.95);
transition: transform 1s cubic-bezier(0, 0, 0.28, 0.95), -webkit-transform 1s cubic-bezier(0, 0, 0.28, 0.95);
}
html css 画电池,CSS画的电量提示图形相关推荐
- [css] 不使用border画出1px高的线,在不同浏览器的标准和怪异模式下都能保持效果一样
[css] 不使用border画出1px高的线,在不同浏览器的标准和怪异模式下都能保持效果一样 <div style="width: 100%;height: 1px;"&g ...
- [css] 请使用css画一个圆,方法可以多种
[css] 请使用css画一个圆,方法可以多种 <div class="circle"></div>1.border-radius.cirlce{width ...
- [css] 请使用CSS画一个带锯齿形边框圆圈
[css] 请使用CSS画一个带锯齿形边框圆圈 @import 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论 主目录 与歌谣一起通关前端面试题
- 画线 css,CSS画线方法
用 标签 最基本的: 其中 width 规定线条的长度,还可以是百分比:color 表示颜色,size 表示厚度: align 规定线条位置,有left(左对齐).right(右对齐).center( ...
- html css画五角星,css画梯形,css画五角星, css画六角星 ,css画六边形
css画梯形,css画五角星, css画六角星 ,css画六边形 css画梯形 .triangle { border-bottom: 100px solid #F36823; border-left: ...
- 用css给小程序画个简单写轮眼
用css给小程序画个简单写轮眼 最终的效果 初衷 动画分解 最终的效果 初衷 之前看到过一个h5的迷幻动画,正好今天有时间,把这个也简单画了一下. 动画分解 重复创建几个View,每个View为之前9 ...
- 【CSS】使用css画一个跳动的小心心
使用CSS样式写一个跳动的小心心 具体代码如下: <!DOCTYPE html> <html lang="en"><head><meta ...
- CSS教程简笔画教程,CSS小白教程
关于HTML和CSS的关系,小白有在上一篇HTML教程中讲到过,就不赘述书面表达,用小白的话来讲,HTML像月饼盒子,CSS是月饼的卖相(那些文字图片视频啥的就是馅儿啦).今天的文章详细介绍下月饼有哪 ...
- 画电池内部充电图标和显示百分比
//画电池内部充电图标 //画电池内部充电图标void BatteryForm::drawCharge(QPainter *painter) {painter->save();painter-& ...
最新文章
- SpringMVC、Spring和Struts的区别
- 组合筛选vue_Vue 3 组合式API介绍
- JVM性能调优(转)
- 博客已从百度空间搬家到此
- Python实现石头-剪刀-布小游戏
- iOS发展系列II - UILabel 使用摘要
- CCAI 2017 | 专访德国语言技术领军者 Hans Uszkoreit:深度学习还不足以解决 NLP 核心问题...
- apt-get update出现NO_PUBKEY问题解决
- Codeforces 500D. New Year Santa Network
- UI自动化测试篇 :ReportNG替代TestNG自带html版测试报告初探
- 服务器内存检测维修工具,使用edac工具来检测服务器内存故障.
- python摩尔庄园自动弹琴
- (批处理)批量文件夹重命名,要求是在原文件夹名前加上英文字母前缀aa
- 贴片电解电容47UF16V 6.3*4.5
- 5G还没用上,4G却越来越慢了?
- 哪款蓝牙耳机适合吃鸡?盘点2022适合苹果吃鸡的蓝牙耳机
- iOS直播实用篇(手把手教)
- Python系列01|可视化生成200个优惠券呀~
- 游戏开发适合什么语言?
- MySQL数据库——MySQL INSERT:插入数据(添加数据)