                        課程
                    
                        /前端開發(fā)
                        
                            /Html5
                        
                        /HTML5+CSS3實(shí)現(xiàn)春節(jié)賀卡

老師有沒有源碼

老師有沒有源碼啊

qq_郎中_0

2016-03-10

源自：HTML5+CSS3實(shí)現(xiàn)春節(jié)賀卡 4-1

關(guān)注問題我要回答

1025

操作

收起

2 回答

我樂意
2016-03-30

自己跟著做的，就是沒有兼容性

html：

<!DOCTYPE html>

<html>

<head>

<title>慕課賀春手機(jī)端</title>

</head>

<body>

<div>

</div>

</div>

</div>

</div>

</audio>

</body>

</html>

css：

/* all 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;z-index:0;margin: auto;width: 79%;}

/*音樂轉(zhuǎn)動(dòng)*/

.music > img.play {

-webkit-animation:music_disc 4s linear infinite;?

-o-animation:music_disc 4s linear infinite;

animation:music_disc 4s linear infinite;

}

@-webkit-keyframes music_disc {

0%{

-webkit-transform: rotate(0deg);

-ms-transform: rotate(0deg);

-o-transform: rotate(0deg);

transform: rotate(0deg);

}

100%{

-webkit-transform: rotate(360deg);

-ms-transform: rotate(360deg);

-o-transform: rotate(360deg);

transform: rotate(360deg);

}

@-o-keyframes music_disc {

0%{

-webkit-transform: rotate(0deg);

-ms-transform: rotate(0deg);

-o-transform: rotate(0deg);

transform: rotate(0deg);

}

100%{

-webkit-transform: rotate(360deg);

-ms-transform: rotate(360deg);

-o-transform: rotate(360deg);

transform: rotate(360deg);

}

@keyframes music_disc {

0%{

-webkit-transform: rotate(0deg);

-ms-transform: rotate(0deg);

-o-transform: rotate(0deg);

transform: rotate(0deg);

}

100%{

-webkit-transform: rotate(360deg);

-ms-transform: rotate(360deg);

-o-transform: rotate(360deg);

transform: rotate(360deg);

}

/* page bg */

.page { position: absolute; width: 100%; height: 100%;}

.page > .bg { position: absolute; z-index: -1; width: 100%; height: 100%;}

/*page1*/

#page1{ display: block; ?/*隱藏第一頁*/}

#page1 > .bg { background: url("../images/p1_bg.jpg") no-repeat center center; background-size: 100%;}

#page1 > .p1_lantern {position: absolute;top: -3.4%;right: 0;left: 0;margin: auto;background: url("../images/p1_lantern.png") no-repeat center bottom;background-size: 45%; widows: 45vw;height: 71.2vh;font-size: 3.506rem;color:#fff;padding-top: 31vh;text-align: center;

-webkit-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;

box-shadow: 0 0 10vw 10vw #d60b3b;

? ? -webkit-animation:p1_lantern .5s infinite alternate;

? ? ? ? ? ? animation:p1_lantern .5s infinite alternate;

}

@-webkit-keyframes p1_lantern{

0%{opacity: .5;

-webkit-transform: scale(.8, .8);

transform: scale(.8, .8);

}

0%{opacity: .1; }

}

@keyframes p1_lantern{

0%{opacity: .5;

-webkit-transform: scale(.8, .8);

transform: scale(.8, .8);

}

0%{opacity: .1; }

}

#page1 > .p1_imooc {position: absolute; right: 0;bottom: 9vh;left: 0;background: url("../images/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;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:translate(0,-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 > .bg {background: url("../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;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;

}

@-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;right: 0;bottom: 0;left: 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;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;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: p3_blessing 2s linear infinite;

animation: p3_blessing 2s linear infinite;

}

@-webkit-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);

}

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)音樂播放完停止的時(shí)候，自動(dòng)停止光盤旋轉(zhuǎn)效果

audio.addEventListener("ended",function(event){

music.setAttribute("class","");

},false);

// 點(diǎn)擊音樂圖標(biāo)，控制音樂播放效果

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);

};

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

收起回答

whosyourdaddy1994
2016-03-11

我有源碼采納下給你發(fā)過去

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

收起回答

#1

慕粉3413158

親，能發(fā)我一份么

2016-06-03 回復(fù) 有任何疑惑可以回復(fù)我~

#2

慕無忌6890528

有地址嗎？很想跟著敲一遍

2018-04-25 回復(fù) 有任何疑惑可以回復(fù)我~

舉報(bào)

0/150

提交

取消

HTML5+CSS3實(shí)現(xiàn)春節(jié)賀卡

參與學(xué)習(xí) 110183 人
解答問題 482 個(gè)

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

進(jìn)入課程

本課相似問答

1 回答大牛沒有源代碼嗎？

2 回答怎么沒有上傳源代碼

1 回答資源里邊沒有背景音樂

1 回答這邊有沒有源文件可以下載看看嗎

1 回答psd整體圖沒有啊老師

搜索更多本課相關(guān)問答

老師有沒有源碼

我要回答關(guān)注問題

使用 Ctrl+D 可將網(wǎng)站添加到書簽

微信客服

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

幫助反饋 APP下載

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

公眾號(hào)

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

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

熱搜

最近搜索清空

老師有沒有源碼

2 回答

本課相似問答

老師有沒有源碼