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

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

专题地址：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

 

posted on 2015-02-03 17:20  小海豚Dolphins  阅读(536)  评论(0)  编辑  收藏  举报