码迷，mamicode.com
首页 > 移动开发 > 详细

关于 移动端整屏切换专题 效果的思考

时间：2015-02-03 18:55:15      阅读：591      评论：0      收藏：0      [点我收藏+]

标签：

最近做了关于介绍德州扑克历史介绍和砸蛋的一个活动专题（移动端）

专题地址：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;
}
View Code

 

关于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 }
View Code

物体掉落效果

技术分享 
 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 }
View Code

文字沿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;
}
View Code

单词放大出来效果

技术分享 
.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;
}
View Code

使用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;
  }
}
View Code

 

关于 移动端整屏切换专题 效果的思考

标签：

原文地址：http://www.cnblogs.com/huangxiaowen/p/4270513.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！