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

為了賬號安全，請及時綁定郵箱和手機立即綁定

正在回答

4 回答

window.onload = function(){
?? ?var page1 = document.getElementById('page1');
?? ?var page2 = document.getElementById('page2');
?? ?var page3 = document.getElementById('page3');
?? ?var music = document.getElementById('music');
?? ?var shouba = document.getElementById('shouba');
?? ?var audio = document.getElementsByTagName('audio')[0];
?? ?//音樂播放停止，自動停止光盤旋轉(zhuǎn)(添加監(jiān)聽事件)
?? ?audio.addEventListener("enden",function(event){
?? ??? ?music.setAttribute("class","");
?? ??? ?shouba.setAttribute("class","shouba");
?? ?},false)
?? ?//點擊音樂圖標，控制音樂播放(PC端點擊事件)
?? ?// music.onclick = function(){
?? ?// ?? ?if(audio.paused){
?? ?// ?? ??? ?audio.play();
?? ?// ?? ??? ?this.setAttribute("class","play");
?? ?// ?? ??? ?// this.style.animationPlayState = "running";
?? ?// ?? ??? ?// this.style.webkitanimationPlayState = "running";

?? ?// ?? ?}else{
?? ?// ?? ??? ?audio.pause();?? ?
?? ?// ?? ??? ?this.setAttribute("class","");?? ??? ??? ??? ??? ?//js方法
?? ?// ?? ??? ?// this.style.animationPlayState = "paused";??????? //css方法
?? ?// ?? ??? ?// this.style.webkitanimationPlayState = "paused"; //兼容ios

?? ?// ?? ?}
?? ?// }
?? ?//點擊音樂圖標，控制音樂播放(手機端觸摸事件)
?? ?music.addEventListener("touchstart",function(event){
?? ??? ?if(audio.paused){
?? ??? ??? ?audio.play();
?? ??? ??? ?this.setAttribute("class","play");
?? ??? ??? ?shouba.setAttribute("class","");
?? ??? ??? ?// this.style.animationPlayState = "running";
?? ??? ??? ?// this.style.webkitanimationPlayState = "running";

?? ??? ?}else{
?? ??? ??? ?audio.pause();?? ?
?? ??? ??? ?this.setAttribute("class","");
?? ??? ??? ?shouba.setAttribute("class","shouba");?? ?//js方法
?? ??? ??? ?// this.style.animationPlayState = "paused";??? //css方法
?? ??? ??? ?// this.style.webkitanimationPlayState = "paused"; //兼容ios

?? ??? ?}
?? ?},false)
?? ?//點擊屏幕，開啟2016好運(手機端觸摸事件)
?? ?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)
}

0 回復 有任何疑惑可以回復我~

*{
?? ?margin:0;
?? ?padding:0;
?? ?border:0;
?? ?font-size:1.5625vw;
?? ?font-family:"Microsoft Yahei";
}
html,body{
?? ?height:100%;
?? ?overflow:hidden;
}
.music{
?? ?position:fixed;
?? ?top:3vh;
?? ?right:4vw;
?? ?z-index:5;
?? ?width:15vw;
?? ?height:15vw;
?? ?border:0.5em solid #ef1639;
?? ?border-radius:50%;
?? ?background-color:#fff;
}
.music > img:nth-child(1){
?? ?position:absolute;
?? ?top:24%;
?? ?right:2.5%;
?? ?width:28.421%;
?? ?z-index:2;
}
.shouba{
?? ?-webkit-transform-origin:100% 0%;
?? ??? ??? ?transform-origin:100% 0%;
?? ?-webkit-transform:rotate(-15deg);
?? ??? ??? ?transform:rotate(-15deg);
?? ?-webkit-animation:0.5s;
?? ??? ??? ?animation:0.5s;
}
.music > img:nth-child(2){
?? ?position:absolute;
?? ?top:11%;
?? ?right:0;
?? ?bottom:0;
?? ?left:11%;
?? ?margin:0;
?? ?width:79%;
}
.music > img.play{
?? ?-webkit-animation:music_disc 4s linear infinite;
?? ??? ???? animation:music_disc 4s linear infinite;
}
@keyframes music_disc{
?? ?0%{
?? ??? ?-webkit-transform:rotate(0deg);
?? ??? ???????? transform:rotate(0deg);
?? ?}
?? ?100%{
?? ??? ?-webkit-transform:rotate(360deg);
?? ??? ???????? transform:rotate(360deg);
?? ?}
}
@-webkit-keyframes music_disc{
?? ?0%{
?? ??? ?-webkit-transform:rotate(0deg);
?? ??? ???????? transform:rotate(0deg);
?? ?}
?? ?100%{
?? ??? ?-webkit-transform:rotate(360deg);
?? ??? ???????? transform:rotate(360deg);
?? ?}
}
.page{
?? ?position:absolute;
?? ?width:100%;
?? ?height:100%;
}
.page > .bg{
?? ?position:absolute;
?? ?width:100%;
?? ?height:100%;
?? ?z-index:-1;
}
#page1 >.bg{
?? ?background:url("../../test/images/p1_bg.jpg") no-repeat center center;
?? ?background-size:100%;
}
#page1 > .p1_lantern{
?? ?width:45vw;
?? ?height: 75.2vh;
?? ?font-size:3em;
?? ?position:absolute;
?? ?top:-3.4%;
?? ?right:0;
?? ?left:0;
?? ?color:green;
?? ?text-align:center;
?? ?font-weight:bold;
?? ?margin:auto;
?? ?background:url("../../test/images/p1_lantern.png")no-repeat center center;
?? ?background-size:100%;
?? ?padding-top:31vh;
?? ?-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;
?? ?left:0;
?? ?bottom:0;
?? ?margin:auto;
?? ?content:"";
?? ?width:30vw;
?? ?height:30vw;
?? ?background:#d60b3b;
?? ?opacity:0.5;
?? ?border-radius:50%;
?? ?-webkit-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;
}
@keyframes p1_lantern{
?? ?0%{
?? ??? ?opacity:0.5;
?? ??? ?-webkit-transform: scale(0.8,0.8);
?? ??? ?transform: scale(0.8,0.8);
?? ?}
?? ?100%{
?? ??? ?opacity:1;
?? ?}
}
@-webkit-keyframes p1_lantern{
?? ?0%{
?? ??? ?opacity:0.5;
?? ??? ?-webkit-transform: scale(0.8,0.8);
?? ??? ?transform: scale(0.8,0.8);
?? ?}
?? ?100%{
?? ??? ?opacity:1;
?? ?}
}
#page1 > .p1_imooc{
?? ?position:absolute;
?? ?right:0;
?? ?bottom:9vh;
?? ?left:0;
?? ?background:url("../../test/images/p1_imooc.png") no-repeat center center;
?? ?background-size:100%;
?? ?width:27.656vw;
?? ?height:18.63vh;
?? ?margin:1em auto ;
}
#page1 > .p1_words{
?? ?font-size:2.5em;
?? ?position:absolute;
?? ?right:0;
?? ?bottom:2em;
?? ?left:0;
?? ?text-align:center;
?? ?color:#231815;
}
#page2{
?? ?display:none;
?? ?-webkit-transition:0.5s;
?? ??? ??? ?transition:0.5s;
}
#page2.fadeOut{
?? ?opacity:0.3;
?? ?-webkit-transform:translate(0,-100%);
?? ??? ??? ?transform:translate(0,-100%);
}
.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:0;}
?? ?100%{opacity:1;}
}
@keyframes{
?? ?0%{opacity:0;}
?? ?100%{opacity:1;}
}
#page2 >.bg{
?? ?background:url("../../test/images/p2_bg.jpg") no-repeat center center;
?? ?background-size:100%;
}
#page2 > .p2_circle{
?? ?position:absolute;
?? ?top:0;
?? ?right:0;
?? ?bottom:0;
?? ?left:0;
?? ?margin:auto;
?? ?z-index: 3;
?? ?background:url("../../test/images/p2_circle_outer.png") no-repeat center center;
?? ?background-size:100%;
?? ?width:59.375vw;
?? ?height: 59.375vw;
?? ?-webkit-animation:p2_circle 1s linear 3s infinite;
?? ??? ??? ?animation:p2_circle 1s linear 3s infinite;
}
@-weikit-keyframes p2_circle{
?? ?0%{
?? ??? ?-webkit-transform:rotate(0deg);
?? ??? ?transform:rotate(0deg);
?? ?}
?? ?100%{
?? ??? ?-webkit-transform:rotate(-360deg);
?? ??? ?transform:rotate(-360deg);
?? ?}
}
@keyframes p2_circle{
?? ?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;
?? ?content: "";
?? ?background:url("../../test/images/p2_circle_middle.png") no-repeat center center;
?? ?background-size:100%;
?? ?width:45.625vw;
?? ?height:45.625vw;
?? ?-webkit-animation:p2_circle1 1s linear 2s infinite;
?? ??? ??? ?animation:p2_circle1 1s linear 2s infinite;
}
@-weikit-keyframes p2_circle1{
?? ?0%{
?? ??? ?-webkit-transform:rotate(0deg);
?? ??? ?transform:rotate(0deg);
?? ?}
?? ?100%{
?? ??? ?-webkit-transform:rotate(720deg);
?? ??? ?transform:rotate(720deg);
?? ?}
}
@keyframes p2_circle1{
?? ?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;
?? ?content: "";
?? ?background:url("../../test/images/p2_circle_inner.png") no-repeat center center;
?? ?background-size:100%;
?? ?width:39.937vw;
?? ?height:39.937vw;
?? ?-webkit-animation:p2_circle_inner 1s linear 1s infinite;
?? ??? ??? ?animation:p2_circle_inner 1s linear 1s infinite;
}
@-weikit-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;
?? ?right:0;
?? ?bottom:0;
?? ?left:0;
?? ?margin:auto;
?? ?background:url("../../test/images/p2_2016.png") no-repeat center center;
?? ?background-size:100%;
?? ?width:27.5vw;
?? ?height:6.24vh;
}
#page3{
?? ?display:none;
?? ?-webkit-transition: 0.5s;
?? ??? ??? ?transition: 0.5s;
}
#page3.fadeIn{
?? ??? ?-webkit-transform:translate(0, -100%);
?? ??? ??? ??? ?transform:translate(0,-100%);
}
#page3 >.bg{
?? ?background:url("../../test/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("../../test/images/p3_logo.png") no-repeat center center;
?? ?background-size:100%;
}
#page3 > .p3_title{
?? ?width:48.125vw;
?? ?height:50vh;
?? ?position:absolute;
?? ?top:20.80vh;
?? ?right:0;
?? ?left:0;
?? ?margin:auto;
?? ?background:url("../../test/images/p3_title.png") no-repeat center center;
?? ?background-size:100%;
}
#page3 > .p3_second{
?? ?width:22.8125vw;
?? ?height:41.625vh;
?? ?position:absolute;
?? ?top:25.48vh;
?? ?left:3.75vw;
?? ?background:url("../../test/images/p3_couplet_second.png") no-repeat center center;
?? ?background-size:100%;
}#page3 > .p3_first{
?? ?width:22.8125vw;
?? ?height:41.625vh;
?? ?position:absolute;
?? ?top:25.48vh;
?? ?right:3.75vw;
?? ?background:url("../../test/images/p3_couplet_first.png") no-repeat center center;
?? ?background-size:100%;
}
#page3 > .p3_blessing{
?? ?width:32vw;
?? ?height:32vh;
?? ?position:absolute;
?? ?bottom:-2vh;
?? ?right:0;
?? ?left:0;
?? ?margin:auto;
?? ?border-radius:50%;
?? ?background:url("../../test/images/p3_blessing.png") no-repeat center center;
?? ?background-size:100%;
?? ?-webkit-animation:p3_blessing 2s linear? infinite;
?? ??? ??? ?animation:p3_blessing 2s linear? infinite;
}
@-weikit-keyframes p3_blessing{
?? ?0%{
?? ??? ?-webkit-transform:rotate(0deg);
?? ??? ?transform:rotate(0deg);
?? ?}
?? ?100%{
?? ??? ?-webkit-transform:rotate(360deg);
?? ??? ?transform:rotate(360deg);
?? ?}
}
@keyframes p3_blessing{
?? ?0%{
?? ??? ?-webkit-transform:rotate(0deg);
?? ??? ?transform:rotate(0deg);
?? ?}
?? ?100%{
?? ??? ?-webkit-transform:rotate(360deg);
?? ??? ?transform:rotate(360deg);
?? ?}
}

0 回復 有任何疑惑可以回復我~ 
<!DOCTYPE?html>
<html>
<head>
????<meta?charset="utf-8">
????<meta?http-equiv="X-UA-Compatible"?content="chrome=1,IE=edge">
????<meta?name="viewport"?content="width=device-width,?initial-scale=1,?minimum-scale=1,?maximum-scale=1,?user-scalable=no">
????<meta?name="format-detecion"?content="telephone=no">
????<title>賀春</title>
????<link?rel="stylesheet"?type="text/css"?href="../test/css/index.css"?/>
????<script?src="../test/js/audio.js"?type="text/javascript"?charset="utf-8"></script>
</head>
<body>
????<div>
????????<img?id="shouba"?src="../test/images/music_pointer.png">
????????<img??id="music"?src="../test/images/music_disc.png">
????</div>
????<div?id="page1">
????????<div></div>
????????<div>點擊屏幕<br>開啟好運2016</div>
????????<div></div>
????????<div>2016新春快樂</div>
????</div>
????<div?class="page?p2_bg_loading"?id="page2">
????????<div></div>
????????<div></div>
????????<div></div>
????</div>
????<div?id="page3">
????????<div></div>
????????<div></div>
????????<div></div>
????????<div></div>
????????<div></div>
????????<div></div>
????</div>
????<audio?autoplay="true">
????????<source?src="Sarah.mp3"?type="audio/mpeg">
????</audio>
</body>
</html>


0 回復 有任何疑惑可以回復我~

<!DOCTYPE html>

<!-- saved from url=(0038)http://idcbgp.cn/activity/project1 -->

<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">


<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

<meta name="format-detection" content="telephone=no">

<title>2016年慕課網(wǎng)新年特獻</title>

<link rel="stylesheet" type="text/css" href="css/style.css">

<script src="js/script.js" type="text/javascript" charset="utf-8" async="" defer=""></script>

</head>

<body>

<div id="music">

<img class="music_disc music_play" src="img/music_disc.png">

<img src="img/music_pointer.png">

</div>

<div id="page1">

<div></div>

<div>點擊屏幕<br>開啟好運2016</div>

<div></div>

<div>2016年慕課網(wǎng)新年特獻</div>

</div>

<div id="page2">

<div class="bg p2_bg_loading"></div>

<div></div>

<!--三個圈只用一個div即可。放到p2_circle類中-->

<div id="p2_circle"></div>

<div></div>

</div>

<div id="page3">

<div></div>

<div></div>

<div></div>

<!--下聯(lián)-->

<div class="p3_couplet_second couplet"></div>

<!--上聯(lián)-->

<div class="p3_couplet_first couplet"></div>

<!--福-->

<div></div>

</div>

<audio autoplay="true">

<source src="audio/happynewyear.mp3" type="audio/mpeg">

</audio>


</body></html>


2 回復 有任何疑惑可以回復我~

舉報

0/150
提交
取消
HTML5+CSS3實現(xiàn)春節(jié)賀卡
  • 參與學習       110184    人
  • 解答問題       482    個

又逢新春佳節(jié)，春節(jié)賀卡搞起來，學會HTML5+CSS3實現(xiàn)春節(jié)賀卡

進入課程
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

 公眾號

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