HTML5 - 用CSS3动画制作场景切换效果（移动，旋转，淡入淡出等）

最新推荐文章于 2022-07-30 16:33:43 发布
最新推荐文章于 2022-07-30 16:33:43 发布
阅读量322 收藏
点赞数
原文链接：http://www.cnblogs.com/zijue/p/9909919.html
版权 
  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4   <meta charset="utf-8">
  5   <title>HTML5-页面切换动画</title>
  6   <link href="animations.css" rel="stylesheet">
  7   <script src="modernizr.custom.js"></script>
  8   <script src="jquery-1.8.0.min.js"></script>
  9   <style>
 10     #viewsWrapper {
 11         top:0px;
 12         left:0px;
 13         width:300px;
 14         height:200px;
 15         position:relative;
 16         overflow: hidden;
 17     }
 18 
 19     #view1 {
 20         background:#dddd00;
 21     }
 22 
 23     #view2 {
 24         background:#ff00ff;
 25     }
 26 
 27     #view3 {
 28         background:#cc00ff;
 29     }
 30 
 31     #view4 {
 32         background:#00cccc;
 33     }
 34 
 35     .pt-page {
 36         width: 100%;
 37         height: 100%;
 38         position: absolute;
 39         top: 0;
 40         left: 0;
 41         visibility: hidden;
 42         overflow: hidden;
 43         -webkit-backface-visibility: hidden;
 44         -moz-backface-visibility: hidden;
 45         backface-visibility: hidden;
 46         -webkit-transform: translate3d(0, 0, 0);
 47         -moz-transform: translate3d(0, 0, 0);
 48         transform: translate3d(0, 0, 0);
 49         -webkit-transform-style: preserve-3d;
 50         -moz-transform-style: preserve-3d;
 51         transform-style: preserve-3d;
 52     }
 53     .pt-page-current,
 54     .no-js .pt-page {
 55         visibility: visible;
 56         z-index: 1;
 57     }
 58   </style>
 59   <script>
 60     //当前页面移动完毕
 61     var endCurrPage = false;
 62     //后续页面移动完毕
 63     var endNextPage = false;
 64     //入场动画和出场动画
 65     var outClass = '';
 66     var inClass = '';
 67 
 68     var animEndEventNames = {
 69             'WebkitAnimation' : 'webkitAnimationEnd',
 70             'OAnimation' : 'oAnimationEnd',
 71             'msAnimation' : 'MSAnimationEnd',
 72             'animation' : 'animationend'
 73         },
 74         // animation end event name
 75         animEndEventName = animEndEventNames[ Modernizr.prefixed( 'animation' ) ]
 76 
 77     $(function() {
 78         //保存各个View的默认class
 79         $(".pt-page").each( function() {
 80             var $page = $( this );
 81             $page.data( 'originalClassList', $page.attr( 'class' ) );
 82         } );
 83         //设置默认页面
 84         $(".pt-page").eq(0).addClass( 'pt-page-current' );
 85 
 86         //添加动画样式单选框
 87         var str = "";
 88         for(var i=1;i<=67;i++){
 89             str += '<input type="radio" name="myAnimation" value="'+i+'" />效果'+i;
 90             if(i%7==0){
 91                 str += "<br/>";
 92             }
 93         }
 94         $("#radiosDiv").html(str);
 95     });
 96 
 97     //View切换
 98     function changeView(newView){
 99         //设置动画效果   
100         var animationType = $('input:radio[name="myAnimation"]:checked:eq(0)').val();
101         getAnimationClass(parseInt(animationType));
102 
103         $currPage = $(".pt-page-current").eq(0);
104         $nextPage = $(newView);
105 
106         //清除原来添加的动画，层级等样式
107         //(正常动画结束时会自动清除，这样做防止用户在动画结束前就点击切换其他的)
108         $(".pt-page").each( function() {
109             $(this).attr( 'class', $(this).data( 'originalClassList' ) );
110         });
111         $currPage.addClass("pt-page-current");
112         $nextPage.addClass("pt-page-current");
113 
114 
115         //如果就是当页则不切换
116         if($currPage.attr("id") == $nextPage.attr("id")){
117             return;
118         }
119 
120         //新页面入场
121         $currPage.addClass(outClass).on( animEndEventName, function() {
122             $currPage.off( animEndEventName );
123             endCurrPage = true;
124             if( endNextPage ) {
125                 onEndAnimation( $currPage, $nextPage );
126             }
127         } );
128 
129         //旧页面出场
130         $nextPage.addClass(inClass).on( animEndEventName, function() {
131             $nextPage.off( animEndEventName );
132             endNextPage = true;
133             if( endCurrPage ) {
134                 onEndAnimation( $currPage, $nextPage );
135             }
136         } );
137     }
138 
139     //所有动画都结束后
140     function onEndAnimation( $outpage, $inpage ) {
141         endCurrPage = false;
142         endNextPage = false;
143         //resetPage( $outpage, $inpage );
144         //isAnimating = false;
145         $outpage.attr( 'class', $outpage.data( 'originalClassList' ) );
146         $inpage.attr( 'class', $inpage.data( 'originalClassList' ) + ' pt-page-current' );
147     }  
148 
149     function getAnimationClass(animationType) {
150         switch(animationType) {
151             case 1:    
152                 outClass = 'pt-page-moveToLeft';
153                 inClass = 'pt-page-moveFromRight';
154                 break;
155             case 2:
156                 outClass = 'pt-page-moveToRight';
157                 inClass = 'pt-page-moveFromLeft';
158                 break;
159             case 3:
160                 outClass = 'pt-page-moveToTop';
161                 inClass = 'pt-page-moveFromBottom';
162                 break;
163             case 4:
164                 outClass = 'pt-page-moveToBottom';
165                 inClass = 'pt-page-moveFromTop';
166                 break;
167             case 5:
168                 outClass = 'pt-page-fade';
169                 inClass = 'pt-page-moveFromRight pt-page-ontop';
170                 break;
171             case 6:
172                 outClass = 'pt-page-fade';
173                 inClass = 'pt-page-moveFromLeft pt-page-ontop';
174                 break;
175             case 7:
176                 outClass = 'pt-page-fade';
177                 inClass = 'pt-page-moveFromBottom pt-page-ontop';
178                 break;
179             case 8:
180                 outClass = 'pt-page-fade';
181                 inClass = 'pt-page-moveFromTop pt-page-ontop';
182                 break;
183             case 9:
184                 outClass = 'pt-page-moveToLeftFade';
185                 inClass = 'pt-page-moveFromRightFade';
186                 break;
187             case 10:
188                 outClass = 'pt-page-moveToRightFade';
189                 inClass = 'pt-page-moveFromLeftFade';
190                 break;
191             case 11:
192                 outClass = 'pt-page-moveToTopFade';
193                 inClass = 'pt-page-moveFromBottomFade';
194                 break;
195             case 12:
196                 outClass = 'pt-page-moveToBottomFade';
197                 inClass = 'pt-page-moveFromTopFade';
198                 break;
199             case 13:
200                 outClass = 'pt-page-moveToLeftEasing pt-page-ontop';
201                 inClass = 'pt-page-moveFromRight';
202                 break;
203             case 14:
204                 outClass = 'pt-page-moveToRightEasing pt-page-ontop';
205                 inClass = 'pt-page-moveFromLeft';
206                 break;
207             case 15:
208                 outClass = 'pt-page-moveToTopEasing pt-page-ontop';
209                 inClass = 'pt-page-moveFromBottom';
210                 break;
211             case 16:
212                 outClass = 'pt-page-moveToBottomEasing pt-page-ontop';
213                 inClass = 'pt-page-moveFromTop';
214                 break;
215             case 17:
216                 outClass = 'pt-page-scaleDown';
217                 inClass = 'pt-page-moveFromRight pt-page-ontop';
218                 break;
219             case 18:
220                 outClass = 'pt-page-scaleDown';
221                 inClass = 'pt-page-moveFromLeft pt-page-ontop';
222                 break;
223             case 19:
224                 outClass = 'pt-page-scaleDown';
225                 inClass = 'pt-page-moveFromBottom pt-page-ontop';
226                 break;
227             case 20:
228                 outClass = 'pt-page-scaleDown';
229                 inClass = 'pt-page-moveFromTop pt-page-ontop';
230                 break;
231             case 21:
232                 outClass = 'pt-page-scaleDown';
233                 inClass = 'pt-page-scaleUpDown pt-page-delay300';
234                 break;
235             case 22:
236                 outClass = 'pt-page-scaleDownUp';
237                 inClass = 'pt-page-scaleUp pt-page-delay300';
238                 break;
239             case 23:
240                 outClass = 'pt-page-moveToLeft pt-page-ontop';
241                 inClass = 'pt-page-scaleUp';
242                 break;
243             case 24:
244                 outClass = 'pt-page-moveToRight pt-page-ontop';
245                 inClass = 'pt-page-scaleUp';
246                 break;
247             case 25:
248                 outClass = 'pt-page-moveToTop pt-page-ontop';
249                 inClass = 'pt-page-scaleUp';
250                 break;
251             case 26:
252                 outClass = 'pt-page-moveToBottom pt-page-ontop';
253                 inClass = 'pt-page-scaleUp';
254                 break;
255             case 27:
256                 outClass = 'pt-page-scaleDownCenter';
257                 inClass = 'pt-page-scaleUpCenter pt-page-delay400';
258                 break;
259             case 28:
260                 outClass = 'pt-page-rotateRightSideFirst';
261                 inClass = 'pt-page-moveFromRight pt-page-delay200 pt-page-ontop';
262                 break;
263             case 29:
264                 outClass = 'pt-page-rotateLeftSideFirst';
265                 inClass = 'pt-page-moveFromLeft pt-page-delay200 pt-page-ontop';
266                 break;
267             case 30:
268                 outClass = 'pt-page-rotateTopSideFirst';
269                 inClass = 'pt-page-moveFromTop pt-page-delay200 pt-page-ontop';
270                 break;
271             case 31:
272                 outClass = 'pt-page-rotateBottomSideFirst';
273                 inClass = 'pt-page-moveFromBottom pt-page-delay200 pt-page-ontop';
274                 break;
275             case 32:
276                 outClass = 'pt-page-flipOutRight';
277                 inClass = 'pt-page-flipInLeft pt-page-delay500';
278                 break;
279             case 33:
280                 outClass = 'pt-page-flipOutLeft';
281                 inClass = 'pt-page-flipInRight pt-page-delay500';
282                 break;
283             case 34:
284                 outClass = 'pt-page-flipOutTop';
285                 inClass = 'pt-page-flipInBottom pt-page-delay500';
286                 break;
287             case 35:
288                 outClass = 'pt-page-flipOutBottom';
289                 inClass = 'pt-page-flipInTop pt-page-delay500';
290                 break;
291             case 36:
292                 outClass = 'pt-page-rotateFall pt-page-ontop';
293                 inClass = 'pt-page-scaleUp';
294                 break;
295             case 37:
296                 outClass = 'pt-page-rotateOutNewspaper';
297                 inClass = 'pt-page-rotateInNewspaper pt-page-delay500';
298                 break;
299             case 38:
300                 outClass = 'pt-page-rotatePushLeft';
301                 inClass = 'pt-page-moveFromRight';
302                 break;
303             case 39:
304                 outClass = 'pt-page-rotatePushRight';
305                 inClass = 'pt-page-moveFromLeft';
306                 break;
307             case 40:
308                 outClass = 'pt-page-rotatePushTop';
309                 inClass = 'pt-page-moveFromBottom';
310                 break;
311             case 41:
312                 outClass = 'pt-page-rotatePushBottom';
313                 inClass = 'pt-page-moveFromTop';
314                 break;
315             case 42:
316                 outClass = 'pt-page-rotatePushLeft';
317                 inClass = 'pt-page-rotatePullRight pt-page-delay180';
318                 break;
319             case 43:
320                 outClass = 'pt-page-rotatePushRight';
321                 inClass = 'pt-page-rotatePullLeft pt-page-delay180';
322                 break;
323             case 44:
324                 outClass = 'pt-page-rotatePushTop';
325                 inClass = 'pt-page-rotatePullBottom pt-page-delay180';
326                 break;
327             case 45:
328                 outClass = 'pt-page-rotatePushBottom';
329                 inClass = 'pt-page-rotatePullTop pt-page-delay180';
330                 break;
331             case 46:
332                 outClass = 'pt-page-rotateFoldLeft';
333                 inClass = 'pt-page-moveFromRightFade';
334                 break;
335             case 47:
336                 outClass = 'pt-page-rotateFoldRight';
337                 inClass = 'pt-page-moveFromLeftFade';
338                 break;
339             case 48:
340                 outClass = 'pt-page-rotateFoldTop';
341                 inClass = 'pt-page-moveFromBottomFade';
342                 break;
343             case 49:
344                 outClass = 'pt-page-rotateFoldBottom';
345                 inClass = 'pt-page-moveFromTopFade';
346                 break;
347             case 50:
348                 outClass = 'pt-page-moveToRightFade';
349                 inClass = 'pt-page-rotateUnfoldLeft';
350                 break;
351             case 51:
352                 outClass = 'pt-page-moveToLeftFade';
353                 inClass = 'pt-page-rotateUnfoldRight';
354                 break;
355             case 52:
356                 outClass = 'pt-page-moveToBottomFade';
357                 inClass = 'pt-page-rotateUnfoldTop';
358                 break;
359             case 53:
360                 outClass = 'pt-page-moveToTopFade';
361                 inClass = 'pt-page-rotateUnfoldBottom';
362                 break;
363             case 54:
364                 outClass = 'pt-page-rotateRoomLeftOut pt-page-ontop';
365                 inClass = 'pt-page-rotateRoomLeftIn';
366                 break;
367             case 55:
368                 outClass = 'pt-page-rotateRoomRightOut pt-page-ontop';
369                 inClass = 'pt-page-rotateRoomRightIn';
370                 break;
371             case 56:
372                 outClass = 'pt-page-rotateRoomTopOut pt-page-ontop';
373                 inClass = 'pt-page-rotateRoomTopIn';
374                 break;
375             case 57:
376                 outClass = 'pt-page-rotateRoomBottomOut pt-page-ontop';
377                 inClass = 'pt-page-rotateRoomBottomIn';
378                 break;
379             case 58:
380                 outClass = 'pt-page-rotateCubeLeftOut pt-page-ontop';
381                 inClass = 'pt-page-rotateCubeLeftIn';
382                 break;
383             case 59:
384                 outClass = 'pt-page-rotateCubeRightOut pt-page-ontop';
385                 inClass = 'pt-page-rotateCubeRightIn';
386                 break;
387             case 60:
388                 outClass = 'pt-page-rotateCubeTopOut pt-page-ontop';
389                 inClass = 'pt-page-rotateCubeTopIn';
390                 break;
391             case 61:
392                 outClass = 'pt-page-rotateCubeBottomOut pt-page-ontop';
393                 inClass = 'pt-page-rotateCubeBottomIn';
394                 break;
395             case 62:
396                 outClass = 'pt-page-rotateCarouselLeftOut pt-page-ontop';
397                 inClass = 'pt-page-rotateCarouselLeftIn';
398                 break;
399             case 63:
400                 outClass = 'pt-page-rotateCarouselRightOut pt-page-ontop';
401                 inClass = 'pt-page-rotateCarouselRightIn';
402                 break;
403             case 64:
404                 outClass = 'pt-page-rotateCarouselTopOut pt-page-ontop';
405                 inClass = 'pt-page-rotateCarouselTopIn';
406                 break;
407             case 65:
408                 outClass = 'pt-page-rotateCarouselBottomOut pt-page-ontop';
409                 inClass = 'pt-page-rotateCarouselBottomIn';
410                 break;
411             case 66:
412                 outClass = 'pt-page-rotateSidesOut';
413                 inClass = 'pt-page-rotateSidesIn pt-page-delay200';
414                 break;
415             case 67:
416                 outClass = 'pt-page-rotateSlideOut';
417                 inClass = 'pt-page-rotateSlideIn';
418                 break;
419         }
420     }
421   </script>
422 </head>
423 <body>
424     <div id="viewsWrapper">
425         <div id="view1" class="pt-page">这个是页面1......</div>
426         <div id="view2" class="pt-page">这个是页面2......</div>
427         <div id="view3" class="pt-page">这个是页面3......</div>
428         <div id="view4" class="pt-page">这个是页面4......</div>
429     </div>
430     <br/>
431     <input type="button" onclick="changeView('#view1')" value="切换页面1"/>
432     <input type="button" onclick="changeView('#view2')" value="切换页面2"/>
433     <input type="button" onclick="changeView('#view3')" value="切换页面3"/>
434     <input type="button" onclick="changeView('#view4')" value="切换页面4"/>
435     <br/>
436     <br/>
437     <div id="radiosDiv"></div>
438 </body>
439 </html>

 

转载于:https://www.cnblogs.com/zijue/p/9909919.html

anshuyou4769
关注
html实现显示页面切换的效果实现
sinat_41920065的博客
05-03 9463
HTML代码部分： <body> <div class="box"> <div class="title"> <ul> <li class="current" index="0">切换1</li> <li in...
html页面自动切换效果,HTML页面跳转效果
weixin_34840783的博客
05-31 1827
HTML页面跳转效果使用格式：在页面中插入duration=时间Transitionv=方式说明：duration为页面切换的时间长度，3.000表示3秒钟，一般可以直接输入3便可；transition为切换效果，从1-23共22种不同的切换效果，其中23为随机效果。效果 　Content 　Transitionv盒状收缩 RevealTrans 0盒状展开　 RevealTrans 1圆形收缩　...
html切换效果
欢迎关注免费星球ComfySpace：https://t.zsxq.com/19H0cfM1O
07-27 1092
1. 使用方式 duration：页面切换时间，1.000为1秒。 transition：切换效果代码。 2. 效果代码 0　 盒状收缩   1   盒状展开　   2　 圆形收缩　   3   圆形展开   4   向上擦除   5   向下擦除   6   向左擦除   7   向右擦除   8 垂直百页窗   9 水平百页窗   1
jquery mobile入门
Webapp html5
04-15 1174
组件 页面 jQuery Mobile 应用了 HTML5 标准的特性，在结构化的页面中完整的页面结构分为 header、 content、footer 这三个主要区域。 在 body 中插入内容块：   ...  ...  ...    data-role="page”代表这个 div 是一个 Page，在一个屏幕中只会显示一个 pag
html网页切换效果，css图片切换效果
m0_71814235的博客
07-30 2101
html网页切换效果，css图片切换效果
CSS3卡通城市动画场景切换特效特效代码
03-20
【CSS3卡通城市动画场景切换特效】是一种利用现代Web技术为网页添加生动有趣视觉效果的方法。这个特效结合了CSS3的强大力量和jQuery库，为用户呈现出一个卡通风格的城市建筑场景，通过平滑的动画过渡实现场景间的...
jQ+css3注册步骤动画效果 jQuery+css3注册步骤动画效果网页特效.zip
11-19
在这个特效中，CSS3被用来实现步骤指示器的状态变化、表单元素的淡入淡出效果，以及可能的背景颜色或边框动画。例如，使用`transition`属性可以定义当元素的某个属性改变时如何平滑过渡；使用`animation`属性可以...
css动画 - 把你喜欢css动画嵌入到浏览器中
最新发布
06-01
可以通过CSS精灵图（CSS Sprites）和transform的translateX、translateY属性来实现角色的移动，或者使用CSS的scale属性调整大小，配合opacity属性实现淡入淡出效果，让海绵宝宝在页面上生动起来。 五、个人明信片 ...
18种炫酷CSS3动画效果库Mimic.css
12-13
1. **FadeIn/Out**：淡入淡出效果，常用于元素的出现和消失。 2. **SlideIn/Out**：滑动进入和退出效果，适用于页面滚动或导航菜单项。 3. **RotateIn/Out**：旋转进入和退出，增加趣味性。 4. **ZoomIn/Out**：放大...
HTML5+CSS3房屋装饰工具 移动鼠标3D动画查看
06-11
这个应用充分展示了HTML5的Canvas、SVG或WebGL等特性以及CSS3的3D转换、动画效果。 首先，HTML5的Canvas元素是此工具的基础，它允许开发者在网页上绘制2D图形。在这个应用中，Canvas用于渲染3D场景，通过JavaScript...
HTML 网页页面切换的各种变换效果
09-28
好的情况下当页面跳转时，会产生一些变换效果，比较漂亮，其实就是利用了下面的代码。
HTML5页面，上下切换页面效果
12-05
HTML5页面，上下切换页面效果 模拟原生app，实现上下切换
html5+css3 animation制作各种页面过渡切换动画效果
12-13
厌烦了然后出现一片空白的等待页面？本款插件能够为您带来震撼的html5页面过渡切换效果，各种各样的效果几十种，使用css3 animation属性和html5技术打造而成。
html5 canvas酷炫的纸屑3D旋转动画特效
11-03
html5 canvas酷炫的纸屑3D旋转动画特效 html5 canvas酷炫的纸屑3D旋转动画特效
html设置网页换页效果,HTML教程:网页页面切换的各种效果
weixin_39702400的博客
06-03 1276
其中,n表示的就是下面的数，n取不同的值，对应有不同的效果：0、Box in1、Box out2、Circle in3、Circle out4、Wipe up5、Wipe down6、Wipe right7、Wipe left8、Vertical blinds9、Horizontal blinds10、Checkerboard across11、Checkerboard down12、Random...
html切换页面效果,jQuery实现切换页面过渡动画效果
weixin_35828357的博客
06-03 988
直接为大家介绍制作过程，希望大家可以喜欢。HTML结构该页面切换特效的HTML结构使用一个元素来作为页面的包裹元素，div.cd-cover-layer用于制作页面切换时的遮罩层，div.cd-loading-bar是进行ajax加载时的loading进度条。Page TransitionCSS样式该页面切换特效中使用body::before和body::after伪元素在页面切换过程中创建两个遮...
HTML页面跳转效果
01-15 1626
使用格式：在页面中插入 duration=时间Transitionv=方式说明：duration为页面切换的时间长度，3.000表示3秒钟，一般可以直接输入3便可；transition为切换效果，从1-23共22种不同的切换效果，其中23为随机效果。效果 　Content 　Transitionv盒状收缩 RevealTrans 0　盒状展开　 RevealTrans 1圆形收缩　 Rev
前端 利用html实现分页切换效果
qq_51114151的博客
02-08 8677
本篇文章主要要实现的功能效果如下： 包含首页 尾页 上一页 下一页 总计的页数以及总计的条数还有跳转的功能 整体思想：先定位一个中心页 上一页、下一页就是根据定位中心页然后加减就可以实现 首页就是要根据一次要展示几页，然后分别展示要展示的页数 尾页就是根据总共有的页数进行定位，然后分别展示要展示的页数 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <tit..
HTML5+CSS3动画在WebAPP中的应用与挑战
"html5+css3之动画在webapp中的应用" HTML5和CSS3的出现极大地提升了Web应用程序（webapp）的用户体验，特别是在动画效果方面。然而，随着移动设备的多样化，动画在webapp中的实现面临诸多挑战。动画不仅是webapp的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值