-
demo上傳地址查看全部
-
在body屬性中設(shè)置overflow:hidden; 防止溢出有滾動(dòng)條出現(xiàn)。 js函數(shù)在上一節(jié)已經(jīng)做過筆記，此處只記錄fadeIn和fadeOut兩個(gè)類 #page2 { display: block; -webkit-transition: .5s; transition: .5s; } #page2.fadeOut { opacity: .3; -webkit-transform: translate(0, -100%); transform: translate(0, -100%); } #page3 { display: none; -webkit-transition: .5s; transition: .5s; } #page3.fadeIn{ -webkit-transform: translate(0, -100%); transform: translate(0, -100%); }查看全部
-
vw:設(shè)備屏幕的寬度為100vw； 設(shè)置全局樣式查看全部
-
page2和page3淡入淡出的類如何設(shè)置沒有講到 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); };查看全部
-
在html界面中加入具有p2_bg_loading bg兩個(gè)類的div 對(duì)其進(jìn)行設(shè)置，達(dá)到淡入第二頁(yè)的效果 #page2 > .p2_bg_loading { z-index: 4; background: #ef1639; -webkit-animation: p2_bg_loading 1s linear forwards; animation: p2_bg_loading 1s linear forwards; } @keyframes p2_bg_loading { 0% {opacity: 1;} 100% {opacity: 0;} } @-webkit-keyframes p2_bg_loading { 0% {opacity: 1;} 100% {opacity: 0;} }查看全部
-
主體結(jié)構(gòu)代碼 清晰布局 標(biāo)簽結(jié)構(gòu)化查看全部
-
通過addEventListener函數(shù)進(jìn)行控制，暫停操作同樣存在兼容性問題。 onclick操作存在300ms延遲，且在手機(jī)端也無法實(shí)行click操作，故而換成監(jiān)聽touchstart操作。 代碼如此下： //當(dāng)音樂播放完成后，自動(dòng)停止光盤旋轉(zhuǎn)效果 audio.addEventListener("ended", function(event) { music.setAttribute("class",""); // music.style.animationPlayState = "paused"; // this.style.webkitAnimationPlayState = "paused"; }, false); music.addEventListener("touchstart", function(event){ if (audio.paused) { audio.pause(); this.setAttribute('class', "play"); } else{ audio.play(); this.setAttribute('class', ""); }; },false); };查看全部
-
html5 格式 中文編碼查看全部
-
等待頁(yè)面加載完全之后才能讀取JS代碼，不然會(huì)出現(xiàn)查不到所要元素的情況，HTML5中在<script>標(biāo)簽中有defer屬性可以解決這一問題，但兼容性差，傳統(tǒng)方法是市容window.onload = function() {} animationPlayState屬性動(dòng)畫效果佳但兼容性差，還是使用暴力屬性方法比較保險(xiǎn)。 代碼如下： window.onload = function() { var music = document.getElementById('music'); var audio = document.getElementsByTagName('audio')[0]; music.onlcick = function () { if (audio.paused) { audio.pause(); this.setAttribute('class', "play"); // this.style.animationPlayState = "running"; // this.style.webkitAnimationPlayState = "running"; } else{ audio.play(); this.setAttribute('class', ""); // this.style.animationPlayState = "paused"; // this.style.webkitAnimationPlayState = "paused"; }; } };查看全部
-
第二屏動(dòng)畫 大同小異 注意設(shè)置轉(zhuǎn)圈數(shù)不同 防止動(dòng)畫出不來(難道是因?yàn)橄胪藭?huì)相對(duì)靜止么？) 代碼：(只給出了第一部分，后面兩個(gè)大同小異) #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.9375vh; -webkit-animation: p2_circle_inner 1s linear 1s infinite; animation: p2_circle_inner 1s linear 1s infinite; } @keyframes p2_circle_inner { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(-1080deg); transform: rotate(-1080deg); } } @-webkit-keyframes p2_circle_inner { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(-1080deg); transform: rotate(-1080deg); } }查看全部
-
燈籠特效 scale()函數(shù)控制縮放(即閃爍) 代碼如下： #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; } @keyframes p1_lantern { 0% { opacity: .5; -webkit-transform: scale(.8, .8); transform: scale(.8, .8); } 100% { opacity: 1; } } @-webkit-keyframes p1_lantern { 0% { opacity: .5; -webkit-transform: scale(.8, .8); transform: scale(.8, .8); } 100% { opacity: 1; } }查看全部
-
在html頁(yè)面中加入class="play"; 利用兩個(gè)圖像的z-index關(guān)系控制是否遮蓋 代碼如下 (省略-o -ms內(nèi)核) #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); } }查看全部
-
第三界面的網(wǎng)頁(yè)重構(gòu)代碼分為： #page3 > .p3_log{...} //慕課logo #page3 > .p3_title{...}//春字標(biāo)題 #page3 > .p3_second{...}//右對(duì)聯(lián) #page3 > .p3_first{...}//左對(duì)聯(lián) #page3 > .p3_blessing {...}//福字查看全部
-
代碼的快速整理 借助sublime text 的多行操作特性 分別選擇行首縮進(jìn)的空格和結(jié)尾的大括號(hào) 使用快捷鍵alt + F3進(jìn)行全選，然后進(jìn)行操作。查看全部
-
代碼續(xù)： #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%; }查看全部
舉報(bào)
0/150
提交
取消