-
- 慕UI5236663 2018-12-03
page2_loading
- 0赞 · 0采集
-
- Evoque 2017-02-12
- 项目开发流程
-
截图0赞 · 0采集
-
- 慕工程2957023 2016-12-01
- 如果两个页面之间需要切换，可以加入具有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;} }
- 0赞 · 0采集
-
- 班大人 2016-10-29
- forwards属于animation-fill-mode属性的值，意思是当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
-
截图0赞 · 0采集
-
- 么苏 2016-03-13
- 音乐控制
-
截图0赞 · 0采集
-
- qq_殇璃_1 2016-03-02
- 交互效果
-
截图0赞 · 0采集
-
- 侠客岛的含笑 2016-02-16
- 如果两个页面之间需要切换，可以加入具有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;} }
- 2赞 · 1采集
-
- Lxxyx 2016-02-13
- opcaity 0到1可以有过渡效果，简直amazing。
- 0赞 · 0采集
-
- 李晓健 2016-02-11
- 添加页面的过度效果。
-
截图1赞 · 1采集
-
- 呵Sever 2016-02-05
- //css: #page3.fadein{ transform: translate(0,-100%); -ms-transform: translate(0,-100%); -webkit-transform: translate(0,-100%); -o-transform: translate(0,-100%); -moz-transform: translate(0,-100%); }
-
截图0赞 · 0采集
-
- 呵Sever 2016-02-05
- //css代码： div#page2.fadeout{ transform: translate(0,-100%); -ms-transform: translate(0,-100%); -webkit-transform: translate(0,-100%); -o-transform: translate(0,-100%); -moz-transform: translate(0,-100%); opacity: .3; }
-
截图0赞 · 0采集
-
- 呵Sever 2016-02-05
- 代码如下： var page1 = document.getElementById("page1"); var page2 = document.getElementById("page2"); var page3 = document.getElementById("page3"); //点击第一页的翻页效果 page1.addEventListener("touchstart", function() { this.style.display = "none"; page2.style.display = "block"; setTimeout(function() { page2.setAttribute("class","page fadeout") page3.setAttribute("class","page fadein") //page2.style.display = "none"; //page3.style.display = "block"; }, 5500); }, false);
-
截图0赞 · 0采集
-
- lynhao 2016-02-04
- 老师讲漏的内容: 1.第二张图片的淡出，样式文件加入如下代码: #page2.fadeOut { opacity: .3; -webkit-transform: translate(0,-100%); transform:translate(0,-100%); } 最后一张淡入代码： #page3.fadeIn { -webkit-transform: translate(0 -100%); transform: translate(0, -100%); } js文件获取page1，page2，page3 var page1 = document.getElementById("page1"); var page2 = document.getElementById("page2"); var page3 = document.getElementById("page3"); 对page1加入监听事件： //点击屏幕开始好运2016 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);
-
截图3赞 · 0采集
-
- 慕斯卡7752168 2016-02-04
- 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); };
- 0赞 · 0采集
-
- 慕斯卡7752168 2016-02-04
- 在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;} }
- 0赞 · 0采集
数据加载中...