有趣的前端css特效-手机电池容量

2,239 阅读4分钟

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

有趣的前端css特效-手机电池容量

作为一个程序员, 通常看到的手机电量图都是由美工直接给的切图,以前一直认为这东西也只能是个图片。直到我学会了css的background-image属性的高级用法。哈哈哈,请看下图

NSFileHandle_5.png

这就是纯css完成的安卓手机的电量效果哦,是不是很神奇。

下面来记录一下它的完成步骤吧!

1.定义父容器

这里为了让电池的光亮部分更加明显,采用黑底的方式呈现。定义一下父容器的大小并居中哦。


body{

background: black;

position: relative;

}

div{

position: absolute;

left50%;

top50%;

width250px;

height120px;

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%),

NSFileHandle_2.png


background-image: 

            //从上到下设置光亮

            linear-gradient(to bottom,rgba(255,255,255,0.50%,rgba(255,255,255,0.44%,rgba(255,255,255,0.27%,rgba(255,255,255,0.214%,rgba(255,255,255,0.814%,rgba(255,255,255,0.240%,rgba(255,255,255,041%,rgba(255,255,255,080%,rgba(255,255,255,0.280%,rgba(255,255,255,0.486%,rgba(255,255,255,0.690%,rgba(255,255,255,0.192%,rgba(255,255,255,0.195%,rgba(255,255,255,0.598%);

NSFileHandle_1.png

将两个效果合并,就得到了下图,此时电池的底色和光亮效果就出来了。效果图如下

NSFileHandle.png

3.修饰边角

这里有一些需要修饰的边角,例如电池的四角边缘,应是光滑的小弧形。


border-radius10px/30px;

border-left2px solid rgba(255,255,255,0.2);

border-right2px solid rgba(255,255,255,0.2);

添加2px的左右边框,将电池边缘提亮。

NSFileHandle_3.png

4.添加点出中部光泽

由于电池中部电量部分光泽度不够,这里可以使用伪类将模拟电池的光泽度。

宽高要设置成电池的大小


div:beforediv:after {

display: block;

content'';

position: absolute;

}

div:after {

        width220px;

        height120px;

        left10px;

        border-radius5px/30px;

        border-left4px solid black;

        border-right4px solid black;

        background-image: 

//从上到下设置渐变光

            linear-gradient(to bottom,rgba(255,255,255,0.34%,rgba(255,255,255,0.25%,transparent 5%,transparent 14%,rgba(255,255,255,0.314%,rgba(255,255,255,0.1240%,rgba(0,0,0,0.0542%,rgba(0,0,0,0.0548%,transparent 60%,transparent 80%,rgba(255,255,255,0.387%,rgba(255,255,255,0.392%,transparent 92%,transparent 97%,rgba(255,255,255,0.497%),

//从右到左侧补光

            linear-gradient(to left,rgba(255,255,255,0.20%,rgba(255,255,255,0.22%,black 2%,black 6%,transparent 6%),

//从上到下补光

            linear-gradient(to bottom,rgba(255,255,255,00%,rgba(255,255,255,035%,rgba(255,255,255,0.390%,rgba(255,255,255,090%);

}   

补光结束后得到下图

NSFileHandle_4.png

还缺少一个小的电池头部

5.电池头部小环

这里同样是使用伪类来完成电池头部小环的部分。

首先设置合适的大小,并将位置定位在电池右侧中央。


div:before {

        width12px;

        height55px;

        right: -14px;

        top32px;

        background-imagelinear-gradient(to bottom,rgba(255,255,255,0.50%,rgba(255,255,255,014%,rgba(255,255,255,0.814%,rgba(255,255,255,0.340%,rgba(255,255,255,041%,rgba(255,255,255,080%,rgba(255,255,255,0.280%,rgba(255,255,255,0.486%,rgba(255,255,255,0.690%,rgba(255,255,255,0.192%,rgba(255,255,255,0.195%,rgba(255,255,255,0.598%);

    }

完成后将边角设置成弧形


border-top-right-radius6px 10px;

border-bottom-right-radius6px 10px;


哦吼,一个完美还原安卓手机电池电量的css代码效果图,就诞生啦!