-
demo上传地址查看全部
-
在body属性中设置overflow:hidden; 防止溢出有滚动条出现。 js函数在上一节已经做过笔记，此处只记录fadeIn和fadeOut两个类 #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:设备屏幕的宽度为100vw； 设置全局样式查看全部
-
page2和page3淡入淡出的类如何设置没有讲到 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两个类的div 对其进行设置，达到淡入第二页的效果 #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;} }查看全部
-
主体结构代码 清晰布局 标签结构化查看全部
-
通过addEventListener函数进行控制，暂停操作同样存在兼容性问题。 onclick操作存在300ms延迟，且在手机端也无法实行click操作，故而换成监听touchstart操作。 代码如此下： //当音乐播放完成后，自动停止光盘旋转效果 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 格式 中文编码查看全部
-
等待页面加载完全之后才能读取JS代码，不然会出现查不到所要元素的情况，HTML5中在<script>标签中有defer属性可以解决这一问题，但兼容性差，传统方法是市容window.onload = function() {} animationPlayState属性动画效果佳但兼容性差，还是使用暴力属性方法比较保险。 代码如下： 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"; }; } };查看全部
-
第二屏动画 大同小异 注意设置转圈数不同 防止动画出不来(难道是因为想通了会相对静止么？) 代码：(只给出了第一部分，后面两个大同小异) #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()函数控制缩放(即闪烁) 代码如下： #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页面中加入class="play"; 利用两个图像的z-index关系控制是否遮盖 代码如下 (省略-o -ms内核) #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); } }查看全部
-
第三界面的网页重构代码分为： #page3 > .p3_log{...} //慕课logo #page3 > .p3_title{...}//春字标题 #page3 > .p3_second{...}//右对联 #page3 > .p3_first{...}//左对联 #page3 > .p3_blessing {...}//福字查看全部
-
代码的快速整理 借助sublime text 的多行操作特性 分别选择行首缩进的空格和结尾的大括号 使用快捷键alt + F3进行全选，然后进行操作。查看全部
-
代码续： #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%; }查看全部
举报
0/150
提交
取消