第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定

正在回答

3 回答

view-source:http://idcbgp.cn/activity/project1

0 回復(fù) 有任何疑惑可以回復(fù)我~

最好自己手敲哦~需要的話留郵箱

0 回復(fù) 有任何疑惑可以回復(fù)我~

HTML部分

<!DOCTYPE?html>
<html>
<head>
<meta?charset="UTF-8">
<meta?http-equiv="X-UA-Compatible"?content="IE=edge?,chrome=1">
<meta?name="viewport"?content="width=device-width,?initial-scale=1,?minimum-scale=1,?maximum-scale=1,?user-scalable=no">
<meta?name="form-detection"?content="telephone=no">
<title>恭賀新春</title>
<link?rel="stylesheet"?type="text/css"?href="css/style.css">
<script?type="text/javascript"?src="js/script.js"></script>
</head>
<body>
<div>
<img?src="images/music_pointer.png">
<img?id="music"?src="images/music_disc.png">
</div>

<!--?第一頁(yè)開(kāi)始?-->
<div?id="page1">
<div></div>
<div>點(diǎn)擊屏幕<br/>開(kāi)啟好運(yùn)2016</div>
<div></div>
<div>2016年新年賀卡</div>
</div>
<!--?第一頁(yè)結(jié)束?-->

<!--?第二頁(yè)開(kāi)始?-->
<div?id="page2">
<div?class="bg?p2_bg_loading"></div>
<div></div>
<div></div>
<div></div>
</div>
<!--?第二頁(yè)結(jié)束?-->

<!--?第三頁(yè)開(kāi)始?-->
<div?id="page3">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<!--?第三頁(yè)結(jié)束?-->
<!--?插入音樂(lè)開(kāi)始?-->
<audio?autoplay="true">
<source?src="audio/happynewyear.mp3"?type="audio/mpeg">
</audio>
<!--?插入音樂(lè)結(jié)束?-->
</body>
</html>

CSS部分

/*al??tag*/
*{
	margin:?0;
	padding:?0;
	border:?none;
	font-size:?1.5625vw;
	font-family:?"Microsoft?Yahei";
}
html,body{
	height:?100%;
	overflow:hidden;
}
/*music*/
.music{
	position:?fixed;
	top:?3vh;
	right:?4vw;
	z-index:?5;
	width:?15vw;
	height:?15vw;
	border:?4px?solid?#ef1639;
	border-radius:50%;?
	background:?#fff;
}

.music?>?img:first-of-type{
	position:?absolute;
	top:?24%;
	right:?2.5%;
	z-index:?1;
	width:?28.421%;
}

.music?>?img:last-of-type{
	position:?absolute;
	top:?0;
	right:?0;
	bottom:?0;
	left:?0;
	margin:auto;
	z-index:?0;
	width:?79%;
}
/*動(dòng)畫(huà)*/
.music?>?img.play{
	-webkit-animation:?music_disc?4s?linear?infinite?;
	????????anmation:?music_disc?4s?linear?infinite?;
}
@-webkit-keyframes?music_disc{
	0%{
		-webkit-transform:?rotate(0deg);
				transform:?rotate(0deg);
	}
	100%{
		-webkit-transform:?rotate(360deg);
			?	transform:?rotate(360deg);
	}
}
keyframes?music_disc{
	0%{
		-webkit-transform:?rotate(0deg);
			?	transform:?rotate(0deg);
	}
	100%{
		-webkit-transform:?rotate(360deg);
				transform:?rotate(360deg);
	}
}
/*page?bg*/
.page{
	height:?100%;
	position:?absolute;
	width:?100%;
}
.page?>?.bg{
	position:?absolute;
	width:?100%;
	height:?100%;
	z-index:?-1;
}


/*page1*/
#page1{
	display:?block;
}
#page1?>?.bg{
	background:?url("../images/p1_bg.jpg")?no-repeat?center;
	background-size:100%;
}	
#page1?>?.p1_lantern{
	position:?absolute;
	color:?white;
	top:?-3.4%;
	right:?0;
	left:?0;
	margin:?auto;
	background:?url("../images/p1_lantern.png")?no-repeat?center;
	background-size:?100%;
	width:?45vw;
	height:?71.2vh;
	font-size:?3.506rem;
	padding-top:?31vh;
	text-align:?center;
	-webkit-box-sizing:border-box;
	???-moz-box-sizing:border-box;
	????-ms-box-sizing:border-box;
	?????-o-box-sizing:border-box;
	????????box-sizing:border-box;
}
#page1?>?.p1_lantern:before{
	position:?absolute;
	top:?0;
	right:?0;
	bottom:?0;
	left:?0;
	z-index:?-1;
	content:?"";
	margin?:auto;
	width?:30vw;
	height:?30vw;
	background?:#d60b3b;
	opacity:?.5;
	border-radius:50%;?
	-webkit-box-shadow:?0?0?10vw?10vw?#d60b3b;
	???-moz-box-shadow:?0?0?10vw?10vw?#d60b3b;
	????-ms-box-shadow:?0?0?10vw?10vw?#d60b3b;
	?????-o-box-shadow:?0?0?10vw?10vw?#d60b3b;
?????????	box-shadow:?0?0?10vw?10vw?#d60b3b;
????-webkit-animation:?p1_lantern?.5s?infinite?alternate;
????		animation:?p1_lantern?.5s?infinite?alternate;
??
}
/*動(dòng)畫(huà)*/
@-webkit-keyframes?p1_lantern{
	0%{
		opacity:?.5;
		-webkit-transform?:?scale(.8,?.8);
				transform?:?scale(.8,?.8);
	}
	100%{
		opacity:?1;
	}
}
@keyframes?p1_lantern{
	0%{
		opacity:?.5;
		-webkit-transform?:?scale(.8,?.8);
				transform?:?scale(.8,?.8);
	}
	100%{
		opacity:?1;
	}
}

#page1?>?.p1_imooc{
	position:?absolute;
	right:?0;
	left:?0;
	bottom:?9vh;
	background?:url("../images/p1_imooc.png")?no-repeat?center?center;
	background-size:?100%;
	width:?27.652vw;
	height:?18.63vh;
	margin:?auto;
}
#page1?>?.p1_words{
	font-size:?2.134rem;
	position:?absolute;
	right:?0;
	bottom:?48px;
	left:?0;
	text-align:?center;
	color:?#231815;
}
/*page2*/
#page2{
	display:?none;
	-webkit-transition:?.5s;
			transition:?.5s;
}
#page2.fadeOut{
	opacity:?.3;
	-webkit-transform:?translate(0,?-100%);
			transform:?transform(0,?-100%);
}

#page2?>?.bg{
	background:?url("../images/p2_bg.jpg")?no-repeat?center?center;
	background-size:100%;
}	
#page2?>?.p2_bg_loading{
	z-index:?4;
	background:?#ef1639;
	-webkit-animation:?p2_bg_loading?1s?linear?forwards;
			animation:?p2_bg_loading?1s?linear?forwards;
}?
@-webkit-keyframes?p2_bg_loading{
	0%??{opacity:?1;}
	100%{opacity:?0;}
}
@keyframes?p2_bg_loading{
	0%??{opacity:?1;}
	100%{opacity:?0;}
}
#page2?>?.p2_circle{
	position:?absolute;
	top:?0;
	left:?0;
	right:?0;
	bottom:?0;
	margin:?auto;
	border-radius:?50%;
	background:?url("../images/p2_circle_outer.png")?no-repeat?center?center;
	background-size:?100%;
	width:?59.375vw;
	height:?59.375vw;
	-webkit-animation:?p2_circle_outer?1s?linear?3s?infinite;
			animation:?p2_circle_outer?1s?linear?3s?infinite;
}
/*動(dòng)畫(huà)*/
@-webkit-keyframes?p2_circle_outer{
	0%{
		-webkit-transform:?rotate(0deg);
				transform:?rotate(0deg);?
	}
	100%{
		-webkit-transform:?rotate(-360deg);
				transform:?rotate(-360deg);?
	}
}
@keyframes?p2_circle_outer{
	0%{
		-webkit-transform:?rotate(0deg);
				transform:?rotate(0deg);?
	}
	100%{
		-webkit-transform:?rotate(-360deg);
				transform:?rotate(-360deg);?
	}
}

#page2?>?.p2_circle:before{
	position:?absolute;
	top:?0;
	right:?0;
	bottom:?0;
	left:?0;
	margin:?auto;
	border-radius:?50%;
	content:?"";
	background:?url("../images/p2_circle_middle.png")?no-repeat?center??center;
	background-size:?100%;
	width:?45.625vw;
	height:?45.625vw;
	-webkit-animation:?p2_circle_middle?1s?linear?2s?infinite;
			animation:?p2_circle_middle?1s?linear?2s?infinite;
}
@-webkit-keyframes?p2_circle_middle{
	0%{
		-webkit-transform:?rotate(0deg);
				transform:?rotate(0deg);?
	}
	100%{
		-webkit-transform:?rotate(720deg);
				transform:?rotate(720deg);?
	}
}
@keyframes?p2_circle_middle{
	0%{
		-webkit-transform:?rotate(0deg);
				transform:?rotate(0deg);?
	}
	100%{
		-webkit-transform:?rotate(720deg);
				transform:?rotate(720deg);?
	}
}

#page2?>?.p2_circle:after{
	position:?absolute;
	top:?0;
	right:?0;
	bottom:?0;
	left:?0;
	margin:?auto;
	border-radius:?50%;
	content:?"";
	background:?url("../images/p2_circle_inner.png")?no-repeat?center??center;
	background-size:?100%;
	width:?39.9375vw;
	height:?39.9375vw;
	-webkit-animation:?p2_circle_inner?1s?linear?1s?infinite;
			animation:?p2_circle_inner?1s?linear?1s?infinite;
}
@-webkit-keyframes?p2_circle_inner{
	0%{
		-webkit-transform:?rotate(0deg);
				transform:?rotate(0deg);?
	}
	100%{
		-webkit-transform:?rotate(-1080deg);
				transform:?rotate(-1080deg);?
	}
}
@keyframes?p2_circle_inner{
	0%{
		-webkit-transform:?rotate(0deg);
				transform:?rotate(0deg);?
	}
	100%{
		-webkit-transform:?rotate(-1080deg);
				transform:?rotate(-1080deg);?
	}
}

#page2?>?.p2_2016{
	position:?absolute;
	top:?0;
	left:?0;
	right:?0;
	bottom:?0;
	margin:?auto;
	background:?url("../images/p2_2016.png")?no-repeat?center?center;
	background-size:?100%;
	width:?27.5vw;
	height:?6.24vh;
}
/*page3*/
#page3?{
	display:?none;
	-webkit-transition:?.5s;
			transition:?.5s;
}
#page3.fadeIn{
	-webkit-transform:?translate(0,-100%);
			transform:?translate(0,-100%);
}
#page3?>?.bg{
	background:?url("../images/p3_bg.jpg")?no-repeat?center?center;
	background-size:100%;
}	
#page3?>?.p3_logo{
	width:?34.6875vw;
	height:?6.327vh;
	position:?absolute;
	top:?7.82vh;
	right:?0;
	left:?0;
	margin:?auto;
	background:?url("../images/p3_logo.png")?no-repeat?center?center;
	background-size:?100%;
}
#page3?>?.p3_title{
	width:?48.125vw;
	height:?50vh;
	position:?absolute;
	top:?21vh;
	right:?0;
	left:?0;
	margin:?auto;
	background:?url("../images/p3_title.png")?no-repeat?center?center;
	background-size:?100%;
}
#page3?>?.p3_second{
	width:?22.8125vw;
	height:?41.652vh;
	position:?absolute;
	top:?25.48vh;
	left:?3.75vw;
	margin:?auto;
	background:?url("../images/p3_couplet_second.png")?no-repeat?center?center;
	background-size:?100%;
}
#page3?>?.p3_first{
	width:?22.8125vw;
	height:?41.652vh;
	position:?absolute;
	top:?25.48vh;
	right:?3.75vw;
	margin:?auto;
	background:?url("../images/p3_couplet_first.png")?no-repeat?center?center;
	background-size:?100%;
}
#page3?>?.p3_blessing{
	width:?32vw;
	height:?32vw;
	position:?absolute;
	right:?0;
	bottom:?10vh;
	left:?0;
	margin:auto;
	border-radius:50%;?
	background:?url("../images/p3_blessing.png")?no-repeat?center?center;
	background-size:?100%;
	-webkit-animation:?p2_circle_blessing?2s?linear?infinite;
			animation:?p2_circle_blessing?2s?linear?infinite;
}
@-webkit-keyframes?p2_circle_blessing{
	0%{
		-webkit-transform:?rotate(0deg);
				transform:?rotate(0deg);?
	}
	100%{
		-webkit-transform:?rotate(360deg);
				transform:?rotate(360deg);?
	}
}
@keyframes?p2_circle_blessing{
	0%{
		-webkit-transform:?rotate(0deg);
				transform:?rotate(0deg);?
	}
	100%{
		-webkit-transform:?rotate(360deg);
				transform:?rotate(360deg);?
	}
}

JS部分

window.onload?=?function(){
	//獲取元素
	var?page1?=?document.getElementById('page1');
	var?page2?=?document.getElementById('page2');
	var?page3?=?document.getElementById('page3');

	var?music?=?document.getElementById('music');
	var?audio?=?document.getElementsByTagName('audio')[0];
	
	//當(dāng)音樂(lè)播放完停止時(shí)候，自動(dòng)停止光盤(pán)旋轉(zhuǎn)效果,ended為audio的API
	audio.addEventListener("ended",?function(event){
		music.setAttribute("class"?,?"");
		//?music.style.animationPlayState?=?"paused";
		//?music.style.webkitAnimationPlayState?=?"paused";
	},?false)

	//點(diǎn)擊音樂(lè)圖標(biāo)，控制音樂(lè)播放效果
	//?music.onclick?=?function(){
	//?	if?(audio.paused)?{
	//?		audio.play();
	//?		this.setAttribute("class",?"play");
	//?		//this.style.animationPlayState?=?"running"
	//?		//this.style.webkitAnimationPlayState?=?"running"
	//?	}else{
	//?		this.setAttribute("class"?,?"");
	//?		//this.style.animationPlayState?=?"paused"http://iPhone6?plus可以兼容
	//?		//this.style.webkitAnimationPlayState?=?"paused"http://iphone6可以兼容，但安卓不兼容
	//?		audio.pause();
	//?	}
	//?};
	music.addEventListener("touchstart",?function(event){
		if?(audio.paused)?{
			audio.play();
			this.setAttribute("class",?"play");
		}else{
			audio.pause();
			this.setAttribute("class"?,?"");
		}
	}?,false);
	page1.addEventListener("touchstart",?function(event){
		page1.style.display?=?"none";
		page2.style.display?=?"block";
		page3.style.display?=?"block";
		page3.style.top?????=?"100%";

		setTimeout(function(){
			page2.setAttribute("class"?,"page?fadeOut");
			page3.setAttribute("class"?,?"page?fadeIn");
		},5500);
	},?false);
};


1 回復(fù) 有任何疑惑可以回復(fù)我~
#1

小感冒

望采納
2016-02-06 回復(fù) 有任何疑惑可以回復(fù)我~

舉報(bào)

0/150
提交
取消
HTML5+CSS3實(shí)現(xiàn)春節(jié)賀卡
  • 參與學(xué)習(xí)       110183    人
  • 解答問(wèn)題       478    個(gè)

又逢新春佳節(jié)，春節(jié)賀卡搞起來(lái)，學(xué)會(huì)HTML5+CSS3實(shí)現(xiàn)春節(jié)賀卡

進(jìn)入課程

請(qǐng)發(fā)源代碼

我要回答 關(guān)注問(wèn)題
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢(xún)優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)