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

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

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

时间： 2024-10-10 04:16:57

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

CSS3实现整屏切换效果

总是能看见非常多广告或者站点都是使用整屏滚动的效果,一直看着都心痒痒,想自己也实现一个.近期刚学习到css3的动画效果,所以尝试使用css3做了一个整屏切换. 页面结构 实现思路与大众方法相似.如图 每一个section就是一页内容.它的大小充满了屏幕(红色区域).一个container由多个section构成,我们通过改变container的位置,来达到页面切换的效果. container向下走.页面好像上移了,container向上走,页面就下移了. html结构例如以下: <!DOCTYP

结合css与javascript来实现手机移动端的屏幕滑动效果

今天心情不错  那就写写博客吧   今天我在这里与大家分享一下手机移动端的屏幕切换的效果希望能帮助一些刚接触js的同学 好啦 不多说,上代码 我们先上设置一个父容器div  然后里面包含了子容器 然后给它们加上 class 我这里定义好了它们的布局 接下来我们来设置它的样式 好 这里是先给父容器定义了样式  然后在给子容器定义样式 到了这里呢 基本的布局已经写好了 然后根据你的个人喜好来给每个手机屏幕切换的背景颜色 还是在style里去添加样式 背景颜色也写完了 这是我随便弄了几个颜色 接下来我

一款jquery实现的整屏切换特效

今天要为大家带来一款由jquery实现的整屏切换特效,在右侧有圆型小标,每点一个切换一屏.当然,你也可以滚动鼠标来切换页面.效果非常好.我们看下效果吧 在线预览   源码下载 html代码: <div class="wrapper active-page4"> <div class="page page1"> <h2> First page</h2> </div> <div class="p

基于html5整屏切换IDO智能手表页面滚动代码

之前为大大家介绍了一款jquery实现的整屏切换特效.今天分享一款IDO智能手表页面滚动html5代码.这是一款基于jQuery+HTML5实现的页面滚动效果代码.效果图如下: 在线预览   源码下载 部分代码: <div class="main" id="main"> <div class="page page1"> <div class="head-pic"> <div style

javascript设计模式实践之迭代器--具有百叶窗切换图片效果的JQuery插件（一）

类似于幻灯片的切换效果,有时需要在网页中完成一些图片的自动切换效果,比如广告,宣传,产品介绍之类的,那么单纯的切就没意思了,需要在切换的时候通过一些效果使得切换生动些. 比较常用之一的就是窗帘切换了. 先贴上完成的效果. 实现原理不复杂,在动的一条一条的称之为“窗帘条”或者是“strip”,每一个strip都是一个div,类似于雪碧图的方式将其背景图的位置设置为strip的可视位置,然后用jquery的animate让他们按照一定规律动起来就完成窗帘切换效果了. 为了使用方便,将这个功能作为jq

点击enter回车键实现表单元素切换焦点效果

点击enter回车键实现表单元素切换焦点效果:现在网站都比较追求人性化,比如填写表单的时候,能够实现点击回车就可以切换表单元素的焦点,这样比使用鼠标进行切换更能让人接受,下面就通过代码实例介绍一下如何实现此功能.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://w

javascript设计模式实践之职责链--具有百叶窗切换图片效果的JQuery插件（三）

在上一篇<javascript设计模式实践之模板方法--具有百叶窗切换图片效果的JQuery插件(二)>里,通过采用模板方法模式完成了切换效果对象的构建编写. 接下来就是完成各效果对象的调用和联动. 切换要求:当前图片显示指定时间后执行切换效果并切换下一张图片,最后一个切换后从头开始. 按照要求一个效果对象完成后要执行下一个,最后一个完成后要从头开始, 看上去就是一个带状态通知的环形列表,类似于这样的特征,可以采用职责链模式来构建. 职责链就是由不同的功能处理构成的链表,每一个功能处理作为一个

场景切换的效果

在上次的场景切换中增加代码,并在res中添加一个图片,作为第一个场景中的图片 HelloWorldScene.cpp中的 bool HelloWorld::init() { ////////////////////////////// // 1. super init first if ( !Layer::init() ) { return false; } /** * 以下代码实现的是切换场景的目的, * 点击文本框中的字体时,切换场景,有图片 */ //获得可见区域的大小 Size visi

iOS Controller中视图切换动画效果

最近在一个小项目中遇到一个动画切换的效果,一时被难到了,后来又去看了下苹果公司提供的动画类,找到了几个动画的执行方法,这些默认的动画方法足够满足一般需求的动画效果了,接下来贴代码 首先我们在Controller中创建对应的按钮按钮 CGFloat mainHeight = [UIScreen mainScreen].bounds.size.height; NSArray titleArr = @[@"添加",@"翻页",@"移入",@"