CSS特效018：科技动画，hover后点亮阁楼，拉伸出楼梯

CSS常用示例100+专栏目录

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

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

效果图

源代码

/*
* @Author: 大剑师兰特（xiaozhuanlan），还是大剑师兰特（CSDN）
* @此源代码版权归大剑师兰特所有，可供学习或商业项目中借鉴，未经授权，不得重复地发表到博客、论坛，问答，git等公共空间或网站中。
* @Email: [email protected]
* @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.523
    C0,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.805
    c11.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.253
    C132.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.253
    C132.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.805
    c11.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.253
    C132.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.253
    C132.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+》。