How to realize the special effect of color progress bar animation with CSS3
This article mainly introduces "how to achieve color progress bar animation special effects in CSS3". In daily operation, I believe many people have doubts about how to achieve color progress bar animation special effects in CSS3. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the doubts of "how to achieve color progress bar animation special effects in CSS3". Next, please follow the editor to study!
Code design
Use the HBulider development tool to create a jindutiao.html file with the following code:
CSS3 color progress bar animation special effects
HTML5
65%
CSS3
87%
J-Query
55%
PHP
95%
Create style.css to store various styles for the production progress bar, as shown below:
.demo {background: # 2c304a leading padding: 2em 0;}
. progress-title {
Font-size: 18px
Font-weight: 700
Color: # fff
Margin: 0 0 20px
}
.progress {
Height: 20px
Background: # 171b3c
Border-radius: 20px
Border: 1px solid # 000
Box-shadow: 0 2px 2px # 4f4c4c
Margin-bottom: 40px
Overflow: visible
Position: relative
}
.progress. Progress-bar {
Border-radius: 20px
Border: 1px solid # 000
-webkit-animation: animate-positive 2s
Animation: animate-positive 2s
}
.progress. Progress-value {
Width: 65px
Height: 25px
Line-height: 25px
Background: # 171b3c
Font-size: 15px
Color: # fff
Border-radius: 0 0 15px 15px
Border: 1px solid # 000
Border-top: none
Box-shadow: 0 2px 2px # 4f4c4c
Position: absolute
Bottom:-25px
Right: 60px
}
@-webkit-keyframes animate-positive {
0% {width: 0;}
}
@ keyframes animate-positive {
0% {width: 0;}
}
At this point, the study on "how to achieve color progress bar animation special effects in CSS3" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!
