用H5做官網的CSS3酷炫的過渡效果

做H5官網時，自己封裝的css3樣式，特效不全，僅供參考

1，過渡時間設置

/*
 * transitionN: N代表過渡動畫幾秒
 * transition2： 2s過渡動畫
 * 
 * 默認 1 -->> 5s
*/

.transition{transition:all 1s;-webkit-transition:all 1s;-moz-transition:all 1s}
.transition2{transition:all 2s;-webkit-transition:all 2s;-moz-transition:all 2s}
.transition3{transition:all 3s;-webkit-transition:all 3s;-moz-transition:all 3s}
.transition4{transition:all 4s;-webkit-transition:all 4s;-moz-transition:all 4s}
.transition5{transition:all 5s;-webkit-transition:all 5s;-moz-transition:all 5s}

2，過渡效果設置

/******************************
 * 
 * 	X軸或Y軸平移
 * 
 * 		transform-translate-xX-yY  平移到（x, y)代表（X, Y）
 * 		transform-translate-x100-y0 代表平移（0, 0）到（100， 0）或（100， 0）到（0，0）
 *		transform-translate-x-100-y0 代表平移（0, 0）到（-100， 0）或（-100， 0）到（0，0）
 * 
 * 		默認X軸 （-300， 0）-->> (300，0)
 * 		默認Y軸 （0， -300）-->> (0，300)
 */
.transform-translate-x100-y0{-webkit-transform:translate(100px,0);-moz-transform:translate(100px,0);transform:translate(100px,0);-o-transform:translate(100px,0);opacity:0}
.transform-translate-x200-y0{-webkit-transform:translate(200px,0);-moz-transform:translate(200px,0);transform:translate(200px,0);-o-transform:translate(200px,0);opacity:0}
.transform-translate-x300-y0{-webkit-transform:translate(300px,0);-moz-transform:translate(300px,0);transform:translate(300px,0);-o-transform:translate(300px,0);opacity:0}
.transform-translate-x-100-y0{-webkit-transform:translate(-100px,0);-moz-transform:translate(-100px,0);transform:translate(-100px,0);-o-transform:translate(100px,0);opacity:0}
.transform-translate-x-200-y0{-webkit-transform:translate(-200px,0);-moz-transform:translate(-200px,0);transform:translate(-200px,0);-o-transform:translate(-200px,0);opacity:0}
.transform-translate-x-300-y0{-webkit-transform:translate(-300px,0);-moz-transform:translate(-300px,0);transform:translate(-300px,0);-o-transform:translate(-300px,0);opacity:0}

.transform-translate-x0-y100{-webkit-transform:translate(0,100px);-moz-transform:translate(0,100px);transform:translate(0,100px);-o-transform:translate(0,100px);opacity:0}
.transform-translate-x0-y200{-webkit-transform:translate(0,200px);-moz-transform:translate(0,200px);transform:translate(0,200px);-o-transform:translate(0,200px);opacity:0}
.transform-translate-x0-y300{-webkit-transform:translate(0,300px);-moz-transform:translate(0,300px);transform:translate(0,300px);-o-transform:translate(0,300px);opacity:0}
.transform-translate-x0-y-100{-webkit-transform:translate(0,-100px);-moz-transform:translate(0,-100px);transform:translate(0,-100px);-o-transform:translate(0,-100px);opacity:0}
.transform-translate-x0-y-200{-webkit-transform:translate(0,-200px);-moz-transform:translate(0,-200px);transform:translate(0,-200px);-o-transform:translate(0,-200px);opacity:0}
.transform-translate-x0-y-300{-webkit-transform:translate(0,-300px);-moz-transform:translate(0,-300px);transform:translate(0,-300px);-o-transform:translate(0,-300px);opacity:0}

3,js交互設置

	/*
	 * showActive();
	 * 		參數一： 元素Dom
	 * 		參數二： 每個元素執行動畫間隔時間
	 * 		參數三： 初始執行動畫延遲時間
	 * 		參數四： 增加或刪除動畫或過渡值
	 * 		參數五： 當爲true的時候增加動畫或過渡class值，false移除class,true感覺沒必要，
	 * 
	 */
	showActive($(".text-animation-p p"), 200, 0, "transform", false);

	showActive($(".transition2"), 200, 0, "transform-translate-x0-y-100", false);

	showActive($(".text-animation-add-p p"), 200, 0, "transform", true);

	function showActive(ele, intervalTime, initDelayTime, className, isTrue) {
		setTimeout(function() {
			var index = 0;
			var set = setInterval(function() {
				if(isTrue) {
					ele.eq(index).addClass(className);
					index++;
					if(index >= ele.length) {
						clearInterval(set);
					}
				} else {
					ele.eq(index).removeClass(className);
					index++;
					if(index >= ele.length) {
						clearInterval(set);
					}
				}
			}, intervalTime);
		}, initDelayTime);
	}

eg：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../index.css" />
		<style type="text/css">
			/*
			 * transform-translate-xX-yY  平移到（x, y)代表（X, Y）
			 * transform-translate-x100-y0 代表平移（0, 0）到（100， 0）或（100， 0）到（0，0）
			 * transform-translate-x-100-y0 代表平移（0, 0）到（-100， 0）或（-100， 0）到（0，0）
			 */
			.transform-translate-x100-y0 {
				-webkit-transform: translate(100px, 0);
				-moz-transform: translate(100px, 0);
				transform: translate(100px, 0);
				-o-transform: translate(100px, 0);
				opacity: 0;
			}
			
			.transform-translate-x200-y0 {
				-webkit-transform: translate(200px, 0);
				-moz-transform: translate(200px, 0);
				transform: translate(200px, 0);
				-o-transform: translate(200px, 0);
				opacity: 0;
			}
			
			.transform-translate-x300-y0 {
				-webkit-transform: translate(300px, 0);
				-moz-transform: translate(300px, 0);
				transform: translate(300px, 0);
				-o-transform: translate(300px, 0);
				opacity: 0;
			}
			
			.transform-translate-x-100-y0 {
				-webkit-transform: translate(-100px, 0);
				-moz-transform: translate(-100px, 0);
				transform: translate(-100px, 0);
				-o-transform: translate(100px, 0);
				opacity: 0;
			}
			
			.transform-translate-x-200-y0 {
				-webkit-transform: translate(-200px, 0);
				-moz-transform: translate(-200px, 0);
				transform: translate(-200px, 0);
				-o-transform: translate(-200px, 0);
				opacity: 0;
			}
			
			.transform-translate-x-300-y0 {
				-webkit-transform: translate(-300px, 0);
				-moz-transform: translate(-300px, 0);
				transform: translate(-300px, 0);
				-o-transform: translate(-300px, 0);
				opacity: 0;
			}
			
			.transform-translate-x0-y100 {
				-webkit-transform: translate(0, 100px);
				-moz-transform: translate(0, 100px);
				transform: translate(0, 100px);
				-o-transform: translate(0, 100px);
				opacity: 0;
			}
			
			.transform-translate-x0-y200 {
				-webkit-transform: translate(0, 200px);
				-moz-transform: translate(0, 200px);
				transform: translate(0, 200px);
				-o-transform: translate(0, 200px);
				opacity: 0;
			}
			
			.transform-translate-x0-y300 {
				-webkit-transform: translate(0, 300px);
				-moz-transform: translate(0, 300px);
				transform: translate(0, 300px);
				-o-transform: translate(0, 300px);
				opacity: 0;
			}
			
			.transform-translate-x0-y-100 {
				-webkit-transform: translate(0, -100px);
				-moz-transform: translate(0, -100px);
				transform: translate(0, -100px);
				-o-transform: translate(0, -100px);
				opacity: 0;
			}
			
			.transform-translate-x0-y-200 {
				-webkit-transform: translate(0, -200px);
				-moz-transform: translate(0, -200px);
				transform: translate(0, -200px);
				-o-transform: translate(0, -200px);
				opacity: 0;
			}
			
			.transform-translate-x0-y-300 {
				-webkit-transform: translate(0, -300px);
				-moz-transform: translate(0, -300px);
				transform: translate(0, -300px);
				-o-transform: translate(0, -300px);
				opacity: 0;
			}
			/*
			 * transitionN: N代表過渡動畫幾秒
			 * transition2： 2s過渡動畫
			 */
			
			.transition {
				transition: all 1s;
				-webkit-transition: all 1s;
				-moz-transition: all 1s;
			}
			
			.transition2 {
				transition: all 2s;
				-webkit-transition: all 2s;
				-moz-transition: all 2s;
			}
			
			.transition3 {
				transition: all 3s;
				-webkit-transition: all 3s;
				-moz-transition: all 3s;
			}
			
			.transition4 {
				transition: all 4s;
				-webkit-transition: all 4s;
				-moz-transition: all 4s;
			}
			
			.transition5 {
				transition: all 5s;
				-webkit-transition: all 5s;
				-moz-transition: all 5s;
			}
		</style>
	</head>

	<body>

		<div class="text-animation">
			<p class="transition2 transform-translate-x100-y0">備受社會關注的貴州“90後”女幹部張藝在去年8月已獲刑一年半，她貪污的41萬餘元全部用來賭博。近日中國裁判文書網發佈的《張藝貪污一審刑事判決書》披露了這一消息。</p>
			<p class="transition2 transform-translate-x100-y0">備受社會關注的貴州“90後”女幹部張藝在去年8月已獲刑一年半，她貪污的41萬餘元全部用來賭博。近日中國裁判文書網發佈的《張藝貪污一審刑事判決書》披露了這一消息。</p>
			<p class="transition2 transform-translate-x100-y0">備受社會關注的貴州“90後”女幹部張藝在去年8月已獲刑一年半，她貪污的41萬餘元全部用來賭博。近日中國裁判文書網發佈的《張藝貪污一審刑事判決書》披露了這一消息。</p>
			<p class="transition2 transform-translate-x100-y0">備受社會關注的貴州“90後”女幹部張藝在去年8月已獲刑一年半，她貪污的41萬餘元全部用來賭博。近日中國裁判文書網發佈的《張藝貪污一審刑事判決書》披露了這一消息。</p>

		</div>

		<div>
			<p class="transition2 transform-translate-x0-y-100">備受社會關注的貴州“90後”女幹部張藝在去年8月已獲刑一年半，她貪污的41萬餘元全部用來賭博。近日中國裁判文書網發佈的《張藝貪污一審刑事判決書》披露了這一消息。</p>
			<p class="transition2 transform-translate-x0-y-100">備受社會關注的貴州“90後”女幹部張藝在去年8月已獲刑一年半，她貪污的41萬餘元全部用來賭博。近日中國裁判文書網發佈的《張藝貪污一審刑事判決書》披露了這一消息。</p>
			<p class="transition2 transform-translate-x0-y-100">備受社會關注的貴州“90後”女幹部張藝在去年8月已獲刑一年半，她貪污的41萬餘元全部用來賭博。近日中國裁判文書網發佈的《張藝貪污一審刑事判決書》披露了這一消息。</p>
			<p class="transition2 transform-translate-x0-y-100">備受社會關注的貴州“90後”女幹部張藝在去年8月已獲刑一年半，她貪污的41萬餘元全部用來賭博。近日中國裁判文書網發佈的《張藝貪污一審刑事判決書》披露了這一消息。</p>
		</div>

		<!--
			true
		-->
		<div class="text-animation-add-p">
			<p class="transition2">備受社會關注的貴州“90後”女幹部張藝在去年8月已獲刑一年半，她貪污的41萬餘元全部用來賭博。近日中國裁判文書網發佈的《張藝貪污一審刑事判決書》披露了這一消息。</p>
			<p class="transition2">備受社會關注的貴州“90後”女幹部張藝在去年8月已獲刑一年半，她貪污的41萬餘元全部用來賭博。近日中國裁判文書網發佈的《張藝貪污一審刑事判決書》披露了這一消息。</p>
			<p class="transition2">備受社會關注的貴州“90後”女幹部張藝在去年8月已獲刑一年半，她貪污的41萬餘元全部用來賭博。近日中國裁判文書網發佈的《張藝貪污一審刑事判決書》披露了這一消息。</p>
			<p class="transition2">備受社會關注的貴州“90後”女幹部張藝在去年8月已獲刑一年半，她貪污的41萬餘元全部用來賭博。近日中國裁判文書網發佈的《張藝貪污一審刑事判決書》披露了這一消息。</p>

		</div>
	</body>

</html>
<script src="../jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	/*
	 * showActive();
	 * 		參數一： 元素Dom
	 * 		參數二： 每個元素執行動畫間隔時間
	 * 		參數三： 初始執行動畫延遲時間
	 * 		參數四： 增加或刪除動畫或過渡值
	 * 		參數五： 當爲true的時候增加動畫或過渡class值，false移除class,true感覺沒必要，
	 * 
	 */
	showActive($(".text-animation-p p"), 200, 0, "transform", false);

	showActive($(".transition2"), 200, 0, "transform-translate-x0-y-100", false);

	showActive($(".text-animation-add-p p"), 200, 0, "transform", true);

	function showActive(ele, intervalTime, initDelayTime, className, isTrue) {
		setTimeout(function() {
			var index = 0;
			var set = setInterval(function() {
				if(isTrue) {
					ele.eq(index).addClass(className);
					index++;
					if(index >= ele.length) {
						clearInterval(set);
					}
				} else {
					ele.eq(index).removeClass(className);
					index++;
					if(index >= ele.length) {
						clearInterval(set);
					}
				}
			}, intervalTime);
		}, initDelayTime);
	}
</script>

完整的css3

/*
 * transitionN: N代表過渡動畫幾秒
 * transition2： 2s過渡動畫
 * 
 * 默認 1 -->> 5s
*/

.transition{transition:all 1s;-webkit-transition:all 1s;-moz-transition:all 1s}
.transition2{transition:all 2s;-webkit-transition:all 2s;-moz-transition:all 2s}
.transition3{transition:all 3s;-webkit-transition:all 3s;-moz-transition:all 3s}
.transition4{transition:all 4s;-webkit-transition:all 4s;-moz-transition:all 4s}
.transition5{transition:all 5s;-webkit-transition:all 5s;-moz-transition:all 5s}

/******************************
 * 
 * 	X軸或Y軸平移
 * 
 * 		transform-translate-xX-yY  平移到（x, y)代表（X, Y）
 * 		transform-translate-x100-y0 代表平移（0, 0）到（100， 0）或（100， 0）到（0，0）
 *		transform-translate-x-100-y0 代表平移（0, 0）到（-100， 0）或（-100， 0）到（0，0）
 * 
 * 		默認X軸 （-300， 0）-->> (300，0)
 * 		默認Y軸 （0， -300）-->> (0，300)
 */
.transform-translate-x100-y0{-webkit-transform:translate(100px,0);-moz-transform:translate(100px,0);transform:translate(100px,0);-o-transform:translate(100px,0);opacity:0}
.transform-translate-x200-y0{-webkit-transform:translate(200px,0);-moz-transform:translate(200px,0);transform:translate(200px,0);-o-transform:translate(200px,0);opacity:0}
.transform-translate-x300-y0{-webkit-transform:translate(300px,0);-moz-transform:translate(300px,0);transform:translate(300px,0);-o-transform:translate(300px,0);opacity:0}
.transform-translate-x-100-y0{-webkit-transform:translate(-100px,0);-moz-transform:translate(-100px,0);transform:translate(-100px,0);-o-transform:translate(100px,0);opacity:0}
.transform-translate-x-200-y0{-webkit-transform:translate(-200px,0);-moz-transform:translate(-200px,0);transform:translate(-200px,0);-o-transform:translate(-200px,0);opacity:0}
.transform-translate-x-300-y0{-webkit-transform:translate(-300px,0);-moz-transform:translate(-300px,0);transform:translate(-300px,0);-o-transform:translate(-300px,0);opacity:0}

.transform-translate-x0-y100{-webkit-transform:translate(0,100px);-moz-transform:translate(0,100px);transform:translate(0,100px);-o-transform:translate(0,100px);opacity:0}
.transform-translate-x0-y200{-webkit-transform:translate(0,200px);-moz-transform:translate(0,200px);transform:translate(0,200px);-o-transform:translate(0,200px);opacity:0}
.transform-translate-x0-y300{-webkit-transform:translate(0,300px);-moz-transform:translate(0,300px);transform:translate(0,300px);-o-transform:translate(0,300px);opacity:0}
.transform-translate-x0-y-100{-webkit-transform:translate(0,-100px);-moz-transform:translate(0,-100px);transform:translate(0,-100px);-o-transform:translate(0,-100px);opacity:0}
.transform-translate-x0-y-200{-webkit-transform:translate(0,-200px);-moz-transform:translate(0,-200px);transform:translate(0,-200px);-o-transform:translate(0,-200px);opacity:0}
.transform-translate-x0-y-300{-webkit-transform:translate(0,-300px);-moz-transform:translate(0,-300px);transform:translate(0,-300px);-o-transform:translate(0,-300px);opacity:0}


/*
 * scale() 縮放
 * 		例如設置圖片從小到大恢復完整的特效
 * 
 * scale() rotateX/Y/Z()縮放旋轉
 * 		例如設置圖片從小到大旋轉恢復完整的特效
 * 
 * rotateX() 繞着X軸旋轉，rotateY()繞着Y軸旋轉，rotateZ()繞着Z軸旋轉
 * 
 * transform-sacle 只縮放恢復完整
 * transform-rotateX90 只旋轉繞着X軸90度恢復完整
 * transform-sacle-rotateZ 縮放旋轉360度
 * transform-sacle-rotateX90 縮放旋轉90度
 */
.transform-sacle{opacity:0;-webkit-transform-origin:50% 50%;-webkit-transform:scale(.1);-moz-transform-origin:50% 50%;-moz-transform:scale(.1);-ms-transform-origin:50% 50%;-ms-transform:scale(.1);-o-transform-origin:50% 50%;-o-transform:scale(.1);transform-origin:50% 50%;transform:scale(.1)}
.transform-rotateX90{-webkit-transform-origin:50% 50%;-webkit-transform:rotateX(90deg);-moz-transform-origin:50% 50%;-moz-transform:rotateX(90deg);-ms-transform-origin:50% 50%;-ms-transform:rotateX(90deg);-o-transform-origin:50% 50%;-o-transform:rotateX(90deg);transform-origin:50% 50%;transform:rotateX(90deg)}
.transform-rotateY90{-webkit-transform-origin:50% 50%;-webkit-transform:rotateY(90deg);-moz-transform-origin:50% 50%;-moz-transform:rotateY(90deg);-ms-transform-origin:50% 50%;-ms-transform:rotateY(90deg);-o-transform-origin:50% 50%;-o-transform:rotateY(90deg);transform-origin:50% 50%;transform:rotateY(90deg)}
.transform-rotateZ90{opacity:0;-webkit-transform-origin:50% 50%;-webkit-transform:rotateZ(90deg);-moz-transform-origin:50% 50%;-moz-transform:rotateZ(90deg);-ms-transform-origin:50% 50%;-ms-transform:rotateZ(90deg);-o-transform-origin:50% 50%;-o-transform:rotateZ(90deg);transform-origin:50% 50%;transform:rotateZ(90deg)}
.transform-sacle-rotateZ{opacity:0;-webkit-transform-origin:50% 50%;-webkit-transform:rotateZ(360deg) scale(.1);-moz-transform-origin:50% 50%;-moz-transform:rotateZ(360deg) scale(.1);-ms-transform-origin:50% 50%;-ms-transform:rotateZ(360deg) scale(.1);-o-transform-origin:50% 50%;-o-transform:rotateZ(360deg) scale(.1);transform-origin:50% 50%;transform:rotateZ(360deg) scale(.1)}
.transform-sacle-rotateX{opacity:0;-webkit-transform-origin:50% 50%;-webkit-transform:rotateX(360deg) scale(.1);-moz-transform-origin:50% 50%;-moz-transform:rotateX(360deg) scale(.1);-ms-transform-origin:50% 50%;-ms-transform:rotateX(360deg) scale(.1);-o-transform-origin:50% 50%;-o-transform:rotateX(360deg) scale(.1);transform-origin:50% 50%;transform:rotateX(360deg) scale(.1)}
.transform-sacle-rotateY{opacity:0;-webkit-transform-origin:50% 50%;-webkit-transform:rotateY(360deg) scale(.1);-moz-transform-origin:50% 50%;-moz-transform:rotateY(360deg) scale(.1);-ms-transform-origin:50% 50%;-ms-transform:rotateY(360deg) scale(.1);-o-transform-origin:50% 50%;-o-transform:rotateY(360deg) scale(.1);transform-origin:50% 50%;transform:rotateY(360deg) scale(.1)}
.transform-sacle-rotateX90{opacity:0;-webkit-transform-origin:50% 50%;-webkit-transform:rotateX(90deg) scale(.1);-moz-transform-origin:50% 50%;-moz-transform:rotateX(90deg) scale(.1);-ms-transform-origin:50% 50%;-ms-transform:rotateX(90deg) scale(.1);-o-transform-origin:50% 50%;-o-transform:rotateX(90deg) scale(.1);transform-origin:50% 50%;transform:rotateX(90deg) scale(.1)}
.transform-sacle-rotateY90{opacity:0;-webkit-transform-origin:50% 50%;-webkit-transform:rotateY(90deg) scale(.1);-moz-transform-origin:50% 50%;-moz-transform:rotateY(90deg) scale(.1);-ms-transform-origin:50% 50%;-ms-transform:rotateY(90deg) scale(.1);-o-transform-origin:50% 50%;-o-transform:rotateY(90deg) scale(.1);transform-origin:50% 50%;transform:rotateY(90deg) scale(.1)}
.transform-sacle-rotateZ90{opacity:0;-webkit-transform-origin:50% 50%;-webkit-transform:rotateZ(90deg) scale(.1);-moz-transform-origin:50% 50%;-moz-transform:rotateZ(90deg) scale(.1);-ms-transform-origin:50% 50%;-ms-transform:rotateZ(90deg) scale(.1);-o-transform-origin:50% 50%;-o-transform:rotateZ(90deg) scale(.1);transform-origin:50% 50%;transform:rotateZ(90deg) scale(.1)}

用H5做官網的CSS3酷炫的過渡效果

vue項目獲取富文本編輯器wangEditor內容導出爲word（html轉word格式並下載）

dotnet C# 創建 X11 應用時設置窗口背景顏色

Navicat安裝與激活教程

TDengine docker安裝方法

vue3組件通信與props

sapui5

Alpine Linux apk add DNS lookup error

部分JDK版本的發佈時間

工作中用到的腳本合集

合併代碼時Beyond Compare設置

arcgis api for javascript 4.12 vue 點聚合(1)

arcgis api for javascript 4.12 vue 點聚合(2)

封裝axios+Element-UI+攔截器

vue cli2.0路由的hash模式和history模式的打包並查看本地效果的方法

vue cli2.0不需要打包，局域網下使用ip訪問Vue項目

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結