Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.
Interesting front-end CSS effects – phone battery capacity
As a programmer, I usually see the battery chart of the phone is cut by the artist directly. I used to think that this thing is only a picture. Until I learned the advanced use of CSS background-image properties. Hahaha, look at the picture below
This is the power effect of an Android phone with pure CSS, isn’t it amazing?
Let’s record the steps to complete it.
1. Define the parent container
In order to make the bright part of the battery more obvious, it is presented in a black background. Define the size of the parent container and center it.
body{
background: black;
position: relative;
}
div{
position: absolute;
left: 50%;
top: 50%;
width: 250px;
height: 120px;
margin-left: -130px;
margin-top: -60px;
}
Copy the code2. Add battery gradient
Here, use the backgroun-image attribute to set the gradient of the background color; Here’s the code.
background-image: // Set the background color 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%),Copy the code
background-image: Rgba (255,255,255,0.5) 0%,rgba(255,255,255,0.4) 4%,rgba(255,255,255,0.2) 14%, 7%, rgba (255255255,0.2) rgba (255255255,0.8) 14%, rgba (255255255,0.2) 40%, rgba (255255255, 0) 80%, 41%, rgba (255255255, 0) rgba (255255255,0.2) 80%, rgba (255255255,0.4) 86%, rgba (255255255,0.6) 92%, 90%, rgba (255255255,0.1) rgba (255255255,0.1) 95%, rgba (255255255,0.5) 98%);Copy the code
Combine the two effects and you get the image below, where the base color and brightness of the battery come out. The renderings are as follows
3. Embellish the corners
There are some corners that need to be modified, such as the four corners of the battery, which should be smooth and small arcs.
border-radius: 10px/30px; Border - left: 2 px solid rgba (255255255,0.2); Border - right: 2 px solid rgba (255255255,0.2);Copy the codeAdd a 2px left and right border to lighten the battery edges.
4. Add a mid-shine
Because the gloss of the middle part of the battery is not enough, pseudo class can be used to simulate the gloss of the battery.
The width and height should be set to the size of the battery
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: // set linear-gradient(to bottom,rgba(255,255,255,0.3) 4%,rgba(255,255,255,0.2) 5%,transparent 5%,transparent 5% 14%, 14%, rgba (255255255,0.3) rgba (255255255,0.12) 40%, rgba (0,0,0,0.05) 42%, rgba (0,0,0,0.05) 48%, transparent Transparent 80%, RGBA (255,255, 0.3) 87%, TRANSPARENT 92%, TRANSPARENT 97%, 97% rgba (255255255,0.4)), 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%, 90% rgba (255255255, 0)); }Copy the codeThe picture below is obtained after the completion of light filling
Also missing is a small battery head
5. Small ring on the battery head
Here is also the use of pseudo class to complete the battery head small ring part.
First set the appropriate size and position it in the right center of the battery.
div:before { width: 12px; height: 55px; right: -14px; top: 32px; background-image: Linear gradient (to bottom, rgba (255255255,0.5) 0%, rgba (255255255, 0) 14%, rgba (255255255,0.8) 40%, 14%, rgba (255255255,0.3) rgba (255255255, 0) 41%, rgba (255255255, 0) 80%, rgba (255255255,0.2) 86%, 80%, rgba (255255255,0.4) rgba (255255255,0.6) 90%, rgba (255255255,0.1) 92%, rgba (255255255,0.1) 95%, 98% rgba (255255255,0.5)); }Copy the codeWhen finished, set the corners into arcs
border-top-right-radius: 6px 10px;
border-bottom-right-radius: 6px 10px;
Copy the codeOh ho, a perfect restore android phone battery CSS code renderings, is born!