100 common CSS examples + column directory
This column records frequently used CSS examples and techniques, mainly including CSS layout, CSS special effects, and CSS lace information. Among them, CSS layout mainly lists some commonly used CSS layout information points, CSS special effects mainly include some animation examples, and CSS lace describes some CSS-related libraries, knowledge points, theoretical chapters, etc. Because it is commonly used, I record, display and share it. I hope it can be helpful to you.
Article directory
-
- renderings
- source code
- CSS basic knowledge points
- Conclusion
How to create an audio ripple loading rhythm effect in CSS practice? It’s actually very simple. It mainly uses different stages of keyframes state to set the height, background color, height from the top, etc. of different columnar bars. Then come another infinite loop of animation.
Renderings
Source code
/* * @Author: Great Sword Master Lant (xiaozhuanlan), or Great Sword Master Lant (CSDN) * @The copyright of this source code belongs to Great Sword Master Lant and can be used for reference in learning or commercial projects. Without authorization, it may not be repeatedly published to blogs, forums, Q&A, git and other public spaces or websites. * @Email: [email protected] * @weixin: gis-dajianshi * @First published in CSDN * @First published time: 2023-11-14 */ <template> <div class="container"> <div class="top"> <h3>Audio ripple loading effect</h3> <div class="author">Great Swordsman Lant, or Great Swordsman Lant, gis-dajianshi</div> </div> <div class="dajianshi"> <span></span> <span></span> <span></span> <span></span> <span></span> </div> </div> </template> <style scoped> .container {<!-- --> width: 1000px; height: 580px; margin: 50px auto; border: 1px solid green; position: relative; } .top {<!-- --> margin: 0 auto 0px; padding: 10px 0; background: thistle; color: #fff; } .dajianshi {<!-- --> margin:100px auto 0; width: 200px; height: 120px; display: flex; } .dajianshi span {<!-- --> width: 10px; border-radius: 18px; margin-right: 20px; } .dajianshi span:nth-child(1) {<!-- --> animation: bar1 2s 0.2s infinite linear; } .dajianshi span:nth-child(2) {<!-- --> animation: bar2 2s 0.4s infinite linear; } .dajianshi span:nth-child(3) {<!-- --> animation: bar3 2s 0.6s infinite linear; } .dajianshi span:nth-child(4) {<!-- --> animation: bar4 2s 0.8s infinite linear; } .dajianshi span:nth-child(5) {<!-- --> animation: bar5 2s 1.0s infinite linear; } .dajianshi span:nth-child(6) {<!-- --> animation: bar6 2s 1.2s infinite linear; } .dajianshi span:nth-child(7) {<!-- --> animation: bar7 2s 1.4s infinite linear; } .dajianshi span:nth-child(8) {<!-- --> animation: bar8 2s 1.6s infinite linear; } .dajianshi span:nth-child(9) {<!-- --> animation: bar9 2s 1.8s infinite linear; } @keyframes bar1 {<!-- --> 0% {<!-- --> background: #f677b0; margin-top: 25%; height: 10%; } 50% {<!-- --> background: #f677b0; height: 100%; margin-top: 0%; } 100% {<!-- --> background: #f677b0; height: 10%; margin-top: 25%; } } @keyframes bar2 {<!-- --> 0% {<!-- --> background: #df7ff2; margin-top: 25%; height: 10%; } 50% {<!-- --> background: #df7ff2; height: 100%; margin-top: 0%; } 100% {<!-- --> background: #df7ff2; height: 10%; margin-top: 25%; } } @keyframes bar3 {<!-- --> 0% {<!-- --> background: #8c7ff2; margin-top: 25%; height: 10%; } 50% {<!-- --> background: #8c7ff2; height: 100%; margin-top: 0%; } 100% {<!-- --> background: #8c7ff2; height: 10%; margin-top: 25%; } } @keyframes bar4 {<!-- --> 0% {<!-- --> background: #7fd0f2; margin-top: 25%; height: 10%; } 50% {<!-- --> background: #7fd0f2; height: 100%; margin-top: 0%; } 100% {<!-- --> background: #7fd0f2; height: 10%; margin-top: 25%; } } @keyframes bar5 {<!-- --> 0% {<!-- --> background: #7ff2d3; margin-top: 25%; height: 10%; } 50% {<!-- --> background: #7ff2d3; height: 100%; margin-top: 0%; } 100% {<!-- --> background: #7ff2d3; height: 10%; margin-top: 25%; } } </style>
CSS basic knowledge points
1.CSS style sheet
2. Basic selectors: (1) tag selector, (2) class selector, (3) id selector, (4) wildcard selector
3. Composite selector: (1) Descendant selector, (2) Sub-selector, (3) Union selector, (4) Intersection selector, (5) Pseudo-class selector.
4. Font style attributes: (1) font-size, (2) font type font-family, (3) font weight, (4) font style font-style
5. Text appearance style: (1) Set text color color, (2) word-spacing, (3) letter-spacing, (4) line-height, (5) text-transform, (6) text-decoration, ( 7) text-align, (8) text-indent, (9) white-space
6. Text appearance attributes: (1) text-shadow, (2) overflow
7.CSS cascading, inheritance and priority
8. Introduction to borders
8.1 Border attributes: (1) border-style, (2) border-width, (3) border-color, (4) border-radius
8.2 Padding properties
8.3 Margin properties
8.4box-shadow
9.Background properties
9.1 Background color
9.2 Background images: (1) background-repeat, (2) background-position, (3) background-attachment, (4) background-size, (5) background-origin, (6) background-clip, (7) composite Writing method, (8) opaque
10. Type of element
11.span tag
12.display
13. Table tags: (1) table tag, (2) tr tag, (3) td tag, (4) th tag, (5) table border, (6) folding border, (7) table width and height, ( 8) table border spacing border-spacing, (9) table title position caption-side
14. Form
14.1 Create a form: (1) Label
14.2 Form controls: (1) input control, (2) input/label type attribute, (3) textarea control, (4) select control
15. CSS box model: (1) border, (2) padding, (3) margin, (4) clear inner and outer margins, (5) box model
16. Floating layout: (1) Traditional web page layout, (2) Introduction to floating, (3) Floating characteristics, (4) Clear floating
17. Positioning layout: (1) positioning composition, (2) relative positioning, (3) absolute positioning absolute, (4) child absolute parent, (5) fixed positioning fixed, (6) positioning stacking order z-index , (7) Positioning expansion
3. Others
1. Rounded border: (1) circle, (2) rounded rectangle
2. Box Shadow
3. Text shadow
4. User interface style: (1) mouse style cursor, (2) outline outline, (3) prevent dragging text field resize,
5. Transition transition
Conclusion
CSS applications are everywhere. I hope a certain snippet can help you. Friends who are learning GIS are welcome to communicate with us.
“Openlayers Comprehensive Examples 200+”,
“Leaflet Example Tutorial 100+”,
“Cesium Example Tutorial 100+”,
“MapboxGL Example Tutorial 100+”.