用H5做官网的CSS3酷炫的过渡效果

其他 2020-02-08 11:17:21 阅读次数: 0

做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)}
mf_717714
发布了17 篇原创文章 · 获赞 43 · 访问量 6万+
私信 关注

猜你喜欢

转载自blog.csdn.net/mf_717714/article/details/86593772
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022