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
In actual CSS practice, we often see scenes like this. When the mouse is placed on an image or a div block, effects such as rotation, amplification, and movement will appear. It is also quite simple to implement. Although simple, it is very important and can increase the flexibility of the page.
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: 2022-11-06 */ <template> <div class="container"> <div class="top"> <h3>Move the mouse up to rotate, enlarge, and move</h3> <div class="author">Great Swordsman Lant, or Great Swordsman Lant, gis-dajianshi</div> </div> <div style="width:640px; margin:0 auto;"> <div class="itemBox img1">360° rotation </div> <div class="itemBox img2">Zoom in</div> <div class="itemBox img3">Rotate and zoom</div> <div class="itemBox img4">Move up, down, left and right </div> </div> </div> </template> <style scoped> .container {<!-- --> width: 1000px; height: 580px; margin: 50px auto; border: 1px solid green; position: relative; } .top {<!-- --> margin: 0 auto 130px; padding: 10px 0; background: orange; color: #fff; } .itemBox {<!-- --> width: 120px; height: 120px; line-height: 120px; margin: 20px; background-color: #5cb85c; float: left; font-size: 12px; text-align: center; color: #fff; cursor: pointer; } /*Effect 1: 360° rotation, modify rotate (degree of rotation)*/ .img1 {<!-- --> transition: All 0.4s ease-in-out; -webkit-transition: All 0.4s ease-in-out; -moz-transition: All 0.4s ease-in-out; -o-transition: All 0.4s ease-in-out; } .img1:hover {<!-- --> transform: rotate(360deg); -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); } /*Effect 2: Zoom in and modify scale (magnification value)*/ .img2 {<!-- --> transition: All 0.4s ease-in-out; -webkit-transition: All 0.4s ease-in-out; -moz-transition: All 0.4s ease-in-out; -o-transition: All 0.4s ease-in-out; } .img2:hover {<!-- --> transform: scale(1.2); -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -o-transform: scale(1.2); -ms-transform: scale(1.2); } /*Effect 3: Rotate and magnify, modify rotate (degree of rotation) scale (magnification value)*/ .img3 {<!-- --> transition: All 0.4s ease-in-out; -webkit-transition: All 0.4s ease-in-out; -moz-transition: All 0.4s ease-in-out; -o-transition: All 0.4s ease-in-out; } .img3:hover {<!-- --> transform: rotate(360deg) scale(1.2); -webkit-transform: rotate(360deg) scale(1.2); -moz-transform: rotate(360deg) scale(1.2); -o-transform: rotate(360deg) scale(1.2); -ms-transform: rotate(360deg) scale(1.2); } /*Effect 4: Move up, down, left and right, modify translate(x-axis, y-axis)*/ .img4 {<!-- --> transition: All 0.4s ease-in-out; -webkit-transition: All 0.4s ease-in-out; -moz-transition: All 0.4s ease-in-out; -o-transition: All 0.4s ease-in-out; } .img4:hover {<!-- --> transform: translate(0, -10px); -webkit-transform: translate(0, -10px); -moz-transform: translate(0, -10px); -o-transform: translate(0, -10px); -ms-transform: translate(0, -10px); } </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+”.