CSS common examples 100+ 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
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: 大剑师兰特（xiaozhuanlan），还是大剑师兰特（CSDN）
* @此源代码版权归大剑师兰特所有，可供学习或商业项目中借鉴，未经授权，不得重复地发表到博客、论坛，问答，git等公共空间或网站中。
* @Email: [email protected]
* @weixin: gis-dajianshi
* @First published in CSDN
* @First published time: 2023-11-14
*/
<template>
<div class="container">
<div class="top">
<h3>音频波纹加载效果</h3>
<div class="author">大剑师兰特, 还是大剑师兰特，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. Compound selector: (1) descendant selector, (2) sub-selector, (3) union selector, (4) intersection selector, (5) pseudo Class selector.
4. Font style attributes: (1) font size font-size, (2) font type font-family, (3) font weight 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 properties: (1) border-style, (2) border-width, (3) border-color, (4) border-radius
8.2 Padding properties
8.3 Margin attributes
8.4box-shadow
9. Background attributes
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) Compound writing, (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, (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 5. Transition 4. User interface style: (1) mouse style cursor, (2) outline outline, (3) prevent dragging Text field resize, 3. Text shadow 2. Box shadow 1. Rounded border: (1) circle, (2) rounded rectangle 3. Others 17. Positioning layout: ( 1) Positioning composition, (2) relative positioning, (3) absolute positioning absolute, (4) son and father, (5) fixed positioning fixed, (6) positioning stacking order z-index, (7) positioning expansion
16. Floating layout: (1) Traditional web page layout, (2) Introduction to floating, (3) Floating characteristics, (4) Clear floating
Conclusion
CSS is used 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+》.