<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>新春贺卡</title>
<link rel="stylesheet" href="./mooccss/style.css">
</head>
<body>
<div id="music">
<img src="./moocimg/music_pointer.png" alt="">
<img src="./moocimg/music_disc.png" alt="">
</div>
<div class="page" id="page1">
<div class="bg"></div>
<div class="p1_lantern">点击屏幕<br>开启好运2020</div>
<div class="p1_imooc"></div>
<div class="p1_words">2020年歌谣新年特写</div>
</div>
<div class="page" id="page2">
<div class="bg"></div>
<div class="p2_circle"></div>
<div class="p2_2016"></div>
</div>
<div class="page" id="page3">
<div class="bg"></div>
<div class="p3_logo"></div>
<div class="p3_title"></div>
<div class="p3_second"></div>
<div class="p3_first"></div>
<div class="p3_blessing"></div>
</div>
</body>
</html>style.css
*{margin: 0;padding: 0;border: none;font-size: 1.5625vw;font-family: "Microsoft Yahei";}
html,body{height: 100%;}
#music{position: fixed;top:3vh;right: 4vh; width: 15vw;height: 15vw;border: 4px solid #ef1639;z-index: 5;background: #fff;border-radius: 50%;}
#music > img:first-of-type{position: absolute;top: 24%;right: 2.5%;width: 28.421%;}
#music > img:last-of-type{position: absolute;top: 0;right: 0;bottom: 0;left: 0;margin: auto;width: 79%;}
.page {height: 100%;}
.page > .bg {position: absolute;width: 100%; height: 100%;z-index: -1;}
#page1 > .bg{background:url("../moocimg/p1_bg.jpg") no-repeat center center;
background-size: 100%;}
#page1 > .p1_lantern{position: absolute;top: -3.4%;right: 0;left: 0;margin: auto; width: 45vw;height: 71.2vh;background: url("../moocimg/p1_lantern.png") no-repeat center bottom;
font-size: 3.506rem;background-size: 100%;padding-top: 31vh;
box-sizing: border-box;text-align: center;}
#page1 >.p1_lantern::before{position: absolute;top: 0;right: 0;bottom: 0;left: 0;margin: auto;width: 30vw;height: 30vw;background: #d60b5b;opacity: .5;box-shadow: 0 0 10vw 10vw #d60b5b;z-index: -1;content: "";border-radius: 50%;}
#page1 > .p1_imooc{position: absolute;right: 0;bottom: 9vh;left: 0;background: url("../moocimg/p1_imooc.png") no-repeat center center;background-size: 100%;width: 27.656vw;height: 18.63vh;margin: auto;}
#page1 > .p1_words{font-size: 2.134rem;position: absolute;left: 0;right: 0;bottom: 48px;text-align: center;color: #231815;}
#page2 > .bg{background:url("../moocimg/p2_bg.jpg") no-repeat center center;
background-size: 100%;}
#page3 > .bg{background:url("../moocimg/p3_bg.jpg") no-repeat center center;
background-size: 100%;}
运行结果
