慕课贺春源代码

最新推荐文章于 2021-02-16 22:53:22 发布

不知过客

最新推荐文章于 2021-02-16 22:53:22 发布

阅读量341

点赞数

分类专栏： IT，前端基础文章标签： css html

本文链接：https://blog.csdn.net/qq_41377400/article/details/78962590

版权

IT，前端基础专栏收录该内容

5 篇文章 0 订阅

订阅专栏

根据慕课网写的内容，祝大家2018新春快乐！

css部分

@charset "utf-8";
/* CSS Document */
*{
margin: 0px;
padding: 0px;
overflow: hidden;
}
/*页面设置*/
#page{
position: static;
width:100vw;
height:100vh;
}
#page1{display:block;}
/*第一页相关属性*/
#page1{
position: absolute;
background-image: url(image/p1_bg.jpg);
background-repeat: no-repeat;
background-size:cover;
width:100vw;
height:100vh;
}
/*音乐的设置*/
.music{
position: absolute;
top:5vh;
right:5vw;
width:15vw;
height:15vw;
border:2px solid #FC0509;
border-radius:50%;
z-index: 20;
}
#img{
position:absolute;
top:1vw;
left:1vw;
width:13vw;
height:13vw;
animation: xz_out 1s linear 0s infinite;
}
#img img{
width:13vw;
height:13vw;
}
.img2{
position: absolute;
width:13vw;
height:13vw;
left:10vw;
top:2vw;
}
/*灯笼*/
.dlong{
position: absolute;
left:30.5vw;
width:65vw;
height:65vh;
background-image: url(image/p1_lantern.png);
background-repeat:no-repeat;
background-size: contain;
}
.dj{
font-size: 5vw;
color:white;
position: absolute;
top:48vw;
left:35vw;
text-align: center;
}
.sg{
position: absolute;
left:34.5vw;
top:21vh;
width:35vw;
height:35vw;
background-color: #D82326;
border-radius: 50%;
box-shadow: 0 0 10vw 5vw #D82326;
animation:sg 0.3s ease-in-out infinite alternate running none;
}
@keyframes sg{
0%{
transform:scale(0.8);
opacity: 0.7;
}
100%
{
transform: scale(1.1);
}
}
/*小慕*/
.xiaom{
position: absolute;
left:30vw;
top:65vh;
width:45vw;
height:45vh;
background-image: url(image/p1_imooc.png);
background-repeat:no-repeat;
background-size: contain;
}
.ft{
position: absolute;
top: 95vh;
left:36vw;
color:#000000;
font-size:5vw;
}
/*第二页*/
#page2{
display:none;
}
/*第二页相关属性*/
.page2{
position: absolute;
background-image: url(image/p2_bg.jpg);
background-repeat: no-repeat;
background-size:cover;
width:100vw;
height:100vh;
transition: transform 0.5s linear;
}
.p2_up{
transform:translateY(-100vh);
opacity:0.3;
}
/*圈圈*/
.circle{
position: absolute;
width:75vw;
height:75vh;
left:14vw;
top:25vh;
}
/*大圈圈*/
.circle_1{
position:absolute;
background-image: url(image/p2_circle_outer.png);
background-repeat: no-repeat;
background-size: contain;
width:75vw;
height:75vw;
animation:xz_out 0.6s 0s infinite;
animation-timing-function:linear;
}
/*动画*/
@keyframes xz_out{
0%{
transform:rotate(0deg);
}
100%{
transform:rotate(360deg);
}
}
/*中圈圈*/
.circle_2{
position:absolute;
background-image: url(image/p2_circle_middle.png);
background-repeat: no-repeat;
background-size: contain;
width:50vw;
height:50vw;
left:12vw;
top:7vh;
animation:xz_middle 0.6s 0.5s infinite;
animation-timing-function:linear;
}
@keyframes xz_middle{
0%{
transform:rotate(0deg);
}
100%{
transform:rotate(-360deg);
}
}
/*小圈圈*/
.circle_3{
position:absolute;
background-image: url(image/p2_circle_inner.png);
background-repeat: no-repeat;
background-size: contain;
width:40vw;
height:40vw;
left:17vw;
top:9.5vh;
animation:xz_in 0.8s 1.0s infinite;
animation-timing-function:linear;
}
@keyframes xz_in{
0%{
transform:rotate(0deg);
}
100%{
transform:rotate(360deg);
}
}
.p2_2018{
width:65vw;
height:20vh;
position: absolute;
top: 78vh;
left:20vw;
font-size:24vw;
color:white;
}
/*第三页*/
#page3{display:block;}
.page3{
position:absolute;
width:100vw;
height:100vh;
top:100vh;
background-image: url(image/p3_bg.jpg);
background-size:cover;
background-repeat:no-repeat;
transition: transform 0.5s linear;
}
.p3_up{
transform:translateY(-100vh);
}
/*大写的福*/
.p3_1{
position:absolute;
width:40vw;
height:40vw;
background-image: url(image/p3_blessing.png);
background-repeat:no-repeat;
background-size:contain;
top:45vh;
left:31vw;
animation:xz_in 1s linear 0s infinite;
}
/*左右对联*/
.p3_2{
position:absolute;
width:25vw;
height:50vh;
top:32vh;
background-image:url(image/p3_couplet_second.png);
background-size:contain;
background-repeat:no-repeat;
}
.p3_3{
position:absolute;
width:25vw;
height:50vh;
top:32vh;
left:75vw;
background-image:url(image/p3_couplet_first.png);
background-size:contain;
background-repeat:no-repeat;
}
/*慕课贺春*/
.p3_4{
position:absolute;
width:30vw;
height:50vh;
background-image: url(image/p3_title.png);
background-repeat:no-repeat;
background-size:contain;
}
/*logo*/
.p3_5{
position:absolute;
width:20vw;
height:20vh;
top:95vh;
right:5vw;
font-size:5vw;
color:white;
font-family:"dawning-of-a-new-day";
}
/*署名*/
.p3_6{
position:absolute;
width:20vw;
height:20vh;
top:95vh;
left:5vw;
background-image: url(image/p3_logo.png);
background-size: contain;
background-repeat:no-repeat;
}

JS部分

// JavaScript Document
window.onload = function ()
{
var page = document.getElementById("page");
var page1 = document.getElementById("page1");
var page2 = document.getElementById("page2");
var page3 = document.getElementById("page3");
page1.addEventListener("touchstart",function(){
/*第一页和第二页的交互*/
page1.style.display="none";
page2.style.display="block";
/*第二页和第三页的交互*/
setTimeout(function(){
page2.setAttribute("class","page2 p2_up");
page3.setAttribute("class","page3 p3_up");
},4500);
},false);
var i=1;
var img = document.getElementById("img");
var music = document.getElementById("music_1");
/*通过监听点击次数来控制磁盘和音乐的停放*/
img.addEventListener("click",function(){
i=-i;
if(i==-1)
{
img.style.animation="none";
music.pause();
}
else{
img.style.animation="xz_out 1s linear 0s infinite";
music.play();
}
},false);
}