-
div相对设备居中：{ position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; height:; width:; }查看全部
-
标签加如css属性：display：none 隐藏该标签查看全部
-
项目流程：切图--重构--前端--优化查看全部
-
小型移动端项目分析： 性能优化分析: 为了性能和流畅，用css3 + js 来实现主要动画特效。。。 使用原生态的js来实现翻页效果，不使用任何类库。。。查看全部
-
小型移动端项目分析： 开发技能分析: 为了性能和流畅，用css3 + js 来实现主要动画特效。。。 使用原生态的js来实现翻页效果，不使用任何类库。。。查看全部
-
css3 神器：box-sizing:border-box{ -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -o-box-sizing:border-box; box-sizing:border-box; }查看全部
-
分析和设计查看全部
-
本课程的学习目标。。。查看全部
-
#page2 > .p2_circle:before{ position: absolute; top:0; right: 0; left: 0; bottom: 0; margin: auto; border-radius: 50%; content: ""; background:url("../img/p2_circle_middle.png") center center no-repeat; background-size:100%; width: 45.625vw; height: 45.625vw; } #page2 > .p2_circle:after{ position: absolute; top:0; right: 0; left: 0; bottom: 0; margin: auto; border-radius: 50%; content: ""; background:url("../img/p2_circle_inner.png") center center no-repeat; background-size:100%; width: 39.937vw; height: 39.937vw; } #page2 > .p2_2016{ position: absolute; top:0; right: 0; left: 0; bottom: 0; margin: auto; background:url("../img/p2_2016.png") center center no-repeat; background-size:100%; width: 27.5vw; height: 6.24vh; } /*page3*/ #page3{ background: url("../img/p3_bg.jpg") center center no-repeat; background-size: 100%; }查看全部
-
需求： 1、实现背景音乐效果，点击右上角的时候音乐暂停，再点击继续播放 2、右上角音乐暂停和继续播放的动画效果 3、页面切换的动画效果 4、等第三章页面加载好之后，再滑动到第三章页面（ T^T要是直接设置延时加载，弱爆了...）查看全部
-
#page1 > .p1_imooc{ position: absolute; right: 0; bottom:9vh; left: 0; background: url("../img/p1_imooc.jpg") center center no-repeat; background-size: 100%; width: 27.656vw; height: 18.63vh; margin: auto; } #page1 > .p1_words{ font-size: 2.134rem; position: absolute; right: 0; bottom:0; left: 0; text-align: center; color: #231815; } /*page2*/ #page2{ background: url("../img/p2_bg.jpg") center center no-repeat; background-size: 100%; } #page2 > .p2_circle{ position: absolute; top:0; right: 0; left: 0; bottom: 0; margin: auto; border-radius: 50%; background:url("../img/p2_circle_outer.png") center center no-repeat; background-size:100%; width: 59.375vw; height: 59.375vw; }查看全部
-
#page1{ background: url("../img/p1_bg.jpg") center center no-repeat; background-size: 100%; } #page1>.p1_lantern{ width:45vw; height:72vh; font-size: 2.506rem; position: absolute;; top: -3.4%; right: 0; left:0; margin: auto; background: url("../img/p1_lantern")center center no-repeat; background-size: 100%; box-sizing:border-box; -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; 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; }查看全部
-
/*all tag*/ *{ margin:0; padding:0; border:none; font-size: 1.562vw; font-family: "微软雅黑"; } html, body{height:100%} #music{ width:15vw; height: 15vw; border:4px solid #ef1639; position: fixed; top:3vh; right: 4vw; z-index: 5; border-radius: 50%; background: #fff; } #music> img:first-of-type{ position: absolute; top:24%; right:2.5%; width:28.421%; } #music> img:last-of-type{ position: absolute;; top:0; right:0; bottom: 0; left: 0; width: 79% } /*page*/ .page{ height:100%; position: absolute; width: 100%; } .page>.bg{ position:absolute; height:100%; width: 100%; z-index: -1; } /*page1*/查看全部
-
this.style.animationPlayState 兼容性差，如果针对iphone用户可以增加兼容性代码，加上前缀webkit，安卓4.4以下就比较遗憾查看全部
-
实现效果demo：效果图3： 默认背景音乐，最终实现的效果图...查看全部
举报
0/150
提交
取消