前言
做网站的想法源自于一个网页设计比赛,但是在做的过程中,我觉得给学校做网站是光荣又富有意义的,所以,在我看来,我的作品不是特效的堆积,而是美好的。
网页展示
我给河南工业大学做了个网站。
视频展示
一、目的
让高考毕业生对我们学校有佳期如梦的憧憬,让毕业生有柔情似水的回忆,对,就建个网站,把学校的美展现在里面。
二、代码展示
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);
总结
做这个网站用了半个月时间,从一无所知到现在的稍微懂点,真的学到好多。我觉得学到的这些要比我以前学的许多科目都有用,它是实在的技术,让我感受的充实,感到生命的意义。以前我就觉得,创造是十分快乐的,这次的经历坚定了我的想法,看到网站一点点修改,一点点完善,我感到欣慰,感到幸福,感到快乐,这快乐是嘴角自然上扬,是本能的,是无与伦比的。
至此,我已经拥有了一件属于自己的东西,它是我的宠儿。我也愿意分享给大家,因为没有网友分享的知识,我的网站只能是庸俗的。