余昊，1720103023,174班
源码码云链接：https://gitee.com/stonetuskboar/zabivaka/commit/56f32770da5dac5fe68e763bcc8a7e49d2ccb1f1
个人简历网址：http://yh.yxdesu.xyz/（感谢朋友帮助，网页挂靠在朋友的服务器上）
本作业采用了html5tricks制作的弹出层插件，BOX STUDIO制作的前端框架。
（部分动态效果无法用截图显示，请浏览原网址）
以下为作业截图：
简历首页：
家乡展示：
个人信息，点击图标将会弹出相关信息：
个人简介：
点击X以退出。
源代码如下：
index.html是本网站的框架。css文件夹中两个css文件包含了本网站大部分样式，scripts文件夹中的.js文件实现了部分动态效果。
music文件夹存放了背景音乐，image文件夹存放了网站所用到的图片。
源码：
index.html
<!DOCTYPE html> <html><head> <meta charset="utf-8"> <title>yhdesu</title> <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"> <meta name="description" content="yhdesu"> <meta name="keywords" content="yhdesu"> <meta name="author" content="BOX STUDIO"> <meta name="viewport" content="width=device-width,user-scalable=no"> <link rel="shortcut icon" href="favicon.ico"> <link rel="stylesheet" href=".\css\master.css"> <link rel="stylesheet" href=".\css\style.css"> </head> <audio autoplay="autoplay" loop="loop"> <source src="music/1.mp3" type="audio/mpeg"> </audio> <body id="teaser-page"> <div class="l-stage"><main> <div class="l-intro"> <div class="intro-btn-skip"><a id="s_st" href="#">S_ST</a></div> </div> <div class="l-main"> <div class="l-first"> <div class="first-bg"></div> <div class="first-flare-wrap"> <div class="first-flare01"></div> <div class="first-flare02"></div> </div> <div class="first-megumi-back"></div> <div class="first-megumi-front"></div> <div class="first-text-wrap"> <div class="first-text-main"> <img src="./images/teaser/main_text.png" width="416" height="442" class="pcv"> <img src="./images/teaser/main_text_sp.png" class="spv"> </div> <div class="first-text"> <span class="t1"></span> <span class="t2"></span> <span class="t3"></span> <span class="t4"></span> <span class="t5"></span> <span class="t6"></span> <span class="t7"></span> <span class="t8"></span> <span class="t9"></span> <span class="t10"></span> <span class="t11"></span> <span class="t12"></span> <span class="t13"></span> <span class="t14"></span> <span class="t15"></span> <span class="t16"></span> <span class="t17"></span> <span class="t18"></span> <span class="t19"></span> <span class="t20"></span> <span class="t21"></span> <span class="t22"></span> <span class="t23"></span> <span class="t24"></span> <span class="t25"></span> <span class="t26"></span> <span class="t27"></span> <span class="t28"></span> <span class="t29"></span> <span class="t30"></span> <span class="t31"></span> </div> </div> <div class="sakura-front"> <div class="sakura-front-l"></div> <div class="sakura-front-m"></div> <div class="sakura-front-s"></div> </div> </div> <div class="l-fix"></div> <div class="l-second"> <div class="sakura-back"> <div class="sakura-back-l"></div> <div class="sakura-back-m"></div> <div class="sakura-back-s"></div> </div> <div class="l-movie"> <div class="movie-ss"></div> <div id="movie-player"></div> <div class="news-btn-more"> <a target="_blank" href="#">我的家乡</a> </div> <div class="movie-btn"> <div class="movie-btn-play"> <a target="_blank" href="http://www.google.cn/maps/place/湖北省十堰市郧西县/@33.0300521,109.7768828,10z/"> <img src="./images/teaser/main_movie_btn_play.gif" width="640" height="360"> </a> </div> </div> </div> <div class="l-news-wrap"> <div class="l-news"> <div class="news-btn-more"> <a name="close1" href="#popup1">个人简介</a> <div class="popup" id="popup1"> <div class="popup-inner"> <div class="popup__photo"> <img src="./images/teaser/p1.jpg" alt=""> </div> <div class="popup__text"> <h1>这是zabivaka的个人简介！</h1> <p>  喜欢看漫画，玩主机游戏，furry，听一些奇奇怪怪的歌，十八岁，是大二学生，没有多少朋友，生活十分失败。<br />   最喜欢的漫画是荒川弘的《钢之炼金术士》，最近买了《阿基拉》。<br />   目前拥有一台 ps4 主机，通关了《神秘海域》全系列，最喜欢《血源诅咒》，白金了《血源诅咒》和《看门狗 2》。<br />   看世界杯的时候喜欢上了俄罗斯的吉祥物 zabivaka，目前正在furry圈旁观。<br />   仍然没有被挂科，除此之外一无是处。<br /><br /> </p> <h2>所以，不要停下来啊！</h2> </div> <a class="popup__close" href="#close1">X</a> </div> </div> </div> </div> <div class="l-twitter"> <div class="twitter-btn-more"> <a name="close2" href="#popup2">校园经历</a> <div class="popup" id="popup2"> <div class="popup-inner"> <div class="popup__photo"> <img src="./images/teaser/3.jpg" alt=""> </div> <div class="popup__text"> <h1>校园经历</h1> <p>  校园职务： 学生 在职日期：2017 ~ 2021<br />   1，依然没有找到女朋友<br />   2，在大一下学期从化工与制药专业转入计算机科学技术专业。<br />   3，在大二加入了谢永老师的密码学团队，目前在钻研 RSA 加密算法。<br />   4，通过了所有考试，并没有挂科。<br />   5，在大二参加了 CSP 考试，成绩为 220 分。<br />   6，在大二上学期通过了六级考试，成绩为 481 分。<br /> </p> </div> <a class="popup__close" href="#close2">X</a> </div> </div> </div> </div> </div> <footer class="l-footer"> </footer> </div> </div> </main></div><script src="./scripts/libs.min.js"></script><script src="./scripts/functions.min.js"></script></body></html>
style.css
@import url("https://fonts.googleapis.com/css?family=Raleway:300,400,600&subset=latin-ext");
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
@media screen and (max-width: 768px) {
html, body {
font-size: 12px;
}
}
.button {
text-decoration: none;
font-size: .875rem;
font-weight: 300;
text-transform: uppercase;
display: inline-block;
border-radius: 1.5rem;
background-color: #fff;
color: #9191E9;
padding: 1rem 2rem;
}
.popup {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
position: fixed;
width: 100vw;
height: 100vh;
bottom: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.8);
z-index: 5;
visibility: hidden;
opacity: 0;
overflow: hiden;
-webkit-transition: .64s ease-in-out;
transition: .64s ease-in-out;
}
.popup-inner {
position: relative;
bottom: -100vw;
right: -100vh;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
max-width: 800px;
max-height: 600px;
width: 60%;
height: 80%;
background-color: #fff;
-webkit-transform: rotate(32deg);
transform: rotate(32deg);
-webkit-transition: .64s ease-in-out;
transition: .64s ease-in-out;
}
.popup__photo {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
width: 40%;
height: 100%;
overflow: hidden;
}
.popup__photo img {
width: auto;
height: 100%;
}
.popup__text {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 60%;
height: 100%;
padding: 4rem;
}
.popup__text h1 {
font-size: 2rem;
font-weight: 400;
margin-bottom: 2rem;
text-transform: uppercase;
color: #0A0A0A;
}
.popup__text h2 {
font-size: 1.5rem;
font-weight: 500;
margin-bottom: 2rem;
text-transform: uppercase;
color: #0A0A0A;
}
.popup__text p {
font-size: .875rem;
color: #686868;
line-height: 1.5;
}
.popup:target {
visibility: visible;
opacity: 1;
}
.popup:target .popup-inner {
bottom: 0;
right: 0;
-webkit-transform: rotate(0);
transform: rotate(0);
}
.popup__close {
position: absolute;
top: 0rem;
right: 0rem;
max-width: 3rem;
max-height: 3rem;
min-width: 3rem;
min-height:3rem;
font-size: 2rem;
font-weight: 500;
background-color: #0A0A0A;
z-index: 5;
color: #fff;
line-height: 2rem;
text-align: left;
cursor: pointer;
text-decoration: none;
}
master.css和functions.min.js以及libs.min.js文件过大，无法展示，可以去码云下载后浏览。（TAT刚才复制的时候浏览器卡死，文章崩掉了，一个字不剩，这是我第二次重写的）
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
