Web笔记··By/蜜汁炒酸奶

基于touchSwipe微信手机端微场景HTML5页面特效(适用于PC端)

这是适用于一个PC(电脑)端和手机端的下拉滑动切换网页的效果实现。

相关文章推荐: 基于Zepto的微信手机端微场景HTML5页面特效

代码

主要HTML代码

<div id="main" class="main">

    <img id="main_top" src="img/top.png" />

    <section id='sec01' class="main" style="top:0%;background: red; ">
    </section>

    <section id='sec02' class="main" style="background: yellow;">
    </section>

    <section id='sec03' class="main" style="background: blue;">
    </section>
    <img id="main_bottom" src="img/top.png" />
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

JS代码

1、动画不重复版

即动画过去,再滑动到该页面动画不显示。 [toggle hide=“yes” title=“动画不重复版” color=“”]

<script type="text/javascript">

			var init = new Object();
			init.thisId = 0;
			var reg = new RegExp("(^|&)page=([^&]*)(&|$)");
			var r = window.location.search.substr(1).match(reg);
			if(r!=null){
				init.thisId = 2;
				$('#sec01,#sec02').css('top','-100%');
				$('#sec03').css('top','0');
			}
			$(window).load(function() {
				$('#loading').fadeOut();
				setTimeout(function() {
					$('#main').fadeIn();
				}, 1000);
				//car_sec01
				setTimeout(function(){
				$("#car_01").show();
				TweenLite.from($("#car_01"), 1, {x:"100",y:"10",scale:0.5,ease:Back.easeOut});
				TweenLite.to($("#car_01"), 1, {x:"10",y:"20",scale:1.0});
				},200);

			});


			/**
			 * 滑动锁 	true为解锁状态可以滑动
			 * 		false为锁定状态不能滑动
			 */
			init.swipeLock = true;
			/*非必须
                        init.url = '与服务器数据交互的地址';
			init.openid = '';
                          */
			init.swipeSpeed = 0.8;
			init.height = document.documentElement.clientHeight;
			var tl = new TimelineLite();
			TweenMax.to($('#main .main').eq(init.thisId),init.swipeSpeed,{top:'0%'});
			init.body = function(){
			}
			$("#main").swipe({
				swipeStatus:function(event, phase, direction, distance, duration,fingerCount) {
					$('#sec011').html(distance);
					if(fingerCount>1)return;
					if(distance<=75)return;
					if(!init.swipeLock)return;

					if(direction=='up'){
						//向上滑
						if ((init.thisId>=0) && (init.thisId<$('#main .main').length-1)) {
							$('#main .main').eq(init.thisId).css('top',75-distance+'px');
							$('#main .main').eq(init.thisId+1).css('top',init.height+75-distance+'px');
						} else{
							$('#main_bottom').css('height',distance-75);
							$('#main_bottom').css('opacity',(distance-75)/(init.height*0.15));
						}
					};
					if(direction=='down'){
						//向下滑
						if ((init.thisId>0) && (init.thisId<$('#main .main').length)) {
							$('#main .main').eq(init.thisId).css('top',distance-75+'px');
							$('#main .main').eq(init.thisId-1).css('top',distance-75-init.height+'px');
						} else{
							$('#main_top').css('height',distance-75);
							$('#main_top').css('opacity',(distance-75)/(init.height*0.15));
						}
					};

				},
				swipe:function(event, direction, distance, duration, fingerCount) {
					if(fingerCount>1)return;
					if(distance<10)return;
					if(!init.swipeLock)return;
					if(direction=='up'){
						//init.swipeLock = false;
						if ((init.thisId>=0) && (init.thisId<$('#main .main').length-1)) {
							try{
								TweenMax.to($('#main .main').eq(init.thisId),init.swipeSpeed,{top:'-100%'});
								TweenMax.to($('#main .main').eq(init.thisId+1),init.swipeSpeed,{top:'0%'});
								init.thisId++;
								setTimeout(function(){
									init.swipeLock = true;
								},init.swipeSpeed*1000);
							}catch(e){
								console.log(e);
							}
						}else{
							if (init.thisId==($('#main .main').length-1)) {
								TweenMax.to('#main_bottom',init.swipeSpeed,{height:'5%',opacity:'0'});
							}
						};
					};
					if(direction=='down'){
						//init.swipeLock = false;
						if ((init.thisId>0) && (init.thisId<$('#main .main').length)) {
							try{
								init.swipeLock = false;
								TweenMax.to($('#main .main').eq(init.thisId),init.swipeSpeed,{top:'100%'});
								TweenMax.to($('#main .main').eq(init.thisId-1),init.swipeSpeed,{top:'0%'});
								init.thisId--;
								setTimeout(function(){
									init.swipeLock = true;
								},init.swipeSpeed*1000);
							}catch(e){
								console.log(e);
							}
						}else{
							if(init.thisId==0){
								TweenMax.to('#main_top',init.swipeSpeed,{height:'5%',opacity:'0'});
							}
						};
					};
				},
			});
			/**
			 * 阻止触摸
			document.addEventListener('touchmove', function (event) {
				event.preventDefault();
			}, false);
			 */


		</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124

[/toggle]

2、动画重复之简单版

这个是不需要在单页面对某一元素单独使用timeout延迟时的。 [toggle hide=“yes” title=“动画重复之简单版” color=“”]

<script type="text/javascript">

			var init = new Object();

			$(window).load(function() {
				$('#loading').fadeOut();
				setTimeout(function() {
					$('#main').fadeIn();
				}, 6000);
			});


			/**
			 * 滑动锁 	true为解锁状态可以滑动
			 * 		false为锁定状态不能滑动
			 */
			init.swipeLock = true;
			/*非必须
            init.url = '与服务器数据交互的地址';
			init.openid = '';
                          */
			init.swipeSpeed = 0.8;
			init.height = document.documentElement.clientHeight;
			var tl = new TimelineLite();
			TweenMax.to($('#main .main').eq(init.thisId),init.swipeSpeed,{top:'0%'});
			init.body = function(){
			}

			$("#main").swipe({
				swipeStatus:function(event, phase, direction, distance, duration,fingerCount) {
					$('#sec011').html(distance);
					if(fingerCount>1)return;
					if(distance<=75)return;
					if(!init.swipeLock)return;

					if(direction=='up'){
						//向上滑
						if ((init.thisId>=0) && (init.thisId<$('#main .main').length-1)) {
							$('#main .main').eq(init.thisId).css('top',75-distance+'px');
							$('#main .main').eq(init.thisId+1).css('top',init.height+75-distance+'px');
							$('#main .main').eq(init.thisId+1).show();
						} else{
							$('#main_bottom').css('height',distance-75);
							$('#main_bottom').css('opacity',(distance-75)/(init.height*0.15));
						}
					};
					if(direction=='down'){
						//向下滑
						if ((init.thisId>0) && (init.thisId<$('#main .main').length)) {
							$('#main .main').eq(init.thisId).css('top',distance-75+'px');
							$('#main .main').eq(init.thisId-1).css('top',distance-75-init.height+'px');
							$('#main .main').eq(init.thisId-1).show();
						} else{
							$('#main_top').css('height',distance-75);
							$('#main_top').css('opacity',(distance-75)/(init.height*0.15));
						}
					};

				},
				swipe:function(event, direction, distance, duration, fingerCount) {
					if(fingerCount>1)return;
					if(distance<10)return;
					if(!init.swipeLock)return;

					if(direction=='up'){

						if ((init.thisId>=0) && (init.thisId<$('#main .main').length-1)) {
							try{
								TweenMax.to($('#main .main').eq(init.thisId),init.swipeSpeed,{top:'-100%'});
								TweenMax.to($('#main .main').eq(init.thisId+1),init.swipeSpeed,{top:'0%'});

								init.thisId++;
								setTimeout(function(){
									$('#main .main').eq(init.thisId-1).hide();
									init.swipeLock = true;
								},init.swipeSpeed*1000);
							}catch(e){
								console.log(e);
							}
						}else{
							if (init.thisId==($('#main .main').length-1)) {
								TweenMax.to('#main_bottom',init.swipeSpeed,{height:'5%',opacity:'0'});
							}
						};
					};
					if(direction=='down'){
						//init.swipeLock = false;
						if ((init.thisId>0) && (init.thisId<$('#main .main').length)) {
							try{
								init.swipeLock = false;
								TweenMax.to($('#main .main').eq(init.thisId),init.swipeSpeed,{top:'100%'});
								TweenMax.to($('#main .main').eq(init.thisId-1),init.swipeSpeed,{top:'0%'});
								init.thisId--;
								setTimeout(function(){
									$('#main .main').eq(init.thisId+1).hide();
									init.swipeLock = true;
								},init.swipeSpeed*1000);
							}catch(e){
								console.log(e);
							}
						}else{
							if(init.thisId==0){
								TweenMax.to('#main_top',init.swipeSpeed,{height:'5%',opacity:'0'});
							}
						};
					};
				},
			});
			/**
			 * 阻止触摸
			document.addEventListener('touchmove', function (event) {
				event.preventDefault();
			}, false);
			 */


		</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117

[/toggle]

2、动画重复之复杂版

这个是可以对单页面元素进行各种自定义的 [toggle hide=“yes” title=“动画重复之复杂版” color=“”]

<script type="text/javascript">

			var init = new Object();

			$(window).load(function() {
				$('#loading').fadeOut();
				setTimeout(function() {
					$('#main').fadeIn();
				}, 6000);
			});

			/**
			 * 滑动锁 	true为解锁状态可以滑动
			 * 		false为锁定状态不能滑动
			 */
			init.swipeLock = true;
			/*非必须
            init.url = '与服务器数据交互的地址';
			init.openid = '';
            */
			init.swipeSpeed = 0.8;
			init.height = document.documentElement.clientHeight;
			var tl = new TimelineLite();
			TweenMax.to($('#main .main').eq(init.thisId),init.swipeSpeed,{top:'0%'});
			init.body = function(){
			}
			init.sec01 = function(){
				$('#sec01_jiantou').hide();
				clearTimeout(init.sec01jTimeout);
				init.sec01jTimeout = setTimeout(function(){
					$('#sec01_jiantou').show();
				},6000);
			}
			init.sec02 = function(){
				$('#sec02_jiantou').hide();
				clearTimeout(init.sec02jTimeout);
				init.sec02jTimeout = setTimeout(function(){
					$('#sec02_jiantou').show();
				},6000);
			}
			init.sec03 = function(){
				$('#sec03_jiantou').hide();
				clearTimeout(init.sec03jTimeout);
				init.sec03jTimeout = setTimeout(function(){
					$('#sec03_jiantou').show();
				},5000);
			}
			init.sec04 = function(){
				$('#sec04_jiantou').hide();
				clearTimeout(init.sec04jTimeout);
				init.sec04jTimeout = setTimeout(function(){
					$('#sec04_jiantou').show();
				},4500);
			}
			init.sec05 = function(){
				$('#sec05_jiantou').hide();
				clearTimeout(init.sec05jTimeout);
				init.sec05jTimeout = setTimeout(function(){
					$('#sec05_jiantou').show();
				},4500);
			}
			init.sec06 = function(){
				$('#sec06_fengyu').hide();
				$('#sec06_jiantou').hide();
				clearTimeout(init.sec06Timeout);
				init.sec06Timeout = setTimeout(function(){
					$('#sec06_fengyu').show();
				},3000);
				clearTimeout(init.sec06jTimeout);
				init.sec06jTimeout = setTimeout(function(){
					$('#sec06_jiantou').show();
				},4000);
			}
			init.sec07 = function(){
			    $('#sec07_jia').hide();
			    $('#sec07_jiantou').hide();
				clearTimeout(init.sec07Timeout);
				init.sec07Timeout = setTimeout(function(){
				$("#sec07_jia").show();
				TweenLite.from($("#sec07_jia"), 1, {scale:2.0, opacity:2.3});
				TweenLite.to($("#sec07_jia"), 1, {scale:1.0, opacity:1.0});
				},1000);
				clearTimeout(init.sec07jTimeout);
				init.sec07jTimeout = setTimeout(function(){
					$('#sec07_jiantou').show();
				},6000);
			}
			init.sec08 = function(){
				$('#sec08_baorong').hide();
				$('#sec08_guangkuo').hide();
				$('#sec08_renxing').hide();
				$('#sec08_zhuizhu').hide();
				$('#sec08_yanxu').hide();
				$('#sec08_jiating').hide();
				$('#sec08_jiantou').hide();

				/*
				*进入
				*/
				clearTimeout(init.sec08_baorongInTimeout);
				init.sec08_baorongInTimeout = setTimeout(function(){
					$('#sec08_bao').css({"top": "10%","left": "6%","width":"initial","margin":"0 auto"});
					$('#sec08_rongShang').css({"top": "45%","left":"6%","width":"initial","margin":"0 auto"});
					$('#sec08_rongXia').css({"top": "45%","left":" 6%","width":"initial","margin":"0 auto"});
					$('#sec08_baorong').show();
					$('#sec08_bao').show();
					$('#sec08_rongXia').show();
				},1000);
				clearTimeout(init.sec08_zhuizhuInTimeout);
				init.sec08_zhuizhuInTimeout = setTimeout(function(){
					$('#sec08_guangkuo').hide();
					$('#sec08_zhuizhu').show();

					$('#sec08_bao').hide();
					$('#sec08_rongXia').hide();
					$('#sec08_rongShang').css({"top": "10%","left":"6%","width":"initial","margin":"0 auto","opacity":"0.2"});
					$('#sec08_zhui').css({"top": "10%","left": "6%","width":"initial","margin":"0 auto"});
					$('#sec08_zhuzuo').css({"top": "45%","left":"6%","width":"initial","margin":"0 auto"});
					$('#sec08_zhuyou').css({"top": "47%","left":" 15%","width":"initial","margin":"0 auto"});
					$('#sec08_zhui').show();
					$('#sec08_zhuzuo').show();
					$('#sec08_zhuyou').show();
				},3000);

				clearTimeout(init.sec08_guangkuoInTimeout);
				init.sec08_guangkuoInTimeout = setTimeout(function(){
					$('#sec08_guangkuo').show();
					$('#sec08_zhui').hide();
					$('#sec08_zhuzuo').hide();
					$('#sec08_zhuyou').css({"top": "17%","left":" 4%","width":"initial","margin":"0 auto","opacity":"0.2"});
					var sec08_guangall={top:"10%",left:"32.5%",width:"initial"};
					$('#sec08_guang').css(sec08_guangall);
					$('#sec08_guangkuang').css({"top": "10%","left":"6%","width":"initial","margin":"0 auto"});
					$('#sec08_kuo').css({"top": "45%","left":" 6%","width":"initial","margin":"0 auto"});
					$('#sec08_guang').show();
					$('#sec08_guangkuang').show();
					$('#sec08_kuo').show();
				},5000);
				clearTimeout(init.sec08_yanxuInTimeout);
				init.sec08_yanxuInTimeout = setTimeout(function(){
					$('#sec08_yanxu').show();
					$('#sec08_guangkuang').hide();
					$('#sec08_kuo').hide();
					$('#sec08_guang').css({"top": "48%","left":"32.5%","width":"28%","opacity":"0.2"});
					$('#sec08_yanzuo').css({"top": "16.5%","left": "7%","width":"initial","margin":"0 auto"});
					$('#sec08_yanyou').css({"top": "10%","left":"6%","width":"19.5%","width":"initial","margin":"0 auto"});
					$('#sec08_xu').css({"top": "45%","left":" 6%","width":" 19.5%","width":"initial","margin":"0 auto"});
					$('#sec08_yanzuo').show();
					$('#sec08_yanyou').show();
					$('#sec08_xu').show();
				},7000);
				clearTimeout(init.sec08_renxingInTimeout);
				init.sec08_renxingInTimeout = setTimeout(function(){
					$('#sec08_renxing').show();
					$('#sec08_yanyou').hide();
					$('#sec08_xu').hide();
					$('#sec08_yanzuo').css({"top": "56.5%","left": "7%","width":"27%","margin":"0 auto","opacity":"0.2"});

					$('#sec08_renyou').css({"top": "14%","left": "22。5%","width":"initial","margin":"0 auto"});
					$('#sec08_renzuo').css({"top": "10%","left":"6%","width":"initial","margin":"0 auto"});
					$('#sec08_xing').css({"top": "45%","left":" 6%","width":"initial","margin":"0 auto"});
					$('#sec08_renzuo').show();
					$('#sec08_renyou').show();
					$('#sec08_xing').show();
				},9000);
				/*	*/

				clearTimeout(init.sec08_chongzuTimeout);
				init.sec08_chongzuTimeout = setTimeout(function(){
					$('#sec08_renzuo').hide();
					$('#sec08_xing').hide();
					$('#sec08_rongShang').css({"top": "10%","left":"6%","width":"initial","margin":"0 auto","opacity":"1"});
					$('#sec08_zhuyou').css({"top": "17%","left":" 4%","width":"initial","margin":"0 auto","opacity":"1"});
					$('#sec08_guang').css({"top": "48%","left":"32.5%","width":"28%","opacity":"1"});
					$('#sec08_yanzuo').css({"top": "56.5%","left": "7%","width":"27%","margin":"0 auto","opacity":"1"});
					$('#sec08_renyou').css({"top": "55%","left": "16%","width":"14%","margin":"0 auto","opacity":"1"});
					$('#sec08_jiating').show();
					$('#sec08_jiantou').show();
				},10000);
			}
			init.sec09 = function(){
				$('#sec09_car').show();
				$('#sec09_cars').show();
				$('#sec09_map').hide();
				$('#sec09_zhanwei').hide();
				$("#sec09_car").click(function() {
				 	$('#sec09_cars').hide();
					clearTimeout(init.sec09_carTimeout);
					init.sec09_carTimeout = setTimeout(function(){
					$('#sec09_car').hide();
					$('#sec09_map').show();
					$('#sec09_zhanwei').show();
					},1);
				});
				$("#sec09_cars").click(function() {
				 	$('#sec09_cars').hide();
					clearTimeout(init.sec09_carsTimeout);
					init.sec09_carsTimeout = setTimeout(function(){
					$('#sec09_car').hide();
					$('#sec09_map').show();
					$('#sec09_zhanwei').show();
					},1);
				});
			}
			$("#main").swipe({
				swipeStatus:function(event, phase, direction, distance, duration,fingerCount) {
					$('#sec011').html(distance);
					if(fingerCount>1)return;
					if(distance<=75)return;
					if(!init.swipeLock)return;

					if(direction=='up'){
						//向上滑
						if ((init.thisId>=0) && (init.thisId<$('#main .main').length-1)) {
							$('#main .main').eq(init.thisId).css('top',75-distance+'px');
							$('#main .main').eq(init.thisId+1).css('top',init.height+75-distance+'px');
							$('#main .main').eq(init.thisId+1).show();
						} else{
							$('#main_bottom').css('height',distance-75);
							$('#main_bottom').css('opacity',(distance-75)/(init.height*0.15));
						}
					};
					if(direction=='down'){
						//向下滑
						if ((init.thisId>0) && (init.thisId<$('#main .main').length)) {
							$('#main .main').eq(init.thisId).css('top',distance-75+'px');
							$('#main .main').eq(init.thisId-1).css('top',distance-75-init.height+'px');
							$('#main .main').eq(init.thisId-1).show();
						} else{
							$('#main_top').css('height',distance-75);
							$('#main_top').css('opacity',(distance-75)/(init.height*0.15));
						}
					};

				},
				swipe:function(event, direction, distance, duration, fingerCount) {
					if(fingerCount>1)return;
					if(distance<10)return;
					if(!init.swipeLock)return;

					if(direction=='up'){

						if ((init.thisId>=0) && (init.thisId<$('#main .main').length-1)) {
							try{
							//init.swipeLock = false;
							if (init.thisId == 0) {
									init.sec02();
								}
								if (init.thisId == 1) {
									init.sec03();
								}
								if (init.thisId == 2) {
									init.sec04();
								}
								if (init.thisId == 3) {
									init.sec05();
								}
								if (init.thisId == 4) {
									init.sec06();
								}
								if (init.thisId == 5) {
									init.sec07();
								}
								if (init.thisId == 6) {
									init.sec08();
								}
								if (init.thisId == 7) {
									init.sec09();
								}


								TweenMax.to($('#main .main').eq(init.thisId),init.swipeSpeed,{top:'-100%'});
								TweenMax.to($('#main .main').eq(init.thisId+1),init.swipeSpeed,{top:'0%'});

								init.thisId++;
								setTimeout(function(){
									$('#main .main').eq(init.thisId-1).hide();
									init.swipeLock = true;
								},init.swipeSpeed*1000);
							}catch(e){
								console.log(e);
							}
						}else{
							if (init.thisId==($('#main .main').length-1)) {
								TweenMax.to('#main_bottom',init.swipeSpeed,{height:'5%',opacity:'0'});
							}
						};
					};
					if(direction=='down'){
						//init.swipeLock = false;
						if ((init.thisId>0) && (init.thisId<$('#main .main').length)) {
							try{
								init.swipeLock = false;

								if (init.thisId == 1) {
									init.sec01();
								}
								if (init.thisId == 2) {
									init.sec02();
								}
								if (init.thisId == 3) {
									init.sec03();
								}
								if (init.thisId == 4) {
									init.sec04();
								}
								if (init.thisId == 5) {
									init.sec05();
								}
								if (init.thisId == 6) {
									init.sec06();
								}
								if (init.thisId == 7) {
									init.sec07();
								}
								if (init.thisId == 8) {
									init.sec08();
								}
								if (init.thisId == 9) {
									init.sec09();
								}

								TweenMax.to($('#main .main').eq(init.thisId),init.swipeSpeed,{top:'100%'});
								TweenMax.to($('#main .main').eq(init.thisId-1),init.swipeSpeed,{top:'0%'});
								init.thisId--;
								setTimeout(function(){
									$('#main .main').eq(init.thisId+1).hide();
									init.swipeLock = true;
								},init.swipeSpeed*1000);
							}catch(e){
								console.log(e);
							}
						}else{
							if(init.thisId==0){
								TweenMax.to('#main_top',init.swipeSpeed,{height:'5%',opacity:'0'});
							}
						};
					};
				},
			});
			/**
			 * 阻止触摸
			document.addEventListener('touchmove', function (event) {
				event.preventDefault();
			}, false);
			 */


		</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349

[/toggle]

CSS动画效果基础代码

//0秒就开始,持续12.6秒完成,1是只出现一次
-webkit-animation: FadeIn 12.6s ease 0.0s 1 forwards;
//持续循环,每次循环时间为1.2秒
-webkit-animation: FadeInB ease-in-out 1.2s infinite;
1
2
3
4

Preview
Loading comments...
1 条评论
  • comment-avatar

    一看到代码就发困哈哈

example
Preview