CSS常用示例100+专栏目录

本专栏记录的是经常使用的CSS示例与技巧，主要包含CSS布局，CSS特效，CSS花边信息三部分内容。其中CSS布局主要是列出一些常用的CSS布局信息点，CSS特效主要是一些动画示例，CSS花边是描述了一些CSS相关的库、知识点、理论篇章等。 因为常用所以记录、展示、分享，希望能给您带来帮助。

css实战中，怎么绘制hover后点亮阁楼，拉伸出楼梯效果呢？这里利用SVG来构造出阁楼和楼梯的图像，利用transform: translate(）的神奇功能，hover时候，将灯光和楼梯呈现出来。

效果图

源代码

/*
* @Author: 大剑师兰特（xiaozhuanlan），还是大剑师兰特（CSDN）
* @此源代码版权归大剑师兰特所有，可供学习或商业项目中借鉴，未经授权，不得重复地发表到博客、论坛，问答，git等公共空间或网站中。
* @Email: 2909222303@qq.com
* @weixin: gis-dajianshi
* @First published in CSDN
* @First published time: 2023-11-25
*/
<template><div class="container"><div class="top"><h3>科技动画，hover后点亮阁楼，拉伸出楼梯</h3><div class="author">大剑师兰特, 还是大剑师兰特，gis-dajianshi</div></div><div class="dajianshi"><svg id="MonValley" version="1.1" xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="400px" height="400px"viewBox="0 0 300 300.001" enable-background="new 0 0 300 300.001" xml:space="preserve"><g id="Background"><path d="M300,275.612c0,13.506-10.949,24.456-24.455,24.456H24.455C10.949,300.068,0,289.118,0,275.612V24.523C0,11.017,10.949,0.067,24.455,0.067h251.089C289.05,0.067,300,11.017,300,24.523V275.612z" /><polygon fill="#213C45"points="180.745,294.673 189.226,299.762 216.677,299.762 216.677,103.068 180.745,124.628   " /><path fill="#566560"d="M216.677,299.762h7.176c10.18,0,19.885-2.016,28.759-5.646V124.628l-35.935-21.56V299.762z" /><polygon fill="#738A91"points="216.677,103.068 180.745,124.628 216.677,146.188 252.612,124.628   " /><polygon fill="#5E7887" points="216.677,110.83 193.681,124.628 216.677,138.426 239.675,124.628  " /><polygon fill="#738A91"points="216.677,117.563 204.904,124.628 216.677,131.692 228.453,124.628   " /><linearGradient id="SVGID_13_" gradientUnits="userSpaceOnUse" x1="150" y1="255.5474" x2="150"y2="-2.5565"><stop offset="0.0859" style="stop-color:#000000" /><stop offset="1" style="stop-color:#000000;stop-opacity:0" /></linearGradient><path fill="url(#SVGID_13_)" d="M0,52.931v222.681c0,12.192,8.925,22.3,20.598,24.15h258.805c11.673-1.851,20.598-11.958,20.598-24.15V52.931H0z" /><path fill="#213C45"d="M52.325,295.804c7.606,2.554,15.739,3.958,24.205,3.958h20.712V62.351l-44.917,26.95V295.804z" /><polygon fill="#566560" points="97.242,299.762 142.159,299.762 142.159,89.301 97.242,62.351   " /><polygon fill="#738A91" points="97.242,62.351 52.325,89.301 97.242,116.251 142.159,89.301   " /><polygon fill="#5E7887" points="97.242,72.053 68.495,89.301 97.242,106.549 125.989,89.301   " /><polygon fill="#738A91" points="97.242,80.47 82.524,89.301 97.242,98.131 111.96,89.301  " /><polygon fill="#213C45" points="56.816,76.723 52.325,79.418 52.325,89.348 56.816,92.043   " /><polygon fill="#566560" points="56.816,76.723 61.308,79.418 61.308,89.348 56.816,92.043   " /><polygon fill="#738A91" points="56.816,76.723 52.325,79.418 56.816,82.113 61.308,79.418   " /><polygon fill="#213C45" points="76.515,88.491 72.023,91.187 72.023,101.116 76.515,103.812   " /><polygon fill="#566560" points="76.515,88.491 81.007,91.187 81.007,101.116 76.515,103.812   " /><polygon fill="#738A91" points="76.515,88.491 72.023,91.187 76.515,93.882 81.007,91.187   " /><polygon fill="#213C45" points="97.242,100.931 92.75,103.626 92.75,113.556 97.242,116.251   " /><polygon fill="#566560" points="97.242,100.931 101.734,103.626 101.734,113.556 97.242,116.251   " /><polygon fill="#213C45" points="116.941,64.057 112.449,66.752 112.449,76.682 116.941,79.377   " /><polygon fill="#566560" points="116.941,64.057 121.433,66.752 121.433,76.682 116.941,79.377   " /><polygon fill="#738A91" points="116.941,64.057 112.449,66.752 116.941,69.448 121.433,66.752   " /><polygon fill="#738A91" points="97.242,100.931 92.75,103.626 97.242,106.321 101.734,103.626   " /><polygon fill="#213C45" points="97.242,52.931 92.75,55.626 92.75,65.556 97.242,68.251   " /><polygon fill="#566560" points="97.242,52.931 101.734,55.626 101.734,65.556 97.242,68.251   " /><polygon fill="#738A91" points="97.242,52.931 92.75,55.626 97.242,58.321 101.734,55.626   " /><polygon fill="#213C45" points="137.667,76.723 133.175,79.418 133.175,89.348 137.667,92.043   " /><polygon fill="#566560" points="137.667,76.723 142.159,79.418 142.159,89.348 137.667,92.043   " /><polygon fill="#738A91" points="137.667,76.723 133.175,79.418 137.667,82.113 142.159,79.418   " /><path d="M120.976,122.937c-6.108,3.443-11.06,11.185-11.06,17.293v31.949l22.119-13.164v-31.253C132.035,121.654,127.084,119.494,120.976,122.937z" /><path fill="#213C45" d="M124.009,121.659c2.181,0.79,3.555,2.896,3.555,6.104v33.914l4.471-2.661v-31.253C132.035,122.707,128.641,120.368,124.009,121.659z" /><linearGradient id="SVGID_14_" gradientUnits="userSpaceOnUse" x1="101.7681" y1="146.3892"x2="114.3482" y2="158.9693"><stop offset="0" style="stop-color:#000000" /><stop offset="1" style="stop-color:#213C45" /></linearGradient><polygon fill="url(#SVGID_14_)"points="109.916,172.179 132.035,159.015 132.035,159.015 109.916,147.739   " /></g><g id="Step1"><polygon fill="#213C45"points="133.888,157.904 106.938,174.074 106.938,301.608 133.888,317.777   " /><polygon fill="#566560" points="114.089,178.202 141.04,162.032 141.04,301.608 114.089,317.777   " /><polygon fill="#738A91"points="133.888,157.904 106.938,174.074 114.063,178.202 141.013,162.032   " /></g><g id="Step2"><polygon fill="#213C45" points="141.04,168.053 114.089,184.223 114.089,311.757 141.04,327.926   " /><polygon fill="#566560"points="121.241,188.351 148.191,172.181 148.191,311.757 121.241,327.926   " /><polygon fill="#738A91" points="141.04,168.053 114.089,184.223 121.214,188.351 148.165,172.181  " /></g><g id="Step3"><polygon fill="#213C45"points="148.191,178.203 121.241,194.373 121.241,321.907 148.191,338.076   " /><polygon fill="#566560" points="128.392,198.5 155.342,182.331 155.342,321.907 128.392,338.076   " /><polygon fill="#738A91" points="148.191,178.203 121.241,194.373 128.366,198.5 155.316,182.331   " /></g><g id="Step4"><polygon fill="#213C45"points="155.342,188.352 128.392,204.522 128.392,332.056 155.342,348.225   " /><polygon fill="#566560" points="135.543,208.65 162.494,192.48 162.494,332.056 135.543,348.225   " /><polygon fill="#738A91" points="155.342,188.352 128.392,204.522 135.517,208.65 162.467,192.48   " /></g><g id="Step5"><polygon fill="#213C45"points="162.494,198.501 135.543,214.671 135.543,342.206 162.494,358.375   " /><polygon fill="#566560"points="142.695,218.799 169.645,202.629 169.645,342.206 142.695,358.375   " /><polygon fill="#738A91"points="162.494,198.501 135.543,214.671 142.668,218.799 169.619,202.629   " /></g><g id="Step6"><polygon fill="#213C45"points="169.645,208.651 142.695,224.821 142.695,352.355 169.645,368.524   " /><polygon fill="#566560"points="149.846,228.949 176.796,212.779 176.796,352.355 149.846,368.524   " /><polygon fill="#738A91" points="169.645,208.651 142.695,224.821 149.82,228.949 176.77,212.779   " /></g><g id="Step7"><polygon fill="#213C45" points="176.796,218.8 149.846,234.97 149.846,362.504 176.796,378.673  " /><polygon fill="#566560"points="156.998,239.098 183.948,222.928 183.948,362.504 156.998,378.673   " /><polygon fill="#738A91" points="176.796,218.8 149.846,234.97 156.971,239.098 183.921,222.928  " /></g><g id="Step8"><polygon fill="#213C45" points="183.948,228.95 156.998,245.12 156.998,372.654 183.948,388.823   " /><polygon fill="#566560"points="164.149,249.248 191.099,233.078 191.099,372.654 164.149,388.823   " /><polygon fill="#738A91" points="183.948,228.95 156.998,245.12 164.123,249.248 191.073,233.078   " /></g><g id="Step9"><polygon fill="#213C45"points="191.099,239.099 164.149,255.269 164.149,382.803 191.099,398.972   " /><polygon fill="#566560" points="171.3,259.397 198.25,243.227 198.25,382.803 171.3,398.972   " /><polygon fill="#738A91"points="191.099,239.099 164.149,255.269 171.274,259.397 198.224,243.227   " /></g><g id="Step10"><polygon fill="#213C45" points="198.25,249.249 171.3,265.418 171.3,392.953 198.25,409.122   " /><polygon fill="#566560"points="178.452,269.546 205.402,253.376 205.402,392.953 178.452,409.122   " /><polygon fill="#738A91" points="198.25,249.249 171.3,265.418 178.425,269.546 205.375,253.376  " /></g><g id="Step11"><polygon fill="#213C45"points="205.402,259.398 178.452,275.568 178.452,403.102 205.402,419.271   " /><polygon fill="#566560"points="185.603,279.696 212.553,263.526 212.553,403.102 185.603,419.271   " /><polygon fill="#738A91"points="205.402,259.398 178.452,275.568 185.577,279.696 212.527,263.526   " /></g><g id="Step12"><polygon fill="#213C45" points="212.553,269.547 185.603,285.717 185.603,413.251 212.553,429.42  " /><polygon fill="#566560" points="192.754,289.845 219.705,273.675 219.705,413.251 192.754,429.42  " /><polygon fill="#738A91"points="212.553,269.547 185.603,285.717 192.728,289.845 219.678,273.675   " /></g><g id="Step13"><polygon fill="#213C45" points="219.705,279.697 192.754,295.867 192.754,423.401 219.705,439.57  " /><polygon fill="#566560" points="199.906,299.995 226.856,283.825 226.856,423.401 199.906,439.57  " /><polygon fill="#738A91" points="219.705,279.697 192.754,295.867 199.879,299.995 226.83,283.825  " /></g><g id="DarkFade"><linearGradient id="SVGID_15_" gradientUnits="userSpaceOnUse" x1="150" y1="319.3403" x2="150"y2="189.902"><stop offset="0.0859" style="stop-color:#000000" /><stop offset="1" style="stop-color:#000000;stop-opacity:0" /></linearGradient><path fill="url(#SVGID_15_)" d="M0,188.362v87.25c0,12.192,8.925,22.3,20.598,24.15h258.805c11.673-1.851,20.598-11.958,20.598-24.15v-87.25H0z" /></g><g id="BrightDoor"><path fill="#C2DE9B" d="M120.976,122.937c-6.108,3.443-11.06,11.185-11.06,17.293v31.949l22.119-13.164v-31.253C132.035,121.654,127.083,119.494,120.976,122.937z" /><path fill="#738A91" d="M124.009,121.659c2.182,0.79,3.555,2.896,3.555,6.104v33.914l4.471-2.661v-31.253C132.035,122.707,128.64,120.368,124.009,121.659z" /><linearGradient id="SVGID_16_" gradientUnits="userSpaceOnUse" x1="101.7686" y1="146.3906"x2="136.0163" y2="180.6384"><stop offset="0" style="stop-color:#FFFCDF" /><stop offset="1" style="stop-color:#213C45" /></linearGradient><polygon fill="url(#SVGID_16_)"points="109.916,172.179 132.035,159.015 132.035,159.015 109.916,147.739   " /></g></svg></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: royalblue;color: #fff;}.dajianshi {margin-top: 40px;position: relative;background-color: #000000;}#MonValley #BrightDoor {transition: all 0.3s ease-in-out;opacity: 0;}#MonValley:hover #BrightDoor {opacity: 1;}#MonValley #Step1 {transition: all 0.65s ease-in-out;transform: translate(0px, 150px);}#MonValley:hover #Step1 {transform: translate(0px, 0px);}#MonValley #Step2 {transition: all 0.6s ease-in-out;transform: translate(0px, 150px);}#MonValley:hover #Step2 {transform: translate(0px, 0px);}#MonValley #Step3 {transition: all 0.55s ease-in-out;transform: translate(0px, 150px);}#MonValley:hover #Step3 {transform: translate(0px, 0px);}#MonValley #Step4 {transition: all 0.5s ease-in-out;transform: translate(0px, 150px);}#MonValley:hover #Step4 {transform: translate(0px, 0px);}#MonValley #Step5 {transition: all 0.45s ease-in-out;transform: translate(0px, 150px);}#MonValley:hover #Step5 {transform: translate(0px, 0px);}#MonValley #Step6 {transition: all 0.4s ease-in-out;transform: translate(0px, 150px);}#MonValley:hover #Step6 {transform: translate(0px, 0px);}#MonValley #Step7 {transition: all 0.35s ease-in-out;transform: translate(0px, 150px);}#MonValley:hover #Step7 {transform: translate(0px, 0px);}#MonValley #Step8 {transition: all 0.3s ease-in-out;transform: translate(0px, 150px);}#MonValley:hover #Step8 {transform: translate(0px, 0px);}#MonValley #Step9 {transition: all 0.25s ease-in-out;transform: translate(0px, 150px);}#MonValley:hover #Step9 {transform: translate(0px, 0px);}#MonValley #Step10 {transition: all 0.2s ease-in-out;transform: translate(0px, 150px);}#MonValley:hover #Step10 {transform: translate(0px, 0px);}#MonValley #Step11 {transition: all 0.15s ease-in-out;transform: translate(0px, 150px);}#MonValley:hover #Step11 {transform: translate(0px, 0px);}#MonValley #Step12 {transition: all 0.1s ease-in-out;transform: translate(0px, 150px);}#MonValley:hover #Step12 {transform: translate(0px, 0px);}#MonValley #Step13 {transition: all 0.05s ease-in-out;transform: translate(0px, 150px);}#MonValley:hover #Step13 {transform: translate(0px, 0px);}</style>

CSS基础知识点

1.CSS样式表
2.基础选择器：（1）标签选择器，（2）类选择器，（3）id选择器，（4）通配符选择器
3.复合选择器：（1）后代选择器，（2）子选择器，（3）并集选择器，（4）交集选择器，（5）伪类选择器。
4.字体样式属性：（1）字体大小font-size，（2）字体类型font-family，（3）字体粗细font-weight，（4）字体风格font-style
5.文本外观样式：（1）设置文本颜色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.文本外观属性：（1）text-shadow，（2）overflow
7.CSS层叠性、继承性及优先级
8.边框介绍
8.1边框属性：（1）border-style，（2）border-width，（3）border-color，（4）border-radius
8.2内边距属性
8.3外边距属性
8.4box-shadow
9.背景属性
9.1背景颜色
9.2背景图片：（1）background-repeat，（2）background-position，（3）background-attachment，（4）background-size，（5）background-origin，（6）background-clip，（7）复合写法，（8）不透明
10.元素的类型
11.span标签
12.display
13.表格标签：（1）table标签，（2）tr标签，（3）td标签，（4）th标签，（5）表格边框，（6）折叠边框，（7）表格宽度和高度，（8）表格边框间距border-spacing，（9）表格标题位置caption-side
14.表单
14.1创建表单：（1）标签
14.2表单控件：（1）input控件，（2）input/标签的type属性，（3）textarea控件，（4）select控件
15.CSS盒子模型：（1）边框（border），（2）内边距(padding)，（3）外边距（margin），（4）清除内外边距，（5）盒子模型
16.浮动布局：（1）传统网页布局，（2）浮动简介，（3）浮动特性，（4）清除浮动
17.定位布局：（1）定位组成，（2）相对定位relative，（3）绝对定位absolute，（4）子绝父相，（5）固定定位fixed，（6）定位叠放次序z-index，（7）定位拓展
三.其他
1.圆角边框：（1）圆形，（2）圆角矩形
2.盒子阴影
3.文字阴影
4.用户界面样式：（1）鼠标样式 cursor，（2）轮廓线 outline，（3）防止拖拽文本域 resize，
5.过渡 transition

结尾语

CSS的应用无处不在，希望某个片段就能帮助你，欢迎学习GIS的朋友一起交流。
《 Openlayers 综合示例200+ 》，
《 leaflet示例教程100+ 》，
《 Cesium示例教程100+》，
《MapboxGL示例教程100+》。