小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。
有趣的前端css特效-手机电池容量
作为一个程序员, 通常看到的手机电量图都是由美工直接给的切图,以前一直认为这东西也只能是个图片。直到我学会了css的background-image属性的高级用法。哈哈哈,请看下图
这就是纯css完成的安卓手机的电量效果哦,是不是很神奇。
下面来记录一下它的完成步骤吧!
1.定义父容器
这里为了让电池的光亮部分更加明显,采用黑底的方式呈现。定义一下父容器的大小并居中哦。
body{
background: black;
position: relative;
}
div{
position: absolute;
left: 50%;
top: 50%;
width: 250px;
height: 120px;
margin-left: -130px;
margin-top: -60px;
}
2.添加电池的渐变色
这里运用backgroun-image属性 来设置背景颜色的渐变;代码如下。
background-image:
//从左到右设置底色
linear-gradient(to right,transparent 5%,#316d08 5%,#316d08 7%,#60b939 8%,#60b939 10%,#51aa31 11%,#51aa31 60%,#64ce11 61%,#64ce11 63%,#255405 63%,black 68%,black 95%,transparent 95%),
background-image:
//从上到下设置光亮
linear-gradient(to bottom,rgba(255,255,255,0.5) 0%,rgba(255,255,255,0.4) 4%,rgba(255,255,255,0.2) 7%,rgba(255,255,255,0.2) 14%,rgba(255,255,255,0.8) 14%,rgba(255,255,255,0.2) 40%,rgba(255,255,255,0) 41%,rgba(255,255,255,0) 80%,rgba(255,255,255,0.2) 80%,rgba(255,255,255,0.4) 86%,rgba(255,255,255,0.6) 90%,rgba(255,255,255,0.1) 92%,rgba(255,255,255,0.1) 95%,rgba(255,255,255,0.5) 98%);
将两个效果合并,就得到了下图,此时电池的底色和光亮效果就出来了。效果图如下
3.修饰边角
这里有一些需要修饰的边角,例如电池的四角边缘,应是光滑的小弧形。
border-radius: 10px/30px;
border-left: 2px solid rgba(255,255,255,0.2);
border-right: 2px solid rgba(255,255,255,0.2);
添加2px的左右边框,将电池边缘提亮。
4.添加点出中部光泽
由于电池中部电量部分光泽度不够,这里可以使用伪类将模拟电池的光泽度。
宽高要设置成电池的大小
div:before, div:after {
display: block;
content: '';
position: absolute;
}
div:after {
width: 220px;
height: 120px;
left: 10px;
border-radius: 5px/30px;
border-left: 4px solid black;
border-right: 4px solid black;
background-image:
//从上到下设置渐变光
linear-gradient(to bottom,rgba(255,255,255,0.3) 4%,rgba(255,255,255,0.2) 5%,transparent 5%,transparent 14%,rgba(255,255,255,0.3) 14%,rgba(255,255,255,0.12) 40%,rgba(0,0,0,0.05) 42%,rgba(0,0,0,0.05) 48%,transparent 60%,transparent 80%,rgba(255,255,255,0.3) 87%,rgba(255,255,255,0.3) 92%,transparent 92%,transparent 97%,rgba(255,255,255,0.4) 97%),
//从右到左侧补光
linear-gradient(to left,rgba(255,255,255,0.2) 0%,rgba(255,255,255,0.2) 2%,black 2%,black 6%,transparent 6%),
//从上到下补光
linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 35%,rgba(255,255,255,0.3) 90%,rgba(255,255,255,0) 90%);
}
补光结束后得到下图
还缺少一个小的电池头部
5.电池头部小环
这里同样是使用伪类来完成电池头部小环的部分。
首先设置合适的大小,并将位置定位在电池右侧中央。
div:before {
width: 12px;
height: 55px;
right: -14px;
top: 32px;
background-image: linear-gradient(to bottom,rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 14%,rgba(255,255,255,0.8) 14%,rgba(255,255,255,0.3) 40%,rgba(255,255,255,0) 41%,rgba(255,255,255,0) 80%,rgba(255,255,255,0.2) 80%,rgba(255,255,255,0.4) 86%,rgba(255,255,255,0.6) 90%,rgba(255,255,255,0.1) 92%,rgba(255,255,255,0.1) 95%,rgba(255,255,255,0.5) 98%);
}
完成后将边角设置成弧形
border-top-right-radius: 6px 10px;
border-bottom-right-radius: 6px 10px;
哦吼,一个完美还原安卓手机电池电量的css代码效果图,就诞生啦!