Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.
Interesting front-end CSS effects – color-changing ballpoint pen
Due to the last pure CSS development of Apple data line effect code effect is too interesting, caused the interest of many partners, then continue to update a ballpoint pen. Instead of being slightly lost, the ball point pen mouse changes color from purple to orange when suspended.
The effect after implementation is shown in the figure below:
1. First, we will use a DIV as the parent container for this CSS effect.
To make the effect look easier, I centered the parent container div full screen with the appropriate width and height. The following code
div{
position: absolute;
left: 50%;
top: 50%;
width: 350px;
height: 10px;
margin-left: -175px;
margin-top: -5px;
}
Copy the code2. Set the base attributes of the pseudo-class elements after and before.
div:before, div:after {
content: '';
position: absolute;
}
Copy the code3. After setting an appropriate width and height for the pseudo-class after, set the color, size and positioning by setting background-image, background-size and background-postion. The code is as follows:
In the notes, there are more detailed remarks about the corresponding places of the image colors after positioning. Please copy and modify them to the colors you want.
div:after { width: 350px; height: 24px; background-repeat: no-repeat; background-image: Linear-gradient (to right,# c0C0C0,#c0c0c0), // linear gradient(to right,rgba(255,255,255,0.7),rgba(255,255,255,0.7)), Linear gradient(to right,rgba(255,255,255,0.7),rgba(255,255,255,0.7)), // ellipse at 30px 28px,rgba(255,255,255,0) 65%,rgba(255,255,255,0.6) 70%,rgba(255,255,255,0) // ellipse at right center (rgba(255,255,255,0.3) 40%,rgba(255,255,255,0) 40% Linear-gradient (to bottom,# e141BC,#701950), // linear gradient(to bottom,rgba(255,255,255,0) 0,rgba(255,255,255,0.4) 50%,rgba(255,255,255,0) 100%), Linear-gradient (to top,rgba(255,255,255,255,0.1) 20%,rgba(255,255,255,0) 100%), // Linear gradient(to bottom,#cd00b4,#701950), Linear-gradient (to bottom,rgba(255,255,255,0) 0,rgba(255,255,255,0.6) 50%,rgba(255,255,255,0) 100%), Linear-gradient (to bottom,# e141BC,#701950); } background - size: 24%, 21%, 30%, 26%, 8%, 25%, 1%, 24%, 34%, 50%, 1.5%, 50%, 100%, 35%, 58% 20%, 56%, 30%, 60%, 95%, 16%, 8% 10% 78%; background-position: 94% 46%,95% 45%,8% 5%,65.7% 2%,100% 20%,100% center,100% center,21% 40%,20% 98%,20% center,0 32%,0 center; }Copy the codeAnd then there’s the miracle.
After the interface is saved and refreshed, we get the following renderings.
A square-shaped object that looks just like a ballpoint pen.
Next modify the arc, adjusting the corners to fit.
border-top-right-radius: 80px 7px;
border-bottom-right-radius: 80px 7px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
Copy the codeA ballpoint pen is almost done.
4. Add shadows to make the effect more physical.
div:before {
width: 75%;
height: 8px;
border-top-right-radius: 80px 7px;
border-bottom-right-radius: 80px 7px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
box-shadow: 28px 22px 10px rgb(0 0 0 / 70%), 8px 24px 10px rgb(0 0 0 / 40%);
}
Copy the codeTo make the shadow look more like a shadow, the border of the shadow is also set to the equivalent of the main penholder.
Anyone who has used a ballpoint pen knows that the part holding the pen is arc-shaped, so the projection will be farther. The projection width set by SO is 75%. And rewrite a slightly distant oblique projection of the pen-holding part.
div{
box-shadow: 10px 26px 20px 8px rgb(0 0 0 / 30%);
transform: rotate(4deg);
}
Copy the codeBecause of the div rotation, the stroke part needs to be rotated in the opposite direction, and add the following code
div:after,div:before{transform: rotate(-4deg); }
5. Mouse hover effect
Change the color of background-image while levitating.
div:hover:after { background-image: linear-gradient(to right,#c0c0c0,#808080), linear-gradient(to right,#c0c0c0,#c0c0c0), Linear - gradient (the to right, rgba (255255255,0.7), rgba (255255255,0.7)), Linear - gradient (the to right, rgba (255255255,0.7), rgba (255255255,0.7)), Radial -gradient(ellipse at 30px 28px,rgba(255,255,255,0) 65%,rgba(255,255,255,0.6) 70%,rgba(255,255,255,0) 75%), Radial -gradient(ellipse at right center,rgba(255,255,255,0.3) 40%,rgba(255,255,255,0) 40%), linear-gradient(to bottom,#f1af65,#b24522), Linear-gradient (to bottom,rgba(255,255,255,0) 0,rgba(255,255,255,0.4) 50%,rgba(255,255,255,0) 100%), Linear-gradient (to top,rgba(255,255,255,0.1) 20%,rgba(255,255,255,0) 100%), linear-gradient(to bottom,#dc8314,#b24522), Linear-gradient (to bottom,rgba(255,255,255,0) 0,rgba(255,255,255,0.6) 50%,rgba(255,255,255,0) 100%), linear-gradient(to bottom,#f1af65,#b24522) }Copy the codeA 99.99999% similarity color-changing ballpoint pen is complete!
Manual formation