-
div相對設備居中：{ position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; height:; width:; }查看全部
-
標簽加如css屬性：display：none 隱藏該標簽查看全部
-
項目流程：切圖--重構--前端--優(yōu)化查看全部
-
小型移動端項目分析： 性能優(yōu)化分析: 為了性能和流暢，用css3 + js 來實現主要動畫特效。。。 使用原生態(tài)的js來實現翻頁效果，不使用任何類庫。。。查看全部
-
小型移動端項目分析： 開發(fā)技能分析: 為了性能和流暢，用css3 + js 來實現主要動畫特效。。。 使用原生態(tài)的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、實現背景音樂效果，點擊右上角的時候音樂暫停，再點擊繼續(xù)播放 2、右上角音樂暫停和繼續(xù)播放的動畫效果 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
提交
取消