动态酷黑主页源码

效果图

PC端 （移动端不能访问）
在这里插入图片描述
在这里插入图片描述

部分代码

index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>孤客</title>  
<!--页面核心样式-->
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<!--页面核心JS-->
<script type="text/javascript" src="js/uaredirect.js"></script>
<script type="text/javascript">browserRedirect("/m");</script>
<script src="https://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/respond.min.js"></script>
	
</head>
<body>
<div class="container slideTxtBox">
    <div class="header flex flex-pack-justify flex-align-center">
    <div class="user-info flex flex-align-center">
        <div class="portrait"><img src="https://pic.rmb.bdstatic.com/bjh/240417/de28c7642c0f00188b630295c39a5bf29218.jpeg" ></div>
        <div class="name PangMenZhengDao">孤客NOTES Blog</div><!--左上角 Logo+站名-->
    </div>
    <div class="link te_c p_r hd">
		<ul class="flex flex-align-center">
			<li class="p_r"><a href="javascript:void(0);" class="transition OPPOSans-R di_bl">关于我</a></li>
			<li class="p_r"><a href="javascript:void(0);" class="transition OPPOSans-R di_bl">朋友们</a></li>
		</ul>
		<div class="move-bg"></div><!--右上方 部件-->
	</div>
	</div>

<!--页面内容-->	
<div class="bd">
<!--左侧小部件-MacBook Air-->
<div class="content p_r">
	<div class="en_box flex flex-align-center flex-pack-center">
	<div class="macbook">
  <div class="inner">
    <div class="screen">
      <div class="face-one">
        <div class="camera"></div>
        <div class="display">
          <div class="shade"></div>
        </div>
      </div>
      <img src="https://pic.rmb.bdstatic.com/bjh/240417/de28c7642c0f00188b630295c39a5bf29218.jpeg" class="logo">
    </div>
    <div class="body">
      <div class="face-one">
        <div class="touchpad">
        </div>
        <div class="keyboard">
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key space"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key"></div>
          <div class="key f"></div>
          <div class="key f"></div>
          <div class="key f"></div>
          <div class="key f"></div>
          <div class="key f"></div>
          <div class="key f"></div>
          <div class="key f"></div>
          <div class="key f"></div>
          <div class="key f"></div>
          <div class="key f"></div>
          <div class="key f"></div>
          <div class="key f"></div>
          <div class="key f"></div>
          <div class="key f"></div>
          <div class="key f"></div>
          <div class="key f"></div>
        </div>
      </div>
      <div class="pad one"></div>
      <div class="pad two"></div>
      <div class="pad three"></div>
      <div class="pad four"></div>
    </div>
  </div>
  <div class="shadow"></div>
</div>
</div>

<!--居中内容-->
<div class="r_content">	
	<div class="con p_r flex">
	 <!--你的名字-->   
	<div class="name flex flex-align-center flex-pack-center OPPOSans-M p_r" id="one_part">
	孤客
	<div class="tips te_c OPPOSans-B transition"><span class="p_r c1">455px</span></div>
	</div>
	
	<!--小部件-GIF-->
	<div class="flex flex-align-center flex-pack-center iphone"><img src="images/icon_APP.gif"></div>
	<div class="flex flex-align-center flex-pack-center web"><img src="images/icon_WEB.gif"></div>
	<div class="flex flex-align-center flex-pack-center vr"><img src="images/icon_VR.gif"></div>
	</div>
	
	<!--个人定位-->
    <div class="p_r flex con1">
	<div class="txt_box p_r">
	<div class="txt_con p_r flex">
	<div class="ui flex flex-align-center flex-pack-center p_r OPPOSans-M flex-1" id="two_part">
	前端爱好者
	<div class="tips transition te_c OPPOSans-B transition flex flex-align-center flex-pack-center">
	<span class="p_r">127px</span>
	</div>
	</div>
	
	<!--小部件-音乐-->
    <div class="wx flex flex-align-center flex-pack-center p_r" id="three_part">
    <audio src="https://m8.music.126.net/20211103183235/79c21ea30480cb2566d5bd8709ef4fc5/ymusic/3b1d/91a2/887d/e4830ab3e11f0421964838effd3c6bfd.mp3" controls="controls" preload id="music1" hidden>
    </audio>
    <span class="holder" id="bf" onclick="bf();">Music</span>
    <div class="tips te_c OPPOSans-B transition">
	<span class="p_r c2">70px</span>
	</div>
	</div>
	</div>
	
	<!--个人简介-->
	<div class="text OPPOSans-M p_r transition" id="four_part">
	<span class="p_r di_in">2024年，秋 我终究还是没能改掉这个毛病</span>
	</div>
	</div>
	
	<!--个人头像-->
	<div class="pic flex flex-align-center flex-pack-center " id="five_part">
	    <img src="https://pic.rmb.bdstatic.com/bjh/240417/de28c7642c0f00188b630295c39a5bf29218.jpeg" >
	</div>
	                          <!--触发器-->
					<div class="focus p_r OPPOSans-M">
						<div class="txt" style="display: block;" id="default">
							position: <span class="c1">absolute</span>;<br>
							width: <span class="c2">0px</span>;<br>
							height: <span class="c2">0px</span>;<br>
							left: <span class="c2">0px</span>;<br>
							top: <span class="c2">0px</span>;<br>
							font-family: <span class="c1">OPPOSans</span>;<br>
							font-style: <span class="c1">normal</span>;<br>
							font-weight: <span class="c2">0</span>;<br>
							font-size: <span class="c2">0px</span>;<br>
							line-height: <span class="c2">0px</span>;
						</div>
						<div class="txt" id="one">
							position: <span class="c1">absolute</span>;<br>
							width: <span class="c2">357px</span>;<br>
							height: <span class="c2">157px</span>;<br>
							left: <span class="c2">336px</span>;<br>
							top: <span class="c2">101px</span>;<br>
							font-family: <span class="c1">OPPOSans</span>;<br>
							font-style: <span class="c2">normal</span>;<br>
							font-weight: <span class="c2">500</span>;<br>
							font-size: <span class="c2">119px</span>;<br>
							line-height: <span class="c2">157px</span>
						</div>
						<div class="txt" id="two">
							position: <span class="c1">absolute</span>;<br>
							width: <span class="c2">194px</span>;<br>
							height: <span class="c2">63px</span>;<br>
							left: <span class="c2">336px</span>;<br>
							top: <span class="c2">312px</span>;<br>
							font-family: <span class="c1">OPPOSans</span>;<br>
							font-style: <span class="c1">normal</span>;<br>
							font-weight: <span class="c2">500</span>;<br>
							font-size: <span class="c2">48px</span>;<br>
							line-height: <span class="c2">63px</span>;
						</div>
						<div class="txt" id="three">
							position: <span class="c1">absolute</span>;<br>
							width: <span class="c2">78px</span>;<br>
							height: <span class="c2">58px</span>;<br>
							left: <span class="c2">621px</span>;<br>
							top: <span class="c2">315px</span>;<br>
							Wechat: <span class="c1">Joreking8</span>;
						</div>
						<div class="txt" id="four">
							position: <span class="c1">absolute</span>;<br>
							width: <span class="c2">375px</span>;<br>
							height: <span class="c2">75px</span>;<br>
							left: <span class="c2">336px</span>;<br>
							top: <span class="c2">439px</span>;<br>
							font-family: <span class="c1">OPPOSans</span>;<br>
							font-style: <span class="c2">normal</span>;<br>
							font-weight: <span class="c2">500</span>;<br>
							font-size: <span class="c2">16px</span>;<br>
							line-height: <span class="c2">149.1%</span>;
						</div>
<!--头像触发器-->						
<div class="txt" id="five">
	<br>
	孑然一身~
	<br>
	<br>
	╭∞━━━╮.oO◎
	<br>
	┃  ┃
	<br>
	┃● ●┃
	<br>
	┃﹋  ε  ﹋ ┃
	<br>
	○━━━━╯
</div>
</div>

<!--右侧内容-->
<div class="works p_r OPPOSans-M">
<div class="txt">
具备Windows、Linux开关机操作，翻墙学习日外语言能力、白嫖熟练度100%，有较强的前端剽窃经验。
</div>
<div class="lock transition p_r">
<input type="text" id="code" value="" placeholder="请输入提取码" class="OPPOSans-M"/>
<div class="error" id="code_error">提取码错误</div>
</div>
<div class="submit" id="btn">
<a href="javascript:void(0);" class="di_bl te_c my">秘密入口:119</a>
<a href="http://www.baidu.com" id="down" class="di_bl te_c down">前往</a>
</div>
</div>
</div>

<!--下方内容-->
<div class="p_r tool_content flex flex-align-center">
<div class="sns flex ">
<div class="flex-center">
<!--小部件-微信-->
<i class="fa fa-weixin fa-siz icon-3d wx p_r transition">
    <div class="erwma transition"><img src="images/vx.png"></div>
</i>
<!--小部件-邮箱-->                        
<a href="javascript:void(0);" class="di_bl copy" data-clipboard-action="copy" data-clipboard-target="#foo" id="mail">		
<i class="fa fa-envelope-o fa-siz icon-3d mail p_r">
    <div class="copytxt te_c OPPOSans-M transition" id="copyed">已复制</div>
    <input id="foo" type="text" value="Zboy@qq.com">
</i></a>
<!--小部件-其他-->
<a href="" target="_blank"><i class="fa fa-github fa-siz icon-3d"></i></a>
<a href="" target="_blank"><i class="fa fa-qq fa-siz icon-3d"></i></a>
<a href="" target="_blank"><i class="fa fa-telegram fa-siz icon-3d"></i></a>
<a href="" target="_blank"><i class="fa fa-weibo fa-siz icon-3d"></i></a>
</div>
</div>
<div class="text OPPOSans-M">然后知生于忧患而死于安乐<br>
<p>Then know born in sorrow died in peace and happiness</p>
</div>
</div>
</div>
</div>

<!--翻页内容-->		
<div class="warp" id="content">
<div class="txt OPPOSans-R">兴趣使然做的一些小东西</div>
<ul class="flex flex-warp">
    <li class="transition">
        <div class="icon">
            <a href="http://www.baidu.com" target="_blank"><img src="https://pic.rmb.bdstatic.com/bjh/240417/de28c7642c0f00188b630295c39a5bf29218.jpeg" ></a>
        </div>
            <h3 class="OPPOSans-M ellipsis"><a href="http://www.baidu.com" target="_blank">Zboy</a></h3>
            <p class="OPPOSans-M ellipsis">前端爱好者的个人主页</p>
    </li>
</ul>
<style>

</style>
<canvas id="background"></canvas>
</div>
</div>
</div>

<script src="js/jquery.SuperSlide.2.1.1.js"></script>
<script>jQuery(".slideTxtBox").slide({});</script>
<!-- 滑动效果 -->
<script src="js/jquery.movebg.js"></script>
<script>
$(function(){
	$(".link").movebg({width:125/*滑块的大小*/,extra:40/*额外反弹的距离*/,speed:300/*滑块移动的速度*/,rebound_speed:400/*滑块反弹的速度*/});
})
</script>
<link rel="stylesheet" type="text/css" href="css/font.css"/>
<script src="js/clipboard.min.js"></script>
<script>//复制
	var clipboard = new Clipboard('.copy');
	clipboard.on('success', function(e) {
		console.log(e);
	});
	clipboard.on('error', function(e) {
		console.log(e);
	});
	$('#mail').click(function(){
		$('#copyed').css('opacity',1)
			setTimeout(function(){
			$('#copyed').css('opacity',0)
		},2000)
	})
	$('#one_part,#two_part,#three_part,#four_part,#five_part').hover(function(){
		var that = $(this)
		var target = that.attr('id').replace('_part','')
		$('.focus .txt').hide()
		$('#'+target).show()
	},function(){
		$('.focus .txt').hide()
		$('#default').show()
	})
	$('#code').focus(function(){
		$('#code').attr('placeholder','请输入提取码')
		$('#code_error').hide()
	})
	$('#down').click(function(){
		var that = $(this)
		var code = $('#code').val();
		if(code != '123'){ //提取码
			$('#code').attr('placeholder','').val('')
			$('#code_error').show()
			return false;
		}
		that.attr('href','http://www.baidu.com')//提取码成功跳转地址
		that.attr('target','_blank')
	})
</script>
<!-- 下载 -->
<script>
	const btn = document.querySelector("#btn");
	const item = document.querySelectorAll(".lock");
	let showCard = (event) => {
		btn.classList.toggle("is-rotate");
		for (var i = 0; i < item.length; i++) {
			item[i].classList.toggle(`on`);
		}
	}
	btn.addEventListener("click", showCard);
</script>
<!--音乐-->
<script>
function rbf(){
 var audio = document.getElementById('music1'); 
 audio.currentTime = 0;
}
function bf(){
 var audio = document.getElementById('music1'); 
 if(audio!==null){             
     alert(audio.paused);
  if(audio.paused)                     {                 
      audio.play('播放');  
  }else{
   audio.pause('暂停');
  }
 } 
}
   
</script>
<script>
try {
	if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {

	} else {

			var canvas = document.querySelector('canvas'),
				ctx = canvas.getContext('2d')
				canvas.width = window.innerWidth;
			canvas.height = window.innerHeight;
			ctx.lineWidth = .3;
			ctx.strokeStyle = (new Color(150)).style;

			var mousePosition = {
				x: 30 * canvas.width / 100,
				y: 30 * canvas.height / 100
			};

			var dots = {
				nb: 250,
				distance: 100,
				d_radius: 150,
				array: []
			};

			function colorValue(min) {
				return Math.floor(Math.random() * 255 + min);
			}

			function createColorStyle(r, g, b) {
				return 'rgba(' + r + ',' + g + ',' + b + ', 0.8)';
			}

			function mixComponents(comp1, weight1, comp2, weight2) {
				return (comp1 * weight1 + comp2 * weight2) / (weight1 + weight2);
			}

			function averageColorStyles(dot1, dot2) {
				var color1 = dot1.color,
					color2 = dot2.color;

				var r = mixComponents(color1.r, dot1.radius, color2.r, dot2.radius),
					g = mixComponents(color1.g, dot1.radius, color2.g, dot2.radius),
					b = mixComponents(color1.b, dot1.radius, color2.b, dot2.radius);
				return createColorStyle(Math.floor(r), Math.floor(g), Math.floor(b));
			}

			function Color(min) {
				min = min || 0;
				this.r = colorValue(min);
				this.g = colorValue(min);
				this.b = colorValue(min);
				this.style = createColorStyle(this.r, this.g, this.b);
			}

			function Dot() {
				this.x = Math.random() * canvas.width;
				this.y = Math.random() * canvas.height;

				this.vx = -.5 + Math.random();
				this.vy = -.5 + Math.random();

				this.radius = Math.random() * 2;

				this.color = new Color();
				console.log(this);
			}

			Dot.prototype = {
				draw: function() {
					ctx.beginPath();
					ctx.fillStyle = this.color.style;
					ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
					ctx.fill();
				}
			};

			function createDots() {
				for (i = 0; i < dots.nb; i++) {
					dots.array.push(new Dot());
				}
			}

			function moveDots() {
				for (i = 0; i < dots.nb; i++) {

					var dot = dots.array[i];

					if (dot.y < 0 || dot.y > canvas.height) {
						dot.vx = dot.vx;
						dot.vy = -dot.vy;
					} else if (dot.x < 0 || dot.x > canvas.width) {
						dot.vx = -dot.vx;
						dot.vy = dot.vy;
					}
					dot.x += dot.vx;
					dot.y += dot.vy;
				}
			}

			function connectDots() {
				for (i = 0; i < dots.nb; i++) {
					for (j = 0; j < dots.nb; j++) {
						i_dot = dots.array[i];
						j_dot = dots.array[j];

						if ((i_dot.x - j_dot.x) < dots.distance && (i_dot.y - j_dot.y) < dots.distance && (i_dot.x - j_dot.x) > -dots.distance && (i_dot.y - j_dot.y) > -dots.distance) {
							if ((i_dot.x - mousePosition.x) < dots.d_radius && (i_dot.y - mousePosition.y) < dots.d_radius && (i_dot.x - mousePosition.x) > -dots.d_radius && (i_dot.y - mousePosition.y) > -dots.d_radius) {
								ctx.beginPath();
								ctx.strokeStyle = averageColorStyles(i_dot, j_dot);
								ctx.moveTo(i_dot.x, i_dot.y);
								ctx.lineTo(j_dot.x, j_dot.y);
								ctx.stroke();
								ctx.closePath();
							}
						}
					}
				}
			}

			function drawDots() {
				for (i = 0; i < dots.nb; i++) {
					var dot = dots.array[i];
					dot.draw();
				}
			}

			function animateDots() {
				ctx.clearRect(0, 0, canvas.width, canvas.height);
				moveDots();
				//connectDots();
				drawDots();

				requestAnimationFrame(animateDots);
			}


			createDots();
			requestAnimationFrame(animateDots);

	}
} catch (e) {}
</script>
</body>
</html>

style.css

*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
ul,ol,dl,table,th,tr,td,input,textarea,li,a,div,span,em,i{margin: 0;padding: 0;	border: 0;}
img {margin: 0;padding: 0;	border: 0;}
li {list-style: none;}
/*全局样式*/
html,body {width: 100%;	margin: 0 auto;}
/*= 清除浮动=*/
.clear {clear: both;height: 0px;line-height: 0px;font-size: 0px;overflow: hidden;display: block;}
.clearfix:after {content: "";display: block;height: 0px;clear: both;visibility: hidden;font-size: 0px;}
:focus{outline:0}
a, button, input[type="button"], input[type="submit"], input[type="reset"]{cursor:pointer}
/* Hides from IE-mac \*/
* html .clearfix {height: 0%;}
/* End hide from IE-mac */
* + html .clearfix {min-height: 0%;}
/* 针对IE7 */
* + html .clearfix {min-height: 0%;}
.w100 {width: 100%;}
.fl {float: left;}
.fr {float: right;}
/*原文件配置*/
body {color: #FFF;background: #161616 ;font: 16px/30px 'Microsoft YaHei', arial, sans-serif;cursor: url('../images/icon_mouse.svg'), auto;}
a {color: #000;text-decoration: none;}
a:hover {color: #e69f0b;cursor:url('../images/icon_mouse2.svg'), auto;}
a {color: #000;text-decoration: none;}
a:hover {color: #e69f0b;}
/*块级转化*/
.di_in {display: inline-block;}
.di_bl {display: block;}
/*原文件配置  end*/

/*纵向居中*/
.v_middle {vertical-align: middle;}
/*横向居中*/
.te_c {text-align: center;}
/*相对定位*/
.p_r {position: relative;}
/* 白色背景 */
.bgfff {background: #fff;}
.flex {display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;}
.flex-v {-webkit-box-orient: vertical;-webkit-flex-direction: column;-ms-flex-direction: column;flex-direction: column;}
.flex-1 {-webkit-box-flex: 1;-webkit-flex: 1;-ms-flex: 1;flex: 1;}
.flex-align-center {-webkit-box-align: center;-webkit-align-items: center;-ms-flex-align: center;align-items: center;}
.flex-pack-center {-webkit-box-pack: center;-webkit-justify-content: center;-ms-flex-pack: center;justify-content: center;}
.flex-pack-justify {-webkit-box-pack: justify;-webkit-justify-content: pace-between;-ms-flex-pack: justify;justify-content: space-between;}
.flex-warp{flex-flow: wrap}
.flex-column{flex-flow: column}
.ellipsis{overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.transition{-webkit-transition: all .5s; -moz-transition: all .5s;-ms-transition: all .5s;-o-transition: all .5s;transition: all .5s}
.img_hover{transition: all .3s;}
.img_hover:hover{transform: scale(1.05,1.05);}
/*全局样式 start*/
.container{width: 100%;height: 100vh;color: #FFF;}
.header{padding: 45px 140px;border-bottom: 1px #262626 dashed;}
.header .user-info .portrait{width: 45px;height: 45px;border: 2px #FFF solid;overflow: hidden;border-radius: 50%;margin-right: 15px;}
.header .user-info .portrait img{width: 100%;}
.header .user-info .name{text-transform: uppercase;font-size: 26px;}
.header .link{height: 44px;line-height: 44px;font-size: 21px;}
.header .link li {width: 125px;border-radius: 22px;z-index: 2;}
.header .link li a{color: #C2C2C2;width: 100%;}
.header .link li.cur{}
.header .link li.cur a{color: #000;} 
.header .link a.cur{background-color: #FFF;color: #000;}

.move-bg{position: absolute;background-color: #FFF;color: #000;left: 0;width: 125px;border-radius: 22px;height: 44px;display: none;top: 0;z-index: 1;}
/*全局样式 end*/
.warp{padding: 45px 140px;}
.warp .txt{font-size: 20px;line-height: 1.5;margin-top: 45px;}
.warp ul{margin-top: 20px;padding-bottom: 50px;}
.warp li{border-radius: 10px;background: #202020;border: 1px solid #28292a;width: calc(20% - 2%);height: 180px;margin-right: 2%;margin-top: 40px;padding:30px 40px;overflow: hidden;}
.warp li .icon{width: 54px;height: 54px;border: 1px solid #28292a;}
.warp li .icon img{width: 54px;height: 54px;border-radius: 5px;}
.warp li h3{margin-bottom: 0;font-weight: normal;font-size: 20px;color: #FFF;line-height: 1.5;margin-top: 10px;;}
.warp li h3 a{color: #FFF;}
.warp li p{margin: 0;font-size: 14px;color: #7a7a7b;}
.warp li:hover{margin-top: 10px;}
.c1{color: #30C78C;}
.c2{color: #ED8949;}

.content{padding: 45px 140px;height: calc(100vh - 136px);color: #FFF;}
.content .en_box{position: absolute;left: 0;top: 0;height: 100%;border-right: 1px #262626 dashed;width: 22%;}
.content .en{font-size: 112px;line-height: 1;text-transform: uppercase;transform:rotate(90deg);-ms-transform:rotate(90deg);-moz-transform:rotate(90deg);-webkit-transform:rotate(90deg);-o-transform:rotate(90deg);margin-bottom: 10vh;}
.content .en span{color: #5D24E4;margin:0 15px;}
.content .r_content{position: absolute;right: 0;top: 0;height: 100%;width: 78%;}
.content .r_content .con{height: 26vh;}
.content .r_content .con::after{content: '';position: absolute;left: -1vw;border-bottom: 1px #262626 dashed;right: 0;height: 1px;bottom: 0;}
.content .r_content .name{font-size: 158px;width: 30vw;}
.content .r_content .name .tips{font-size: 19px;position: absolute;left: 4px;right: 4px;bottom: -5px;z-index: 1;opacity: 0;}
.content .r_content .name:hover .tips{opacity: 1;bottom: 5px;}
.content .r_content .name .tips::after{content: '';position: absolute;left: 0;height: 70%;width: 1px;background-color: #FFF;transform: translateY(-50%);top: 50%;}
.content .r_content .name .tips::before{content: '';position: absolute;right: 0;height: 70%;width: 1px;background-color: #FFF;transform: translateY(-50%);top: 50%;}
.content .r_content .name .tips span::after{content: '';position: absolute;left: -12.4vw;height: 1px;width: 10.2vw;background-color: #FFF;transform: translateY(-50%);top: 50%;}
.content .r_content .name .tips span::before{content: '';position: absolute;right: -12.4vw;height: 1px;width: 10.2vw;background-color: #FFF;transform: translateY(-50%);top: 50%;}
.content .r_content .iphone{border-left: 1px #262626 dashed;width: 15vw;}
.content .r_content .iphone img{max-width: 90%;}
.content .r_content .web{border-left: 1px #262626 dashed;width: 15.1vw;}
.content .r_content .web img{max-width: 90%;}
.content .r_content .vr{border-left: 1px #262626 dashed;width: 17vw;}
.content .r_content .vr img{max-width: 90%;}

.content .r_content .con1{height: 35vh;}
.content .r_content .con1::after{content: '';position: absolute;left: -1vw;border-bottom: 1px #262626 dashed;right: 0;height: 1px;bottom: 0;}
.content .r_content .con1 .txt_box{width: 30vw;}
.content .r_content .con1 .txt_box::after{content: '';position: absolute;right: 0;top: 0;bottom: -2vh;width: 1px;border-right: 1px #262626 dashed;}
.content .r_content .con1 .txt_box .txt_con{width: 100%;height: 16.5vh;}
.content .r_content .con1 .txt_box .txt_con::after{content: '';position: absolute;left: -1vw;border-bottom: 1px #262626 dashed;right: 0;height: 1px;bottom: 0;}
.content .r_content .con1 .pic{width: 15vw;overflow: hidden;}
.content .r_content .con1 .pic img{height: 100%;width: 100%;}
.content .r_content .con1 .ui{font-size: 64px;border-right: 1px #262626 dashed;}
.content .r_content .con1 .ui .tips{color: #5D24E4;font-size: 18px;position: absolute;right: -15px;bottom: 0;z-index: 1;opacity: 0;top: 0;width: 30px;}
.content .r_content .con1 .ui:hover .tips{opacity: 1;right: 5px;}
.content .r_content .con1 .ui .tips span{transform:rotate(90deg);-ms-transform:rotate(90deg);-moz-transform:rotate(90deg);-webkit-transform:rotate(90deg);-o-transform:rotate(90deg);position: absolute;}
.content .r_content .con1 .ui .tips::after{content: '';position: absolute;left: 50%;height: 1px;width: 60%;background-color: #FFF;transform: translateX(-50%);top: 0;}
.content .r_content .con1 .ui .tips::before{content: '';position: absolute;left: 50%;height: 1px;width: 60%;background-color: #FFF;transform: translateX(-50%);bottom: 0;}
.content .r_content .con1 .ui .tips span::after{content: '';position: absolute;left: -2.2vw;height: 1px;width: 2vw;background-color: #FFF;transform: translateY(-50%);top: 50%;}
.content .r_content .con1 .ui .tips span::before{content: '';position: absolute;right: -2.2vw;height: 1px;width: 2vw;background-color: #FFF;transform: translateY(-50%);top: 50%;}
.content .r_content .con1 .wx{width: 11vw;}
.content .r_content .con1 .wx img{width: 4vw;}
.content .r_content .con1 .wx .tips{font-size: 18px;position: absolute;left: 4px;right: 4px;bottom: -10px;z-index: 1;opacity: 0;}
.content .r_content .con1 .wx:hover .tips{opacity: 1;bottom: 5px;}
.content .r_content .con1 .wx .tips::after{content: '';position: absolute;left: 0;height: 60%;width: 1px;background-color: #FFF;transform: translateY(-50%);top: 50%;}
.content .r_content .con1 .wx .tips::before{content: '';position: absolute;right: 0;height: 60%;width: 1px;background-color: #FFF;transform: translateY(-50%);top: 50%;}
.content .r_content .con1 .wx .tips span::after{content: '';position: absolute;left: -3.8vw;height: 1px;width: 3vw;background-color: #FFF;transform: translateY(-50%);top: 50%;}
.content .r_content .con1 .wx .tips span::before{content: '';position: absolute;right: -3.8vw;height: 1px;width:3vw;background-color: #FFF;transform: translateY(-50%);top: 50%;}
.content .r_content .con1 .text{line-height: 1.5;font-size: 20px;padding: 3vh 3vw;}
.content .r_content .con1 .text span{padding-top: 0.8vh;}
.content .r_content .con1 .text::after{content: '';position: absolute;left: 1.2vw;right: 1.2vw;top: 2.8vh;bottom: 2vh;border-top: 1px #ff9850 dashed;border-bottom: 1px #ff9850 dashed;opacity: 0;-webkit-transition: all .5s; -moz-transition: all .5s;-ms-transition: all .5s;-o-transition: all .5s;transition: all .5s}
.content .r_content .con1 .text::before{content: '';position: absolute;left: 2vw;right: 2vw;top: 1.3vh;bottom: 0.5vh;border-left: 1px #ff9850 dashed;border-right: 1px #ff9850 dashed;opacity: 0;-webkit-transition: all .5s; -moz-transition: all .5s;-ms-transition: all .5s;-o-transition: all .5s;transition: all .5s}
.content .r_content .con1 .text:hover::after,.content .r_content .con1 .text:hover::before{opacity: 1;-webkit-transition: all .5s; -moz-transition: all .5s;-ms-transition: all .5s;-o-transition: all .5s;transition: all .5s}
.content .r_content .con1 .focus{width: 15vw;line-height: 1.5;padding: 1.6vh 0 0 1.5vw;font-size: 18px;}
.content .r_content .con1 .focus::after{content: '';position: absolute;left: 0;top: 0;bottom: -2vh;width: 1px;border-right: 1px #262626 dashed;}
.content .r_content .con1 .focus .txt{display: none;}

/* 作品下载 */
.content .r_content .con1 .works{width: 15vw;padding: 1.6vh 2vw 0 2vw;}
.content .r_content .con1 .works::after{content: '';position: absolute;left: 0;top: 0;bottom: -2vh;width: 1px;border-right: 1px #262626 dashed;}
.content .r_content .con1 .works .txt{font-size: 18px;line-height: 1.5;text-align: justify;}
.content .r_content .con1 .works a{color: #FFF;}
.content .r_content .con1 .works .submit{height: 44px;line-height: 44px;background-color: #5D24E4;color: #FFF;font-size: 24px;margin-top: 2vh;}
.content .r_content .con1 .works .submit:hover{background-color: #30C78C;}
.content .r_content .con1 .works .submit .down{display: none;}
.content .r_content .con1 .works .submit.is-rotate .down{display: block;}
.content .r_content .con1 .works .submit.is-rotate .my{display: none;}
.content .r_content .con1 .works .lock{margin-top: 10px;opacity: 0;}
.content .r_content .con1 .works .lock.on{opacity: 1;}
.error{color:#FF4B4B;position: absolute;left: 2.5vw;top: 0;line-height: 40px;display: none}


/* 底部 */
.content .r_content .tool_content{padding: 2vh 2vw;height: 18vh;}
.content .r_content .tool_content::after{content: '';position: absolute;left: -1vw;border-bottom: 1px #262626 dashed;right: 0;height: 1px;bottom: 0;}
.content .r_content .tool_content .text{position: absolute;right: 4vw;bottom: 10px;text-align: right;font-size: 20px;}
.content .r_content .tool_content .text p{margin: 0;font-size: 18px;}
.content .r_content .tool_content .sns .wx .erwma{width: 64px;height: 64px;position: absolute;bottom: 24px;left: 50%;transform: translateX(-50%);opacity: 0;}
.content .r_content .tool_content .sns .wx .erwma img{width: 100%;}
.content .r_content .tool_content .sns .wx:hover .erwma{opacity: 1;bottom: 34px;}
.content .r_content .tool_content .sns .figma{background: url(../images/icon_figma.svg)no-repeat center;background-size: 100%;margin-left: 2vw;}
.content .r_content .tool_content .sns .figma:hover{background: url(../images/icon_figma_hover.svg)no-repeat center;}
.content .r_content .con1 .works .lock input {background: #212121 url(../images/lock.svg)no-repeat 0.8vw center;padding-left: 2.5vw;width: 100%;height: 40px;background-size: 22px;color: #FFF;}
.content .r_content .tool_content .sns .mail span{width: 100%;height: 24px;}
.content .r_content .tool_content .sns .mail .copytxt{opacity: 0;position: absolute;left: 50%;transform: translateX(-50%);background-color: #FFF;color: #000;border-radius: 5px;padding: 2px 0px;bottom: 30px;width: 60px;font-size: 14px;}
.content .r_content .tool_content .sns .mail input{opacity: 0;width: 5px;height: 5px;position: absolute;left: 0;z-index: 0;top: 0}

/*icon*/
.flex-center {
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.icon-3d {
  padding: 10px;
  -webkit-animation: icon3d 200ms 10;
  animation: icon3d 200ms 10;
  color: #b1b1b1;
}
.icon-3d:hover {
  -webkit-animation: icon3d 200ms infinite;
  animation: icon3d 200ms infinite;
}
.fa-siz {
    font-size: 2em;
    margin-left: 1vw;
    
}
@keyframes icon3d {
  0% {
    text-shadow: 5px 4px #0a29c0, -5px -6px #e50404;
  }
  25% {
    text-shadow: -5px -6px #0a29c0, 5px 4px #e50404;
  }
  50% {
    text-shadow: 5px -4px #0a29c0, -8px 4px #e50404;
  }
  75% {
    text-shadow: -8px -4px #0a29c0, -5px -4px #e50404;
  }
  100% {
    text-shadow: -5px 0 #0a29c0, 5px -4px #e50404;
  }
}
/*MacBook Air*/
.macbook {
  width: 150px;
  height: 96px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -75px 0 0 -48px;
  perspective: 500px;
}
.shadow {
  position: absolute;
  width: 60px;
  height: 0px;
  left: 40px;
  top: 160px;
  transform: rotateX(80deg) rotateY(0deg) rotateZ(0deg);
  box-shadow: 0 0 60px 40px rgba(0,0,0,0.3);
  animation: shadow infinite 7s ease;
}
.inner {
  z-index: 20;
  position: absolute;
  width: 150px;
  height: 96px;
  left: 0;
  top: 0;
  transform-style: preserve-3d;
  transform:rotateX(-20deg) rotateY(0deg) rotateZ(0deg);
  animation: rotate infinite 7s ease;
}
.screen {
  width: 150px;
  height: 96px;
  position: absolute;
  left: 0;
  bottom: 0;
  border-radius: 7px;
  background: #ddd;
  transform-style: preserve-3d;
  transform-origin: 50% 93px;
  transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  animation: lid-screen infinite 7s ease;
  background-image: linear-gradient(45deg, rgba(0,0,0,0.34) 0%,rgba(0,0,0,0) 100%);
  background-position: left bottom;
  background-size: 300px 300px;
  box-shadow: inset 0 3px 7px rgba(255,255,255,0.5);
}
.screen .logo {
  position: absolute;
  width: 20px;
  height: 24px;
  left: 50%;
  top: 50%;
  margin: -12px 0 0 -10px;
  transform: rotateY(180deg) translateZ(0.1px);
}
.screen .face-one {
  width: 150px;
  height: 96px;
  position: absolute;
  left: 0;
  bottom: 0;
  border-radius: 7px;
  background: #d3d3d3;
  transform: translateZ(2px);
  background-image: linear-gradient(45deg,rgba(0,0,0,0.24) 0%,rgba(0,0,0,0) 100%);
}
.screen .face-one .camera {
  width: 3px;
  height: 3px;
  border-radius: 100%;
  background: #000;
  position: absolute;
  left: 50%;
  top: 4px;
  margin-left: -1.5px;
}
.screen .face-one .display {
  width: 130px;
  height: 74px;
  margin: 10px;
  background: url("") no-repeat center center #000;
  background-size: 100% 100%;
  border-radius: 1px;
  position: relative;
  box-shadow: inset 0 0 2px rgba(0,0,0,1);
}
.screen .face-one .display .shade {
  position: absolute;
  left: 0;
  top: 0;
  width: 130px;
  height: 74px;
  background: linear-gradient(-135deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0.1) 47%,rgba(255,255,255,0) 48%);
  animation: screen-shade infinite 7s ease;
  background-size: 300px 200px;
  background-position: 0px 0px;
}
.screen .face-one span {
  position: absolute;
  top: 85px;
  left: 57px;
  font-size: 6px;
  color: #666
}

.body {
  width: 150px;
  height: 96px;
  position: absolute;
  left: 0;
  bottom: 0;
  border-radius: 7px;
  background: #cbcbcb;
  transform-style: preserve-3d;
  transform-origin: 50% bottom;
  transform: rotateX(-90deg);
  animation: lid-body infinite 7s ease;
  background-image: linear-gradient(45deg, rgba(0,0,0,0.24) 0%,rgba(0,0,0,0) 100%);
}
.body .face-one {
  width: 150px;
  height: 96px;
  position: absolute;
  left: 0;
  bottom: 0;
  border-radius: 7px;
  transform-style: preserve-3d;
  background: #dfdfdf;
  animation: lid-keyboard-area infinite 7s ease;
  transform: translateZ(-2px);
  background-image: linear-gradient(30deg, rgba(0,0,0,0.24) 0%,rgba(0,0,0,0) 100%);
}
.body .touchpad {
  width: 40px;
  height: 31px;
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 4px;
  margin: -44px 0 0 -18px;
  background: #cdcdcd;
  background-image: linear-gradient(30deg, rgba(0,0,0,0.24) 0%,rgba(0,0,0,0) 100%);
  box-shadow: inset 0 0 3px #888;
}
.body .keyboard {
width: 130px;
height: 45px;
position: absolute;
left: 7px;
top: 41px;
border-radius: 4px;
transform-style: preserve-3d;
background: #cdcdcd;
background-image: linear-gradient(30deg, rgba(0,0,0,0.24) 0%,rgba(0,0,0,0) 100%);
box-shadow: inset 0 0 3px #777;
padding: 0 0 0 2px;
}
.keyboard .key {
  width: 6px;
  height: 6px;
  background: #444;
  float: left;
  margin: 1px;
  transform: translateZ(-2px);
  border-radius: 2px;
  box-shadow: 0 -2px 0 #222;
  animation: keys infinite 7s ease;
}
.key.space {
  width: 45px;
}
.key.f {
  height: 3px;
}
.body .pad {
  width: 5px;
  height: 5px;
  background: #333;
  border-radius: 100%;
  position: absolute;
}
.pad.one {
  left: 20px;
  top: 20px;
}
.pad.two {
  right: 20px;
  top: 20px;
}
.pad.three {
  right: 20px;
  bottom: 20px;
}
.pad.four {
  left: 20px;
  bottom: 20px;
}

@keyframes rotate {
  0% {
    transform: rotateX(-20deg) rotateY(0deg) rotateZ(0deg);
  }
  5% {
    transform: rotateX(-20deg) rotateY(-20deg) rotateZ(0deg);
  }
  20% {
    transform: rotateX(30deg) rotateY(200deg) rotateZ(0deg);
  }
  25% {
    transform: rotateX(-60deg) rotateY(150deg) rotateZ(0deg);
  }
  60% {
    transform: rotateX(-20deg) rotateY(130deg) rotateZ(0deg);
  }
  65% {
    transform: rotateX(-20deg) rotateY(120deg) rotateZ(0deg);
  }
  80% {
    transform: rotateX(-20deg) rotateY(375deg) rotateZ(0deg);
  }
  85% {
    transform: rotateX(-20deg) rotateY(357deg) rotateZ(0deg);
  }
  87% {
    transform: rotateX(-20deg) rotateY(360deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(-20deg) rotateY(360deg) rotateZ(0deg);
  }
}

@keyframes lid-screen {
  0% {
    transform: rotateX(0deg);
    background-position: left bottom;
  }
  5% {
    transform: rotateX(50deg);
    background-position: left bottom;
  }
  20% {
    transform: rotateX(-90deg);
    background-position: -150px top;
  }
  25% {
    transform: rotateX(15deg);
    background-position: left bottom;
  }
  30% {
    transform: rotateX(-5deg);
    background-position: right top;
  }
  38% {
    transform: rotateX(5deg);
    background-position: right top;
  }
  48% {
    transform: rotateX(0deg);
    background-position: right top;
  }
  90% {
    transform: rotateX(0deg);
    background-position: right top;
  }
  100% {
    transform: rotateX(0deg);
    background-position: right center;
  }
}

@keyframes lid-body {
  0% {
    transform: rotateX(-90deg);
    
  }
  50% {
    transform: rotateX(-90deg);
    
  }
  100% {
    transform: rotateX(-90deg);
    
  }
}

@keyframes lid-keyboard-area {
  0% {
     background-color: #dfdfdf;
  }
  50% {
    background-color: #bbb;
  }
  100% {
    background-color: #dfdfdf;
  }
}
@keyframes screen-shade {
  0% {
    background-position: -20px 0px;
  }
  5% {
    background-position: -40px 0px;
  }
  20% {
    background-position: 200px 0;
  }
  50% {
    background-position: -200px 0;
  }
  80% {
    background-position: 0px 0px;
  }
  85% {
    background-position: -30px 0;
  }
  90% {
    background-position: -20px 0;
  }
  100% {
    background-position: -20px 0px;
  }
}
@keyframes keys {
  0% {
    box-shadow: 0 -2px 0 #222;
  }
  5% {
    box-shadow: 1 -1px 0 #222;
  }
  20% {
    box-shadow: -1px 1px 0 #222;
  }
  25% {
    box-shadow: -1px 1px 0 #222;
  }
  60% {
    box-shadow: -1px 1px 0 #222;
  }
  80% {
    box-shadow: 0 -2px 0 #222;
  }
  85% {
    box-shadow: 0 -2px 0 #222;
  }
  87% {
    box-shadow: 0 -2px 0 #222;
  }
  100% {
    box-shadow: 0 -2px 0 #222;
  }
}
@keyframes shadow {
  0% {
    transform: rotateX(80deg) rotateY(0deg) rotateZ(0deg);
    box-shadow: 0 0 60px 40px rgba(0,0,0,0.3);
  }
  5% {
    transform: rotateX(80deg) rotateY(10deg) rotateZ(0deg);
    box-shadow: 0 0 60px 40px rgba(0,0,0,0.3);
  }
  20% {
    transform: rotateX(30deg) rotateY(-20deg) rotateZ(-20deg);
    box-shadow: 0 0 50px 30px rgba(0,0,0,0.3);
  }
  25% {
    transform: rotateX(80deg) rotateY(-20deg) rotateZ(50deg);
    box-shadow: 0 0 35px 15px rgba(0,0,0,0.1);
  }
  60% {
    transform: rotateX(80deg) rotateY(0deg) rotateZ(-50deg) translateX(30px);
    box-shadow: 0 0 60px 40px rgba(0,0,0,0.3);
  }
  100% {
    box-shadow: 0 0 60px 40px rgba(0,0,0,0.3);
  }
}
/*Music*/
.holder{
  color: #60b044;
}
/*翻页渲染*/
#background {
    z-index: -1;
    position: fixed;
    left: 0;
	width: 100%;
	height: 100%;
}
@media (max-width: 1921px) {
	/*修改1441以下、小屏显示器*/
	.header{padding: 35px 90px 35px 105px;}
	.warp{padding: 0px 105px}
	.content{padding: 0px 105px;height: calc(100vh - 116px);}
	.warp li{height: 160px;padding:20px 30px;margin-top: 30px;}
	.content .r_content .name{font-size: 138px;}
	.content .r_content .con1 .ui{font-size: 54px;}
	.content .r_content .con1 .text{font-size: 18px;}
	.content .r_content .con1 .works .submit{font-size: 22px;}
}

@media (max-width: 1681px) {
	/*修改1441以下、小屏显示器*/
	.header{padding: 30px 70px 25px 90px;}
	.warp{padding: 0px 90px}
	.content{padding: 0px 90px;height: calc(100vh - 106px);}
	.content .en{font-size: 100px;}
	.content .r_content .name{font-size: 128px;}
	.content .r_content .con1 .ui{font-size: 42px;}
	.content .r_content .con1 .text,.content .r_content .con1 .works .txt{font-size: 16px;}
	.content .r_content .con1 .works .submit{font-size: 20px;}
	.content .r_content .tool_content .text{font-size: 18px;}
	.content .r_content .tool_content .text p{font-size: 16px;}
	
}

@media (max-width: 1441px) {
	/*修改1441以下、小屏显示器*/
	.header{padding: 25px 65px 25px 75px;}
	.header .user-info .portrait{height: 34px;width: 34px;}
	.header .user-info .name{font-size: 20px;}
	.header .link{font-size: 16px;height: 34px;line-height: 34px;}
	.move-bg{height: 34px;}
	.warp{padding: 0px 75px}
	.content{padding: 0px 75px;height: calc(100vh - 96px);}
	.warp li{width: calc(25% - 2%);margin-top: 20px;}
	.content .en_box{width: 20%;}
	.content .r_content{width: 80%;}
	.content .en{font-size: 90px;}
	.content .r_content .name{font-size: 118px;}
	.content .r_content .con1 .ui .tips,.content .r_content .con1 .wx .tips,.content .r_content .name .tips{font-size: 16px;}
	.content .r_content .con1 .focus{font-size: 16px;}
	.content .r_content .con1 .works .txt{font-size: 14px;}
	.content .r_content .con1 .works .submit{font-size: 16px;}
	.content .r_content .tool_content .text{font-size: 16px;}
	.content .r_content .tool_content .text p{font-size: 14px;}
	.content .r_content .name .tips span::after,.content .r_content .name .tips span::before{width: 12vw;}
	.content .r_content .name .tips span::after{left: -13vw;}
	.content .r_content .name .tips span::before{right: -13vw;}
	.content .r_content .vr{width: 17vw;}
	.content .r_content .con1 .works{width: 16vw;}
}


@media (max-width: 1367px) {
	/*修改1441以下、小屏显示器*/
	.header{padding: 20px 40px 20px 70px;}
	.warp{padding: 0px 70px}
	.content{padding: 0px 70px;height: calc(100vh - 86px);}
	.content .en{font-size: 80px;}
	.content .r_content .name{font-size: 88px;}
	.content .r_content .con1 .ui .tips,.content .r_content .con1 .wx .tips,.content .r_content .name .tips{font-size: 14px;}
	.content .r_content .con1 .focus{font-size: 14px;}
	.content .r_content .vr{width: 18.5vw;}
	.content .r_content .con1 .works{width: 16.5vw;}
}

@media (max-width: 1281px) {
	/*修改1441以下、小屏显示器*/
	.header{padding: 20px 65px;}
	.warp{padding: 0px 65px}
	.content{padding: 0px 65px;height: calc(100vh - 86px);}
	.content .r_content .name{font-size: 98px;}
	.content .r_content .con1 .text{font-size: 14px;}
	.content .r_content .name .tips span::after,.content .r_content .name .tips span::before{width: 12vw;}
	.content .r_content .name .tips span::after{left: -12.8vw;}
	.content .r_content .name .tips span::before{right: -12.8vw;}
	
}

源码领取

动态酷黑主页源码

  • 📢博客主页：孤客网络科技工作室官方账号
  • 📢欢迎点赞👍收藏⭐️留言 📝如有错误敬请指正！
  • 📢本文由孤客原创，若侵权联系作者，首发于CSDN博客
  • 📢停下休息的时候不要忘了别人还在奔跑，希望大家抓紧时间学习，全力奔赴更好的生活💻

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

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

相关文章

java算法day58 | 单调栈part01 ● 739. 每日温度 ● 496.下一个更大元素 I

java算法day58 | 单调栈part01 ● 739. 每日温度 ● 496.下一个更大元素 I

739. 每日温度 思路&#xff1a; 这道题用暴力求解法会超时。 那我们就要想如何只遍历一遍就能求解出每个位置的下一个更大值在哪呢。 主要的思想就是空间换时间。定义一个单调栈&#xff0c;每次遇到比栈顶元素小的或相等的&#xff0c;直接入栈&#xff0c;遇到比栈顶元素大的…
阅读更多...
电学启蒙积木电子方案

电学启蒙积木电子方案

东莞市酷得智能科技有限公司是一家集芯片贸易和电子方案定制开发的研发型公司&#xff0c;其中电子积木方案是酷得经营多年的其中一条比较成熟的研发线。电学积木玩具不仅仅是一种娱乐工具&#xff0c;更是一种教育工具&#xff0c;能够在孩子们的成长过程中发挥多方面的积极作…
阅读更多...
微信小程序开发五（与springboot整合）

微信小程序开发五（与springboot整合）

首先在微信开发者工具中开启不校验合法域名&#xff0c;这个才能本地访问 实现一个小功能&#xff1a; 展示数据信息&#xff0c;每条数据的颜色不一样 后端&#xff1a;springbootmybatisplusmysql 依赖&#xff1a; <dependency><groupId>com.baomidou</grou…
阅读更多...
代码学习记录45---单调栈

代码学习记录45---单调栈

随想录日记part45 t i m e &#xff1a; time&#xff1a; time&#xff1a; 2024.04.17 主要内容&#xff1a;今天开始要学习单调栈的相关知识了&#xff0c;今天的内容主要涉及&#xff1a;每日温度 &#xff1b;下一个更大元素 I 739. 每日温度 496.下一个更大元素 I Topic…
阅读更多...
powershell@命令行提示符样式配置自定义@pwsh重写prompt显示电量内存时间等信息

powershell@命令行提示符样式配置自定义@pwsh重写prompt显示电量内存时间等信息

文章目录 abstract流行的powershell prompt模块示例 powershell原生修改Prompt函数配置文档Prompt命令来自哪里 简单修改带上电量和时间的Prompt 复杂修改预览FAQ:没有必要修改相关仓库地址样式选择平衡样式花哨样式响应性能 小结 abstract 在 PowerShell 中&#xff0c;可以通…
阅读更多...
国家级项目管理高级认证：CSPM-4级（高级）重磅推出

国家级项目管理高级认证：CSPM-4级（高级）重磅推出

本周&#xff0c;圣略CSPM资深讲师老杨&#xff0c;赴北京参加CSPM-4级高级讲师培训&#xff0c;从现场带来第1手的资料&#xff0c;与大家分享&#xff1a; CSPM-4基本要求&#xff1a; 负责实现组织战略目标&#xff0c;以成果和收益为导向&#xff0c;需具备战略解析、收益…
阅读更多...
汇编语言学习笔记

汇编语言学习笔记

1、NOP指令&#xff1a;号称最安全的指令&#xff0c;全名为no Operation&#xff0c;一条nop指令占用一个字节&#xff0c;什么也不做。有时编译器会使用该指令将代码对齐到偶数地址边界&#xff08;类似于内存对齐&#xff09;。IA-32处理器从偶数双字地址处加载代码和数据时…
阅读更多...
【简单介绍下Beego框架】

【简单介绍下Beego框架】

&#x1f3a5;博主&#xff1a;程序员不想YY啊 &#x1f4ab;CSDN优质创作者&#xff0c;CSDN实力新星&#xff0c;CSDN博客专家 &#x1f917;点赞&#x1f388;收藏⭐再看&#x1f4ab;养成习惯 ✨希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出…
阅读更多...
等保合规：保护企业网络安全的必要性与优势

等保合规：保护企业网络安全的必要性与优势

前言 无论是多部网络安全法律法规的出台&#xff0c;还是最近的“滴滴被安全审查”事件&#xff0c;我们听得最多的一个词&#xff0c;就是“等保。” 只要你接触安全类工作&#xff0c;听得最多的一个词&#xff0c;一定是“等保。” 那么&#xff0c;到底什么是“等保”呢…
阅读更多...
c++初阶——类和对象(上)

c++初阶——类和对象(上)

大家好我是小锋今天我们来学习类和对象 面向过程和面向对象初步认识 C语言是面向过程的&#xff0c;关注的是过程&#xff0c;分析出求解问题的步骤&#xff0c;通过函数调用逐步解决问题。 C是基于面向对象的&#xff0c;关注的是对象&#xff0c;将一件事情拆分成不同的对…
阅读更多...
NASM中的-f选项

NASM中的-f选项

2024年4月19日&#xff0c;周五下午 -f选项 在 NASM 中&#xff0c;-f 选项用于指定输出格式或目标文件格式。这个选项允许你告诉 NASM 将汇编代码编译成特定格式的目标文件&#xff0c;以便与特定的操作系统或环境兼容。下面是 -f 选项的一些常见用法和参数&#xff1a; -f …
阅读更多...
✌粤嵌—2024/4/11—合并区间✌

✌粤嵌—2024/4/11—合并区间✌

代码实现&#xff1a; /*** Return an array of arrays of size *returnSize.* The sizes of the arrays are returned as *returnColumnSizes array.* Note: Both returned array and *columnSizes array must be malloced, assume caller calls free().*/// 交换 void swap(i…
阅读更多...
“开关是灯的日出日落，日出日落是灯的开关”

“开关是灯的日出日落，日出日落是灯的开关”

C语言刷题 day01 本篇是C语言刷题大杂烩&#xff0c;收集了笔者遇到的认为有价值的题目&#xff0c;本篇会持续更新~~ day01 至少是其他数字两倍的最大数 题目原文&#xff1a; 题意解析&#xff1a; 请你找出数组中的最大元素并检查它是否 至少是数组中每个其他数字的两倍 …
阅读更多...
【汇智知了堂来袭】西华师范大学鸿蒙专题讲座，共探HarmonyOS新机遇！

【汇智知了堂来袭】西华师范大学鸿蒙专题讲座，共探HarmonyOS新机遇！

在这个信息化的时代&#xff0c;我们身处一个日新月异、科技飞速发展的世界。随着信创国产化的步伐加快&#xff0c;万物互联的大时代已经悄然开启。作为科技前沿的探索者&#xff0c;汇智知了堂始终站在行业的前沿&#xff0c;紧跟时代的发展脉搏。我们在4月9日走进西华师范大…
阅读更多...
5. Django 探究CBV视图

5. Django 探究CBV视图

5. 探究CBV视图 Web开发是一项无聊而且单调的工作, 特别是在视图功能编写方面更为显著. 为了减少这种痛苦, Django植入了视图类这一功能, 该功能封装了视图开发常用的代码, 无须编写大量代码即可快速完成数据视图的开发, 这种以类的形式实现响应与请求处理称为CBV(Class Base…
阅读更多...
第一届AI Agent智能体现场开发大赛报名开启！8月上旬火热开赛~

第一届AI Agent智能体现场开发大赛报名开启！8月上旬火热开赛~

由联想拯救者、AIGC开放社区、英特尔携手主办的“AI生成未来第二届拯救者杯OPENAIGC开发者大赛”已经正式启动&#xff0c;“2024 AI Agent极限挑战赛”作为特设专项赛道&#xff0c;也将同步于8月上旬开赛&#xff0c;参赛者将在更加紧张刺激的现场比赛中展现其技术与创造力。…
阅读更多...
TypeScript 基础：接口、泛型和自定义类型在 Vue 3 中的应用

TypeScript 基础：接口、泛型和自定义类型在 Vue 3 中的应用

接口&#xff08;Interfaces&#xff09; 首先&#xff0c;我们定义一个接口 PersonInter 来描述一个人的信息&#xff0c;包括 id、name 和 age。 interface PersonInter {id: string;name: string;age: number; }自定义类型&#xff08;Custom Types&#xff09; 然后&…
阅读更多...
如何在Windows 10中启用和使用上帝模式，这里有详细步骤

如何在Windows 10中启用和使用上帝模式，这里有详细步骤

序言 上帝模式&#xff08;God Mode&#xff09;是一个特殊的文件夹&#xff0c;只在一个窗口中显示所有可用的操作设置。它可以节省搜索命令的时间&#xff0c;而无需知道通过“开始”菜单或“控制面板”查找命令的步骤。上帝模式默认情况下是隐藏的&#xff0c;所以我们需要…
阅读更多...
世界500强：破解“智慧核能”数智化成功转型密码

世界500强：破解“智慧核能”数智化成功转型密码

近日&#xff0c;实在智能携手中国核能行业协会信息化专业委员会在中国人工智能小镇成功举办“基于大模型的RPA数字员工在核能行业实战应用案例专项培训”&#xff0c;中国核工业集团、中国广核集团、国家电力投资集团等企事业单位共同参加。中核集团作为我国核科技工业的主体&…
阅读更多...
C++修炼之路之继承＜二＞

C++修炼之路之继承＜二＞

目录 一&#xff1a;子类的六大默认成员函数 二&#xff1a;继承与友元 三&#xff1a;继承与静态成员 四&#xff1a;复杂的继承关系菱形继承菱形虚拟继承 1.单继承 2.多继承 3.菱形继承&#xff1b;一种特殊的多继承 4.菱形虚拟继承 5.虚拟继承解决数据冗余和二…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站