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

CSS常用示例100+专栏目录

本专栏记录的是经常使用的CSS示例与技巧，主要包含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.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+》。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/186267.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Linux时间命令—— 显示时间，日历等

Linux时间命令—— 显示时间，日历等

目录 1.date显示时间 1.1 常用的标记列表&#xff1a; 1.2 设定时间&#xff1a; 2.cal显示日历 3.时间戳 1.date显示时间 date 用法&#xff1a;date [OPTION] ... [FORMAT] 1.1 常用的标记列表&#xff1a; %H : 小时 (00..23) %M : 分钟 (00..59) %S : 秒 (00..61…
阅读更多...
nginx基础篇学习

nginx基础篇学习

一、nginx编译安装 1、前往nginx官网获取安装包 下载安装包 2、解压 3、安装 进入安装包 安装准备&#xff1a;nginx的rewrite module重写模块依赖于pcre、pcre-devel、zlib和zlib-devel库&#xff0c;要先安装这些库 安装&#xff1a; 编译&#xff1a; 启动&#xff…
阅读更多...
ErphpdownV16.21插件 安装教程和插件下载

ErphpdownV16.21插件 安装教程和插件下载

ErphpdownV16.21插件下载_新版本 上传插件并解压 登入后台插件管理启动ErphpdownV16.21插件即可 启动后设置即可使用此版本为学习版插件 功能介绍&#xff1a; Erphpdown会员推广下载专业版 经过完美测试运行于wordpress 3.x-6.x版本。后续会增加更多实用的功能。已针对此插件…
阅读更多...
医学图像分割：U_Net 论文阅读

医学图像分割：U_Net 论文阅读

“U-Net: Convolutional Networks for Biomedical Image Segmentation” 是一篇由Olaf Ronneberger, Philipp Fischer, 和 Thomas Brox发表的论文&#xff0c;于2015年在MICCAI的医学图像计算和计算机辅助干预会议上提出。这篇论文介绍了一种新型的卷积神经网络架构——U-Net&a…
阅读更多...
3、Qt使用windeploy工具打包可执行文件

3、Qt使用windeploy工具打包可执行文件

新建一个文件夹&#xff0c;把要打包的可执行文件exe拷贝过来 点击输入框&#xff0c;复制一下文件夹路径 点击电脑左下角&#xff0c;找到Qt文件夹&#xff0c; 点击打开 “Qt 5.12.0 for Desktop” &#xff08;我安装的是Qt 5.12.0版本&#xff09; 输入“cd bin”&#xff…
阅读更多...
【云原生 Prometheus篇】Prometheus的动态服务发现机制

【云原生 Prometheus篇】Prometheus的动态服务发现机制

自动发现 一、Prometheus服务发现 理论部分1.1 Prometheus数据采集配置1.2 基于文件的服务发现1.3 基于consul的服务发现1.4 基于 Kubernetes API 的服务发现1.4.1 概念1.4.2 部分配置参数1.4.3 配置模板 二、实例一&#xff1a;部署基于文件的服务发现2.1 创建用于服务发现的文…
阅读更多...
保姆级连接FusionInsight MRS kerberos Hive

保姆级连接FusionInsight MRS kerberos Hive

数新网络&#xff0c;让每个人享受数据的价值https://xie.infoq.cn/link?targethttps%3A%2F%2Fwww.datacyber.com%2F 概述 本文将介绍在华为云 FusionInsight MRS&#xff08;Managed Relational Service&#xff09;的Kerberos环境中&#xff0c;如何使用Java和DBeaver实现远…
阅读更多...
命名空间、字符串、布尔类型、nullptr、类型推导

命名空间、字符串、布尔类型、nullptr、类型推导

面向过程语言&#xff1a;C ——> 重视求解过程 面向对象语言&#xff1a;C ——> 重视求解的方法 面向对象的三大特征&#xff1a;封装、继承和多态 C 和 C 在语法上的区别 1、命名空间&#xff08;用于解决命名冲突问题&#xff09; 2、函数重载和运算符重载&#xf…
阅读更多...
vatee万腾的科技征途：Vatee独特探索的数字化力量

vatee万腾的科技征途：Vatee独特探索的数字化力量

在数字化时代的浪潮中&#xff0c;Vatee万腾以其独特的科技征途成为引领者。公司在数字化领域的探索之路不仅是技术的创新&#xff0c;更是一种对未知的勇敢涉足&#xff0c;是对新时代的深刻洞察和积极实践。 Vatee万腾通过独特的探索&#xff0c;展示了在数字化征途上的创新力…
阅读更多...
CTFSHOW sqll注入

CTFSHOW sqll注入

号过滤绕过 号和不加通配符的 like 是一样的。 还可以使用 < >号来绕过&#xff0c;<> 在mysql中等于! 如果在加一个! 双重否定代表肯定 就是了 空格过滤绕过 /**/ &#xff0c;()&#xff0c;&#xff0c;tab&#xff0c;两个空格 or and xor not 过滤绕过 a…
阅读更多...
HTML CSS登录网页设计

HTML CSS登录网页设计

一、效果图： 二、HTML代码： <!DOCTYPE html> <!-- 定义HTML5文档 --> <html lang="en"> …
阅读更多...
jetson NX部署Yolov8

jetson NX部署Yolov8

一，事情起因，由于需要对无人机机载识别算法进行更新，所以需要对yolov8算法进行部署到边缘端。 二，环境安装 安装虚拟环境管理工具，这个根据个人喜好。 我们需要选择能够在ARM架构上运行的conda，这里我们选择conda-forge 下载地址 安装即可 剩下的就是和conda 创建虚拟…
阅读更多...
ZC-OFDM模糊函数原理及仿真

ZC-OFDM模糊函数原理及仿真

文章目录 前言一、ZC 序列二、ZC-OFDM 信号1、OFDM 信号表达式2、模糊函数表达式三、MATLAB 仿真1、MATLAB 核心源码2、仿真结果①、ZC-OFDM 模糊函数②、ZC-OFDM 距离分辨率③、ZC-OFDM 速度分辨率前言 本文进行 ZC-OFDM 的原理讲解及仿真，首先看一下 ZC-OFDM 的模糊函数仿真…
阅读更多...
加速你的自动化测试：3种等待方式！

加速你的自动化测试：3种等待方式！

在自动化测试中&#xff0c;等待是一个重要的技术&#xff0c;用于处理页面加载、元素定位、元素状态改变等延迟问题。 等待能够确保在条件满足后再进行后续操作&#xff0c;提高自动化测试的稳定性以及可靠性。 等待方式&#xff1a;显示等待、隐式等待、线程睡眠 1. 显式等…
阅读更多...
电源控制系统架构（PCSA）之系统分区电源域

电源控制系统架构（PCSA）之系统分区电源域

目录 4.2 电源域 4.2.1 电源模式 4.2.2 电源域的选择 4.2.3 系统逻辑 4.2.4 Always-On域 4.2.5 处理器Clusters 4.2.6 CoreSight逻辑 4.2.7 图像处理器 4.2.8 显示处理器 4.2.9 其他功能 4.2.10 电源域层次结构要求 4.2.11 SOC域示例 4.2 电源域 电源域在这里被定…
阅读更多...
设计模式—里氏替换原则

设计模式—里氏替换原则

1.概念 里氏代换原则(Liskov Substitution Principle LSP)面向对象设计的基本原则之一。 里氏代换原则中说&#xff0c;任何基类可以出现的地方&#xff0c;子类一定可以出现。 LSP是继承复用的基石&#xff0c;只有当衍生类可以替换掉基类&#xff0c;软件单位的功能不受到影…
阅读更多...
万字解析设计模式之模板方法与解释器模式

万字解析设计模式之模板方法与解释器模式

一、模板方法模式 1.1概述 定义一个操作中算法的框架&#xff0c;而将一些步骤延迟到子类中&#xff0c;模板方法使得子类可以不改变一个算法的结构即可重定义该算法的某些特定步骤。 例如&#xff0c;去银行办理业务一般要经过以下4个流程&#xff1a;取号、排队、办理具体业…
阅读更多...
深入理解 Django 中的事务管理

深入理解 Django 中的事务管理

概要 在数据库操作中&#xff0c;事务是确保数据完整性和一致性的关键机制。Django 作为一个强大的 Python Web 框架&#xff0c;提供了灵活而强大的事务管理功能。理解和正确使用 Django 中的事务对于开发高质量的 Web 应用至关重要。本文将深入探讨 Django 的事务管理机制&a…
阅读更多...
leetcode刷题详解二

leetcode刷题详解二

160. 相交链表 本质上是走过自己的路&#xff0c;再走过对方的路&#xff0c;这是求两个链表相交的方法 ListNode *getIntersectionNode(ListNode *headA, ListNode *headB) {//本质上是走过自己的路&#xff0c;再走过对方的路if(headA NULL|| headB NULL){return NULL;}Lis…
阅读更多...
相机设置参数：黑电平（Black Level）详解和示例

相机设置参数：黑电平（Black Level）详解和示例

本文通过原理和示例对相机设置参数“黑电平”进行讲解&#xff0c;以帮助大家理解和使用。 原理 相机中黑电平原理是将电平增大&#xff0c;可以显示更多暗区细节&#xff0c;可能会损失一些亮区&#xff0c;但图像更多的关注暗区&#xff0c;获取完图像信息再减掉。只是为了…
阅读更多...
最新文章

Copyright @ 2022~2023