给我的大学做的网站，另外分享我的源码。

最新推荐文章于 2023-05-16 08:18:00 发布

置顶毛鹏勃

最新推荐文章于 2023-05-16 08:18:00 发布

阅读量4.6k

点赞数 4

分类专栏：前端学习文章标签： css javascript html

本文链接：https://blog.csdn.net/weixin_51609029/article/details/109742813

版权

前端学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章目录

前言
网页展示
一、目的
二、代码展示
总结

前言

做网站的想法源自于一个网页设计比赛，但是在做的过程中，我觉得给学校做网站是光荣又富有意义的，所以，在我看来，我的作品不是特效的堆积，而是美好的。

网页展示

我给河南工业大学做了个网站。

视频展示

一、目的

让高考毕业生对我们学校有佳期如梦的憧憬，让毕业生有柔情似水的回忆，对，就建个网站，把学校的美展现在里面。

二、代码展示

1.一级页面

代码如下：

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="vewport" content="width=device-width, initial-scale=1.0">
		<link rel="stylesheet" href="font/font-awesome-4.7.0/css/font-awesome.min.css">
		<link rel="stylesheet" href="./main.css">
		<link href="text.css" rel="stylesheet" />
		<link href="fudong.css" rel="stylesheet" />
		<script src="./jq/jquery-3.3.1.min.js"></script>
		<link rel="icon" type="image/x-icon" href="./ico/桌面.png">
		<title>走进工大</title>
	</head>

	<body>
		<!--	音乐-->
		<audio autoplay="" loop="">
			<source src="jentlemo - 卡农（钢琴版）.mp3">
		</audio>

		</span>
		<!--背景视频-->
		<video autoplay muted loop poster="17.jpeg" id="mpb">
			<source src="pic/19.mp4" type="video/mp4">
		</video>

		<!-- table盛放内容 -->
		<div class="table">

			<!-- 上半部分 -->
			<div class="bg">
				<h2>
			河南工业大学
			<span class="effect04" id="">河南工业大学</span>
			<span class="effect04" id="">河南工业大学</span>
			<span class="effect06" id="logo" >欢迎你</span>
		</h2>
				
				<h5>Design by 305</h5>
				<h6 class="mpbfx" >
			<span style="--i:1">点</span>
			<span style="--i:2">击</span>
			<span style="--i:3">屏</span>
			<span style="--i:4">幕</span>
			<span style="--i:5"></span>
			<span style="--i:6">进</span>
			<span style="--i:7">入</span>
			<span style="--i:8">工</span>
			<span style="--i:9">大</span>
		</h6>
			</div>
			<div class="up">
				<i class="fa fa-angle-up fa-3x" aria-hidden="true"></i>
				<i class="fa fa-angle-up fa-3x" aria-hidden="true"></i>
			</div>

			<!-- 下半部分 -->

			<div class="container">
				<div class="con">
					<div class="box">
						<div class="text effect04">
							<a href="b1.html">
								<img src="icons/教学楼.png" alt="">
							</a>
						</div>
						<p id="">学校建筑</p>
					</div>
					<div class="box">
						<div class="text effect04">
							<a href="b2.html" class="tp">
								<img src="icons/图书馆.png" alt="">
							</a>
						</div>
						<p>图书馆</p>
					</div>
					<div class="box">
						<div class="content">
							<a href="b3.html">
								<img src="icons/操场.png" alt="">
							</a>
						</div>
						<p>操场</p>
					</div>
					<div class="box">
						<div class="content">
							<a href="b4.html">
								<img src="icons/饭店.png" alt="">
							</a>
						</div>
						<p>餐厅</p>
					</div>
					<div class="box">
						<div class="content">
							<a href="b5.html">
								<img src="icons/宿舍.png" alt="">
							</a>
						</div>
						<p>宿舍</p>
					</div>
					<div class="box">
						<div class="content">
							<a href="b6.html">
								<img src="icons/学校.png" alt="">
							</a>
						</div>
						<p>校园风景</p>
					</div>
					<div class="box">
						<div class="content">
							<a href="b7.html">
								<img src="icons/活动.png" alt="">
							</a>
						</div>
						<p>校园活动</p>
					</div>
					<div class="box">
						<div class="content">
							<a href="b8.html">
								<img src="icons/博物馆.png" alt="">
							</a>
						</div>
						<p>校史馆</p>
					</div>
				</div>
			</div>
		</div>
		

		<script src="./main.js"></script>
		<script src="music.js"></script>
	</body>

</html>

2.二级页面

代码如下：

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>宿舍</title>
		 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.css">

		<style>
									section{

    background-position: center;
    background-size: cover;
        background: url(教学楼/2020110919387F-AD-9B-CB-39-98-33-80-76-98-CE-E5-5D-80-29-5818F92AE4-FB5B-4F16-AF44-9FF5D04DEAF3.jpg) no-repeat;
    transition: all .5s;
    
}
			*{
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
    font-family: "Roboto", sans-serif;
}


.sidebar{
	
    position: absolute;
    left: -250px;
    width: 250px;
    height: 70%;
    background-color:transparent;
    transition: all .5s ease;
    
    
}



.sidebar ul a{
    display: block;
        background-color:transparent;
    height: 100%;
    width: 100%;
    line-height: 65px;
    font-size: 20px;
    color: black;
    padding-left: 40px;
    box-sizing: border-box;
    border-top: 1px solid rgba(255,255,255,.1);
    border-bottom: 1px solid black;
    translation: .4s;
     background-color: rgba(255, 255, 255, 0.2)
}

ul li:hover a{
    padding-left: 50px;
    
}

.sidebar ul a i{
    margin-right: 16px;
       filter: blur(300px);
}


#check{
    display: none;

}

label #btn,label #cancel{
    position: absolute;
    cursor: pointer;
        background-color:transparent;
    background: rgba(255.255.255.0.2);
    border-radius: 3px;
    
}

label #btn{
    left: 40px;
    top: 25px;
        background-color:transparent;
    font-size: 35px;
    color: white;
    padding: 6px 12px;
    transition: all .5s;
}

label #cancel{
    z-index: 1111;
    left: -195px;
    top: 100px;
    font-size:30px;
    color: #0a5275;
    padding: 4px 9px;
    
    transition: all .5s ease;
}

#check:checked ~ .sidebar{
    left: 0;
}

#check:checked ~ label #btn{
    left: 250px;
    opacity: 0;
    pointer-events: none;
}

#check:checked ~ label #cancel{
    left: 195px;
}

#check:checked ~ section{
    margin-left: 250px;
}

/*导航*/
			document.documentElement.style.overflow='hidden';
			
			.wenben{
				color: #ffa64d;
				
			}
			h2{
				color:#727620;/*标题*/
			}
			body {
				background: url(宿舍/20201109194327-08-BD-4A-36-37-46-44-36-A2-A2-33-1D-D1-91-6305187601-E7EE-45AC-864E-F6B9DA3C9C8C.jpg);
				background-repeat: no-repeat;
				background-size: cover;
				color: #4f585e;
				
				
				
				font-family: 'Source Sans Pro', sans-serif;
				text-rendering: optimizeLegibility;
			}
			a.btn {
				background:#727620;/*按钮*/
				border-radius: 4px;
				box-shadow: 0 2px 0px 0 rgba(0, 0, 0, 0.25);
				color: #ffffff;
				display: inline-block;
				padding: 6px 30px 8px;
				position: relative;
				text-decoration: none;
				transition: all 0.1s 0s ease-out;
			}
			
			.no-touch a.btn:hover {
				background: #e5ffe5;
				box-shadow: 0px 8px 2px 0 rgba(0, 0, 0, 0.075);
				transform: translateY(-2px);
				transition: all 0.25s 0s ease-out;
			}
			
			.no-touch a.btn:active,
			a.btn:active {
				background: #e5ffe5;/*点击效果*/
				box-shadow: 0 1px 0px 0 rgba(255, 255, 255, 0.25);
				transform: translate3d(0, 1px, 0);
				transition: all 0.025s 0s ease-out;
			}
			
			div.cards {
				margin: 80px auto;
				max-width: 960px;
				text-align: center;
			}
			
			div.card {
				background: #450804;/*标题框上部分*/
				display: inline-block;
				margin: 8px;
				max-width: 300px;
				perspective: 1000;
				position: relative;
				text-align: left;
				transition: all 0.3s 0s ease-in;
				z-index: 1;
			}
			
			div.card img {
				max-width: 300px;
			}
			
			div.card div.card-title {
				background: #eaffd6;/*标题框*/
				padding: 6px 15px 10px;
				position: relative;
				z-index: 0;
			}
			
			div.card div.card-title a.toggle-info {
				border-radius: 32px;
				height: 32px;
				padding: 0;
				position: absolute;
				right: 15px;
				top: 10px;
				width: 32px;
			}
			
			div.card div.card-title a.toggle-info span {
				background: #A78786;/*箭头*/
				display: block;
				height: 2px;
				position: absolute;
				top: 16px;
				transition: all 0.15s 0s ease-out;
				width: 12px;
			}
			
			div.card div.card-title a.toggle-info span.left {
				right: 14px;
				transform: rotate(45deg);
			}
			
			div.card div.card-title a.toggle-info span.right {
				left: 14px;
				transform: rotate(-45deg);
			}
			
			div.card div.card-title h2 {
				font-size: 24px;
				font-weight: 700;
				letter-spacing: -0.05em;
				margin: 0;
				padding: 0;
			}
			
			div.card div.card-title h2 small {
				display: block;
				font-size: 18px;
				font-weight: 600;
				letter-spacing: -0.025em;
			}
			
			div.card div.card-description {
				padding: 0 15px 10px;
				position: relative;
				font-size: 14px;
			}
			
			div.card div.card-actions {
				box-shadow: 0 2px 0px 0 #A78786;
				padding: 10px 15px 20px;
				text-align: center;
			}
			
			div.card div.card-flap {
				background: #535b06;/*浮动特效*/
				position: absolute;
				width: 100%;
				transform-origin: top;
				transform: rotateX(-90deg);
			}
			
			div.card div.flap1 {
				transition: all 0.3s 0.3s ease-out;
				z-index: -1;
			}
			
			div.card div.flap2 {
				transition: all 0.3s 0s ease-out;
				z-index: -2;
			}
			
			div.cards.showing div.card {
				cursor: pointer;
				opacity: 0.6;
				transform: scale(0.88);
			}
			
			.no-touch div.cards.showing div.card:hover {
				opacity: 0.94;
				transform: scale(0.92);
			}
			
			div.card.show {
				opacity: 1 !important;
				transform: scale(1) !important;
			}
			
			div.card.show div.card-title a.toggle-info {
				background: #ff6666 !important;
			}
			
			div.card.show div.card-title a.toggle-info span {
				top: 15px;
			}
			
			div.card.show div.card-title a.toggle-info span.left {
				right: 10px;
			}
			
			div.card.show div.card-title a.toggle-info span.right {
				left: 10px;
			}
			
			div.card.show div.card-flap {
				background: #ffcc99;/*文本框*/
				transform: rotateX(0deg);
			}
			
			div.card.show div.flap1 {
				transition: all 0.3s 0s ease-out;
			}
			
			div.card.show div.flap2 {
				transition: all 0.3s 0.2s ease-out;
			}
		</style>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js">
		</script>
	</head>

	<body>
			 <input type="checkbox" id="check">
    <label for="check">
        <i class="fas fa-bars" id="btn"></i>
        <i class="fas fa-times" id="cancel"></i>
    </label>
    <div class="sidebar">
        <ul>
            <li><a href="main.html"><i class="fas fa-qrcode"></i>首页</a></li>
            <li><a href="b1.html"><i class="fas fa-link"></i>学校建筑</a></li>
            <li><a href="b2.html"><i class="fas fa-stream"></i>图书馆</a></li>
            <li><a href="b3.html"><i class="fas fa-calendar-week"></i>操场</a></li>
            <li><a href="b4.html"><i class="far fa-question-circle"></i>餐厅</a></li>
            <li><a href="b6.html"><i class="fas fa-sliders-h"></i>校园风景</a></li>
            <li><a href="b7.html"><i class="far fa-envelope"></i>校园活动</a></li>
             <li><a href="b8.html"><i class="far fa-envelope"></i>校史馆</a></li>
        </ul>
    </div>
    <section></section>

		<div class="cards">
			<div class="card">
				<img class="card-image" src="宿舍/ng.jpg"width=400px height=200px alt="">
				<div class="card-title">
					<a href="" class="toggle-info btn">
						<span class="left"></span>
						<span class="right"></span>

					</a>
					<h2>
             			南公寓
                 </h2>
				</div>

				<div class="card-flap flap1">
					<div class="wenben">
						净,在于创造;美,在于营造
					</div>
					<div class="card-flap flap2">
						<div class="card-actions">
							<a onclick="location=' c25.html '" class="btn">详细介绍</a>
						</div>
					</div>
				</div>
			</div>

			<div class="card">
				<img class="card-image" src="宿舍/QQ截图20201108191343.png" width=400px height=200px">
				<div class="card-title">
					<a href="" class="toggle-info btn">
						<span class="left"></span>
						<span class="right"></span>
					</a>
					<h2>
                  F区
                 </h2>
				</div>

				<div class="card-flap flap1">
					<div class="wenben">
					爱学习!爱干净!爱室友!
					</div>
					<div class="card-flap flap2">
						<div class="card-actions">
							<a onclick="location=' c26.html '" class="btn">详细介绍</a>
						</div>
					</div>
				</div>
			</div>

			<div class="card">
				<img class="card-image" src="宿舍/a.jpg"width=400px height=200px alt="">
				<div class="card-title">
					<a href="" class="toggle-info btn">
						<span class="left"></span>
						<span class="right"></span>
					</a>
					<h2>
                  A区
                 </h2>
				</div>

				<div class="card-flap flap1">
					<div class="wenben">
						和谐宿舍,你我共筑
					</div>
					<div class="card-flap flap2">
						<div class="card-actions">
							<a onclick="location=' c27.html '" class="btn">详细介绍</a>
						</div>
					</div>
				</div>
			</div>

			<div class="card">
				<img class="card-image" src="宿舍/b.png"width=400px height=200px alt="">
				<div class="card-title">
					<a href="" class="toggle-info btn">
						<span class="left"></span>
						<span class="right"></span>
					</a>
					<h2>
                 B区
                 </h2>
				</div>

				<div class="card-flap flap1">
					<div class="wenben">
						书香校园，浸润心灵寝室文化，激人奋进
					</div>
					<div class="card-flap flap2">
						<div class="card-actions">
							<a onclick="location=' c28.html '" class="btn">详细介绍</a>
						</div>
					</div>
				</div>
			</div>

			<div class="card">
				<img class="card-image" src="宿舍/c.png" width=400px height=200pxalt="">
				<div class="card-title">
					<a href="" class="toggle-info btn">
						<span class="left"></span>
						<span class="right"></span>
					</a>
					<h2>
                  C区
                 </h2>
				</div>

				<div class="card-flap flap1">
					<div class="wenben">
						明亮清雅之室，同心同德之风
					</div>
					<div class="card-flap flap2">
						<div class="card-actions">
							<a onclick="location=' c29.html '" class="btn">详细介绍</a>
						</div>
					</div>
				</div>
			</div>

			<div class="card">
				<img class="card-image" src="宿舍/d.jpg"width=400px height=200px alt="">
				<div class="card-title">
					<a href="" class="toggle-info btn">
						<span class="left"></span>
						<span class="right"></span>
					</a>
					<h2>
                 D区
                 </h2>
				</div>

				<div class="card-flap flap1">
					<div class="wenben">
						工大寝室,你的另一个家
					</div>
					<div class="card-flap flap2">
						<div class="card-actions">
							<a onclick="location=' c30.html '" class="btn">详细介绍</a>
						</div>
					</div>
				</div>
			</div>

		</div>
		<script>
			$(document).ready(function() {
				var zindex = 10;

				$("div.card").click(function(e) {
					e.preventDefault();

					var isShowing = false;

					if($(this).hasClass("show")) {
						isShowing = true
					}

					if($("div.cards").hasClass("showing")) {
						// a card is already in view
						$("div.card.show")
							.removeClass("show");

						if(isShowing) {
							// this card was showing - reset the grid
							$("div.cards")
								.removeClass("showing");
						} else {
							// this card isn't showing - get in with it
							$(this)
								.css({
									zIndex: zindex
								})
								.addClass("show");

						}

						zindex++;

					} else {
						// no cards in view
						$("div.cards")
							.addClass("showing");
						$(this)
							.css({
								zIndex: zindex
							})
							.addClass("show");

						zindex++;
					}

				});
			});
		</script>

	</body>

</html>

3.三级页面

代码如下：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial" />
		<meta name="viewport" content="width=device-width; initial-scale=1.0">
		<link rel="stylesheet" type="text/css" href="三级.css" />
		<link rel="stylesheet" href="导航.css" />
		
		<title></title>
		<style>
				header.sticky {/*导航*/
				padding: 5px 100px;
				background: #776e5b;
			}
			
			#content1 {
				height: 25vh;
				}
			section {
				
				
				background: #767676;
				color: #bdc6d2;
				font-size: 10vh;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			
			#img1 {
				background-image: url(图书馆/xxq.png);
				height: 100vh;
			}
			#img2 {
				background-image: url(a/QQ截图20201115234013.png);
				height: 100vh;
			}
			
		
		</style>

	</head>

	<body>
		<!--导航-->
		<header>
			<a href="b2.html" class="logo"><img src="icons/返回.png" width="65px" /></a>
			<ul>
				<li>
					<a href="main.html#mpb">
						<div class="dhwz"><img src="icons/xiaohui.png" width="45px" />
							<div>首页</a>
				</li>
				<li>
					<a href="c7.html">
						<div class="dhwz"><img src="icons/大门.png" width="45px" />
							<div>正门</a>
				</li>
				<li>
					<a href="c8.html">
						<div class="dhwz"><img src="icons/大厅（选中）.png" width="45px" />
							<div>大厅</a>
				</li>
				<li>
					<a href="c9.html">
						<div class="dhwz"><img src="icons/图书.png" width="45px" />
							<div>图书</a>
				</li>
				<li>
					<a href="c11.html">
						<div class="dhwz"><img src="icons/自习室.png" width="45px" />
							<div>自习区</a>
				</li>
				<li>
					<a href="c12.html">
						<div class="dhwz"><img src="icons/报纸.png" width="45px" />
							<div>报刊阅览室</a>
				</li>
				
				<li>
					<a href="#">
						<audio id="music2" src="音频/zsc/xxq.mp3" loop="loop">你的浏览器不支持audio标签。</audio>
						<a href="javascript:playPause();"><img src="icons/speak.png" width="38" id="music_btn2" border="0"></a>
					</a>
				</li>

			</ul>
		</header>
		<!--图文-->
		<div id="container">
			<section id="img1" class="img"><h1>休息区</h1></section>
			<section id="content1">在图书馆每层的中部都设有一个休息区，并有多个圆形沙发和座椅，在这里读者可以自由活动，安安静静，稍作休息，同时休息区致力于为大家营造安静、舒适的学习氛围。</section>
			<section id="img2" class="img"><h1>休息区</h1></section>
			<section id="content1">在图书馆每层的中部都设有一个休息区，并有多个圆形沙发和座椅，在这里读者可以自由活动，安安静静，稍作休息，同时休息区致力于为大家营造安静、舒适的学习氛围。</section>
			

		</div>
		
		<script type="text/javascript">
			window.addEventListener("scroll", function() {
				var header = document.querySelector("header");
				header.classList.toggle("sticky", window.scrollY > 0);

			})
		</script>
		</div>
		<script src="https://cdn.bootcss.com/jquery/1.8.2/jquery.min.js"></script>
		<script>
			$("#audio_btn").click(function() {
				var music = document.getElementById("music");
				if(music.paused) {
					music.play();
					$("#music_btn").attr("src", ".");
				} else {
					music.pause();
					$("#music_btn").attr("src", "pause.gif");
				}
			});

			function playPause() {
				var music = document.getElementById('music2');
				var music_btn = document.getElementById('music_btn2');
				if(music.paused) {
					music.play();
					music_btn.src = 'icons/speak 1.png';
				} else {
					music.pause();
					music_btn.src = 'icons/speak.png';
				}
			}
		</script>
		<div id="footer">
		</div>

	</body>

</html>

css代码如下：

main.css

.mpbfx{
  font-size: large;
}
.tp{
	background-size: 100px;
}
.aaa{
	text-align: center;
    padding:24px;
    margin:0;
    font-family: helvetica, arial, sans-serif;
    font-size: 15px;
  
    color: deepskyblue;
    background:transparent;    
    text-shadow: 0 0 0.2em blue,
        0 0 0.2em blue;
}
p {
    text-align: center;
    padding:24px;
    margin:0;
    font-family: 华文中宋;
    font-size: 25px;
  
    color: yellow;
    background:transparent;    
    text-shadow: 0 0 0.2em blue,
        0 0 0.2em blue;
}

.effect04{
  background-color: white;
  background-image:
      linear-gradient(
        45deg,
        transparent 45%,
        hsla(48,20%,90%,1) 45%,
        hsla(48,20%,90%,1) 55%,
        transparent 0
        );
    background-size: .05em .05em;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 2px #111;
}
document.documentElement.style.overflow='hidden';

::selection {
    color: #fff;
    background: #088;
}
.text{
	color: #0156;
}
.effect06 {
   font-size: 100px;
font-weight: 900;    
}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td
    {margin:0;
     padding:0}

body::-webkit-scrollbar{
    display: none;
}
video#mpb {/*背景视频*/
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    background: url(17.jpeg) no-repeat;
    background-size: cover;
}

video
{ display: block; }
*{
  margin: 0;
  padding: 0;
}
body{
  width: 100%;
  font-family: Arial, Helvetica, sans-serif;
  position: relative;
  background-color: #000;
}

 
 body::-webkit-scrollbar{
  background-color: #000;
  color: #fff;
  width: 5px;

}
body::-webkit-scrollbar-button{
  background-color:#000;
}
body::-webkit-scrollbar-corner{
  background-color:#000;
}
body::-webkit-scrollbar-thumb{
  background-color: #fff;
} 


.table{
  width: 100%;
  height: 20vh;
  position: relative;
}
.bg{
  position: relative;
  width: 100%;
  height: 100vh;
  user-select: none;
}
.bg h1{
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  letter-spacing: 10px;
  font-weight: 100;
  font-size: 100px;
  z-index: 1;
  opacity: 0;
  animation: bg_h1 0.5s ease-out forwards;
}
.bg p{
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  letter-spacing: 10px;
  font-weight: 100;
  font-size: 20px;
  z-index: 1;
  opacity: 0;
  animation:bg_p 0.5s ease-out forwards 0.3s ;
}
.bg h5{
  position: absolute;
  top: 1%;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  letter-spacing: 10px;
  font-weight: 100;
  font-size: 10px;
  z-index: 1;
  opacity: 0;
  animation: bg_h5 0.3s ease-out forwards 0.6s;
}
.bg h6{
  position: absolute;
  top: 80%;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  letter-spacing: 5px;
  font-weight: 100;
  font-size: 10px;
  z-index: 1;
  opacity: 0;
  animation:bg_h6 0.3s ease-out forwards 0.6s;
}
.bg i:nth-child(4){
  z-index:1;
  color: #fff;
  position: absolute;
  bottom: 2vh;
  left: 50%;
  transform: translateX(-50%);
  animation: bg_i 1s infinite;
}
.bg i:nth-child(5){
  z-index:1;
  color: #fff;
  position: absolute;
  bottom: 0vh;
  left: 50%;
  transform: translateX(-50%);
  animation: bg_i 1s 0.5s infinite;
}

/* 设置动画 */
@keyframes bg_h1{
  from{
    top: 70%;
    opacity: 0;
  }
  to{
    top: 30%;
    opacity: 1;
  }
}
@keyframes bg_h5{
  from{
    opacity: 0;
  }
  to{
    opacity: 1;
  }
}
@keyframes bg_h6{
  from{
    top: 100%;
    opacity: 0;
  }
  to{
    top: 80%;
    opacity: 1;
  }
}
@keyframes bg_p{
  from{
    top: 80%;
    opacity: 0;
  }
  to{
    top: 50%;
    opacity: 1;
  }
}
@keyframes window_img{
  from{
    transform: scale(1.6);
  }
  to{
    transform: scale(1);
  }
}
@keyframes bg_i{
  0%{
    opacity: 1;
  }
  50%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}
/* 下半部分 */
.up i:nth-child(1){
  z-index: 1;
  color: #fff;
  position: absolute;
  top: 100vh;
  left: 50%;
  transform: translateX(-50%);
  animation: bg_i 1s infinite;
}
.up i:nth-child(2){
  z-index: 1;
  color: #fff;
  position: absolute;
  top: 102vh;
  left: 50%;
  transform: translateX(-50%);
  animation: bg_i 1s 0.5s infinite;
}
.container{
min-width: 780px;
	max-width: 1260px;
	margin: 10px auto;
  position: relative;
  width: 300%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  color: #fff;
}
.container .con{
  background-color: rgba(255,255,255,0.1);
  border-radius: 20px;
  /* 背景毛玻璃效果 */
  backdrop-filter: blur(15px);
  /* 网格布局 */
  /* 对于灰色部分的盒子做网格布局 */
  display: grid;
  /* 设置4列，每列占一个单位的宽度 */
  grid-template-columns: 1fr 1fr 1fr 1fr;

  grid-template-rows: 1fr 1fr;
  grid-gap: 120px;
  padding: 120px;
  
}
.container .box{
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  align-items: center;
  padding: 10px;
  border: 10px solid rgba(255,255,255,0);
  transition: border 0.5s;
}
.container .box:hover{
  border: 1px solid rgba(255,255,255,1);
  transition: border 0.5s;
}
.container .content{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
.container a img{
  width: 120px;
}
document.documentElement.style.overflow='hidden';

text.css


 #logo {
                font-weight: 1000;
                font-size: 190px;
                font-family: "微软雅黑";
                color: #FFF2E5;
                -webkit-text-stroke: 1px #a3590e;
                background: -webkit-linear-gradient(45deg, #70f7fe, #fbd7c6, #fdefac, #bfb5dd, #bed5f5);
                -moz-linear-gradient(45deg, #71f7fe, #fbd7c6, #fdefac, #bfb5dd, #bed5f5);
                -ms-linear-gradient(45deg, #71f7fe, #fbd7c6, #fdefac, #bfb5dd, #bed5f5);
                color: transparent;
                /*设置字体颜色透明*/
                -webkit-background-clip: text;
                /*背景裁剪为文本形式*/
                animation: ran 8s linear infinite;
                /*动态10s展示*/
            }

            @keyframes ran {
                from {
                    backgroud-position: 0 0;
                }
                to {
                    background-position: 2000px 0;
                }
            }
body{
	margin: 0;
	padding: 0;
	min-height: 100vh;
	font-family: "microsoft sans serif" ;
}
h2{
	position: absolute;
	top: 40%;
	left: 50%;
	transform: translate(-50%,-50%);
	margin: 0;
	padding: 0;
	font-size: 7em;
	font-weight: 500;
	color: transparent;
	text-transform: uppercase;
}
h2 span:nth-child(1){
	position: absolute;
	top: 0;
	left: 0;
	color:#4349ff;
	transition: 0.5s;
	clip-path: polygon(0 0, 100% 0, 100% 50%,2% 50%);
	overflow: hidden;
}
h2:hover span:nth-child(1){
	transform: translateY(-18px);
	 
	 	
    filter: blur(300px);

}
h2 span:nth-child(2){
	position: absolute;
	top: 0;
	left: 0;
	color: #4349ff;
	transition: 0.5s;
	clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0% 100%);
	overflow: hidden;
}

h2:hover span:nth-child(2){
	transform: translateY(18px);
		
	
    filter: blur(300px);
}
h2 span:nth-child(3){
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%) scale(0);
	width: 100%;
	color: #000;
	background: transparent ;
	font-weight: 900;
	
	font-size: 0.25em;
	letter-spacing: 0.7cm;
	text-align: center;
	padding-left: 20px;
	margin-left: 5px;
	transition: 0.5s;
}
h2:hover span:nth-child(3){
	transform: translateY(-50%) scale(1);
	
}

fudong.css




.mpbfx span{/*浮动*/
	position: relative;
	display: inline-block;
	color: #fff;
	font-size: 10px;
	animation: animate 1.5s ease-in-out infinite;
	animation-delay: calc(.1s*var(--i));
	margin: 10px;
	bottom: 90%;
}
@keyframes animate{
	0%{
		transform: translateY(0px);
	}
	20%{
		transform: translateY(-24px);
		
	}
	40%,100%{
		transform: translateY(0px);
	}
}

JavaScript

//禁用滚轮
var move=function(e){
e.preventDefault && e.preventDefault();
e.returnValue=false;
e.stopPropagation && e.stopPropagation();
return false;
    }
    var keyFunc=function(e){
if(37<=e.keyCode && e.keyCode<=40){
return move(e);
}
}
    document.body.onkeydown=keyFunc;
// 点击
var flag=true;

$('.bg').on('click',()=>{
    if(flag){
        $('.table').animate({
            top:-100+'vh'
        },500)
        $('.window>img').animate({
            width:120+'%',
            height:120+'%',
            left:-10+'%'
        },500)
        flag=false;
    }
})

$('.up').on('click',()=>{
    if(!flag){
        $('.table').animate({
            top:0+'vh'
        },500)
        $('.window>img').animate({
            width:100+'%',
            height:100+'%',
            left:0
        },500)
        flag=true;
    }
})

time();
setInterval(time,1000);

总结

做这个网站用了半个月时间，从一无所知到现在的稍微懂点，真的学到好多。我觉得学到的这些要比我以前学的许多科目都有用，它是实在的技术，让我感受的充实，感到生命的意义。
以前我就觉得，创造是十分快乐的，这次的经历坚定了我的想法，看到网站一点点修改，一点点完善，我感到欣慰，感到幸福，感到快乐，这快乐是嘴角自然上扬，是本能的，是无与伦比的。
至此，我已经拥有了一件属于自己的东西，它是我的宠儿。我也愿意分享给大家，因为没有网友分享的知识，我的网站只能是庸俗的。