首页 > 代码库 > 关于 移动端整屏切换专题 效果的思考
关于 移动端整屏切换专题 效果的思考
最近做了关于介绍德州扑克历史介绍和砸蛋的一个活动专题（移动端）
专题地址：http://demo.qpdiy.com/all/H5/subjects/guandan/h/index.html
里面学到了很多css3以及一些移动端特效的处理，比如页面加载动画，手机横屏提示，微信分享接口，音乐设置
HTML抬头采用1的比例制作
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=0, minimal-ui"/>
背景元素采用设置background-size:100% 100%;
.page3-cup { position: absolute; top: 170px; left: 50%; width: 175px; height: 209px; margin-left: -87px; background: url(../i/page3-cup.png) no-repeat; background-size: 100% 100%; transition: all 1.8s; text-align: center;}
关于css3的话主要是用到过渡，动画，转换
1 一些元素出场动画会使用3D转换，瞬间改变位置，或者使用
.xxx{display:none;}
.active .xxx{display:block;}
2 一些一次性的需要过渡的效果会使用过渡transition，比如透明度：
/* 红色称号缩小 */
.cup-name {
-webkit-transform: scale(20, 20);
transform: scale(20, 20);
opacity: 0;
}
.active .cup-name {
-webkit-transition: -webkit-transform 1s ease-in .5s, opacity 2s 0.5s;
transition: transform 1s ease-in .5s, opacity 2s 0.5s;
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
opacity: 1;
}
3 过渡与3D转换也会结合使用：
.section {
position: absolute;
overflow: hidden;
width: 100%;
height: 100%;
-webkit-transition: -webkit-transform .3s ease-out;
transition: transform .3s ease-out;
-webkit-transform: -webkit-translate3d(0px,100%,0px);
transform: translate3d(0px,100%,0px);
}
4 一些不断动的元素用动画animation,比如提示下拉button
1 .tv-next-btn { 2 position: absolute; 3 bottom: 30px; 4 left: 50%; 5 z-index: 20; 6 width: 42px; 7 margin-left: -21px; 8 -webkit-animation: NextBtn 2s linear infinite; 9 -moz-animation: NextBtn 2s linear infinite; 10 -o-animation: NextBtn 2s linear infinite; 11 animation: NextBtn 2s linear infinite; 12 13 -webkit-tap-highlight-color: rgba(0,0,0,0); 14 } 15 .tv-next-btn img { 16 width: 42px; 17 } 18 @-webkit-keyframes NextBtn { 19 0% { 20 -webkit-transform: translateY(0); 21 } 22 12% { 23 -webkit-transform: translateY(20px); 24 } 25 24% { 26 -webkit-transform: translateY(10px); 27 } 28 36% { 29 -webkit-transform: translateY(20px); 30 } 31 48% { 32 -webkit-transform: translateY(12px); 33 } 34 60% { 35 -webkit-transform: translateY(20px); 36 } 37 72% { 38 -webkit-transform: translateY(15px); 39 } 40 84% { 41 -webkit-transform: translateY(20px); 42 } 43 100% { 44 -webkit-transform: translateY(0); 45 } 46 } 47 @-moz-keyframes NextBtn { 48 0% { 49 -moz-transform: translateY(0); 50 } 51 12% { 52 -moz-transform: translateY(20px); 53 } 54 24% { 55 -moz-transform: translateY(10px); 56 } 57 36% { 58 -moz-transform: translateY(20px); 59 } 60 48% { 61 -moz-transform: translateY(12px); 62 } 63 60% { 64 -moz-transform: translateY(20px); 65 } 66 72% { 67 -moz-transform: translateY(15px); 68 } 69 84% { 70 -moz-transform: translateY(20px); 71 } 72 100% { 73 -moz-transform: translateY(0); 74 } 75 } 76 @-o-keyframes NextBtn { 77 0% { 78 -o-transform: translateY(0); 79 } 80 12% { 81 -o-transform: translateY(20px); 82 } 83 24% { 84 -o-transform: translateY(10px); 85 } 86 36% { 87 -o-transform: translateY(20px); 88 } 89 48% { 90 -o-transform: translateY(12px); 91 } 92 60% { 93 -o-transform: translateY(20px); 94 } 95 72% { 96 -o-transform: translateY(15px); 97 } 98 84% { 99 -o-transform: translateY(20px);100 }101 100% {102 -o-transform: translateY(0);103 }104 }105 @keyframes NextBtn {106 0% {107 transform: translateY(0);108 }109 12% {110 transform: translateY(20px);111 }112 24% {113 transform: translateY(10px);114 }115 36% {116 transform: translateY(20px);117 }118 48% {119 transform: translateY(12px);120 }121 60% {122 transform: translateY(20px);123 }124 72% {125 transform: translateY(15px);126 }127 84% {128 transform: translateY(20px);129 }130 100% {131 transform: translateY(0);132 }133 }
物体掉落效果
1 @-webkit-keyframes slogan { 2 0% { 3 top: 180px; 4 opacity: 1; 5 } 6 1% { 7 top: -180px; 8 opacity: 0; 9 }10 20% {11 top: 180px;12 opacity: 1;13 }14 40% {15 top: 100px;16 opacity: .8;17 }18 60% {19 top: 180px;20 opacity: 1;21 }22 80% {23 top: 150px;24 opacity: .8;25 }26 100% {27 top: 180px;28 opacity: 1;29 }30 }31 @keyframes slogan {32 0% {33 top: 180px;34 opacity: 0;35 }36 1% {37 top: -180px;38 opacity: 1;39 }40 20% {41 top: 180px;42 opacity: 1;43 }44 40% {45 top: 100px;46 opacity: .8;47 }48 60% {49 top: 180px;50 opacity: 1;51 }52 80% {53 top: 150px;54 opacity: .8;55 }56 100% {57 top: 180px;58 opacity: 1;59 }60 }61 .theme {62 position: absolute;63 top: -180px;64 left: 50%;65 width: 235px;66 height: 83px;67 margin-left: -116px;68 background: url(../i/theme.png) no-repeat;69 background-size: 100% 100%;70 opacity: 1;71 }72 .active .theme {73 top: 180px;74 -webkit-transition: top .2s .8s linear;75 -webkit-animation: slogan .8s linear .5s;76 animation: slogan .8s linear .5s;77 }
文字沿X轴转动出来效果
/* 沿x轴转动 */@-webkit-keyframes flip { 0% { -webkit-transform: perspective(400px) rotateX(90deg); } 30% { -webkit-transform: perspective(400px) rotateX(-20deg); } 50% { -webkit-transform: perspective(400px) rotateX(20deg); } 80% { -webkit-transform: perspective(400px) rotateX(-10deg); } 90% { -webkit-transform: perspective(400px) rotateX(10deg); } 100% { -webkit-transform: perspective(400px) rotateX(0); }}@keyframes flip { 0% { -webkit-transform: perspective(400px) rotateX(90deg); } 30% { -webkit-transform: perspective(400px) rotateX(-20deg); } 50% { -webkit-transform: perspective(400px) rotateX(20deg); } 80% { -webkit-transform: perspective(400px) rotateX(-10deg); } 90% { -webkit-transform: perspective(400px) rotateX(10deg); } 100% { -webkit-transform: perspective(400px) rotateX(0); }}.page-text { margin-top: 35px; font: bold 22px/35px simsun microsoft yahei; color: #fff; text-align: center; opacity: 0;}.page-text .yellow { color: #f4ec12;}/* 文字翻转 */.active .page-text { -webkit-animation: flip 1s ease-out; animation: flip 1s ease-out; opacity: 1;}
单词放大出来效果
.page5-blackboard img { -webkit-transform: scale(0); transform: scale(0);}.bb { position: absolute;}.bb1 { top: 0; left: -40px;}.active .bb1{ -webkit-transform: scale(0.5); transform: scale(0.5); -webkit-transition: 0.3s linear 1.2s; transition: 0.3s linear 1.2s;}
使用SVG绘制曲线时间轴效果
<!-- 动态绘制时间轴 --> <div class="timeline"> <svg width="296px" height="345px" version="1.1" xmlns="http://www.w3.org/2000/svg"> <path d="M130 10 L10 10 L10 140 L290 140 L290 260 L10 260 L10 330 L183 330" class="path1"/> </svg> </div> <!-- 动态绘制时间轴 end -->/* 绘制时间轴 */.timeline { position: absolute; top: 10px; left: 50%; z-index: 1; width: 296px; height: 345px; margin-left: -148px;}path { stroke-linecap: null; stroke-linejoin: null; stroke-dasharray: null; fill: none; stroke: #fdfb02; stroke-width: 2; stroke-dasharray: 2000; stroke-dashoffset: 2000;}.active .path1 { -webkit-animation: dash 5s linear forwards; animation: dash 5s linear forwards;}.active .path2 { -webkit-animation: dash 2s linear 1s forwards; animation: dash 2s linear 1s forwards;}@-webkit-keyframes dash { to { stroke-dashoffset: 0; }}@keyframes dash { to { stroke-dashoffset: 0; }}
关于 移动端整屏切换专题 效果的思考
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。