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

最新推荐文章于 2024-10-11 14:58:45 发布
最新推荐文章于 2024-10-11 14:58:45 发布
阅读量1.5k 收藏 3
点赞数
分类专栏： CSS3 H5 文章标签： CSS3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mf_717714/article/details/86593772
版权
CSS3 同时被 2 个专栏收录
1 篇文章 0 订阅
订阅专栏
H5
1 篇文章 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)}
H5中的过渡、动画
小马过河
09-26 2973
transition、animation我的理解分别是：过渡、动画。因为两者的功能较为接近，所以在这我主要整理transition和animation的使用方法。   Transition 1.定义和用法 transition的使用在于让元素的变化有一个过渡的过程，过渡效果执行完毕之后，默认会还原到原始状态，即可以指定状态变化所需要的时间。transition是一个简写属性，用于设置四个过...
H5动画实现---过渡
小马过河
09-29 3182
通过过渡transition,我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果. 要实现这一点，必须规定两项内容：1.规定希望把效果添加到哪个 CSS 属性上，2.规定效果的时长 1，语法：rty duration timing-function delay; transition: property duration t...
炫酷的后台管理系统UI界面
Micky的博客
12-24 5231
链接1:http://view.jqueryfuns.com/%E9%A2%84%E8%A7%88%2D/2014/4/16/23%5F5e892d59bef36eaaab8188f54c7d96c3/ 链接2:http://aqvatarius.com/themes/index.php?template=taurus
宝藏CSS样式网站，开发一些酷炫的特效
最新发布
qq_48666244的博客
10-11 489
地址：Uiverse | The Largest Library of Open-Source UI elementshttps://uiverse.io/地址：CSS灵感指南 - CSC 灵感指南 在线 (csscoco.com)https://csscoco.com/inspiration/#/
H5渐变过渡动画
nangongwenxuan的博客
02-01 418
H5渐变过渡动画
html5 动画过渡效果,HTML5动画过度与动画效果
weixin_42298412的博客
06-07 1488
HTML5动画过度与动画效果标签：Web前端1、动画过渡属性 transition1、transition的功能定义transition的功能，使css的属性值在一定的时间内平滑地过渡。 这种效果可以在鼠标点击、划过、获得焦点或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。2、transition可定义的属性transition-property:设置哪些属性进行过渡 transit...
H5之13__CSS过渡、动画和变换
daozhongyang的专栏
01-01 2342
一. 简介 在触摸设备上， 动画是用户手势的反馈. 在所有浏览器中，JS 是单线程执行的. 如果有异步任务， 比如 setTimeOut() ，会加入到执行队列，然后在线程变得空闲时执行。 当 定时器里面的代码执行时， 其他的代码又不能执行了。 也就是说事件处理程序是按队列顺序执行的。 由于这些原因， 我们应该尽量避免使用setTimeOut() 动画， 可以使用CSS
HTML5/CSS3——过渡效果
The_Handsome_Sir的博客
05-09 1020
动画效果 @keyframes：定义动画 animation-name：使用的动画名字 animation-duration：完成一个动画的时间 1.动画变色 <!DOCTYPE html> <html> <head> <style> div{ width:100px; height:100px; background:red; border-radius:8px; animation-name:myfir
19种html5 CSS3绚丽的弹出窗口动画过渡效果.zip
07-11
19种html5 CSS3绚丽的弹出窗口动画过渡效果
html5+css3实现酷炫的form表单
11-10
CSS3的过渡（transition）和动画（animation）也是创建酷炫效果的关键工具。过渡可以平滑地改变元素的属性值，比如改变按钮在被点击时的大小或颜色。而动画则允许我们创建更复杂的交互，如输入框获得焦点时出现的...
H5酷炫3D开场动画（酷炫又不会占太大内存）
03-24
为了实现酷炫的3D动画效果，CSS3也是不可或缺的一部分。CSS3提供了许多新功能，如变换（transform）、过渡（transition）和动画（animation）。这些特性可以用来创建平滑的动画效果，改变元素的位置、大小、形状等。...
这是一款使用html5svg和css3制作的炫酷select下拉菜单美化效果
08-10
CSS3提供了许多新特性，如伪类、过渡（transitions）、动画（animations）以及更强大的选择器，使得这样的美化成为可能。 在描述中提到的8种不同效果中，滑动、淡入淡出和网格布局是常见的交互效果。滑动通常通过...
酷炫 html5页面加载 loading动画效果 demo 基于原生无第三方依赖
01-04
在CSS中，我们可以利用关键帧动画（@keyframes）创建复杂的动画效果，通过设置不同时间点的样式变化来实现平滑的过渡。 接着，在`<body>`的第一行，我们需要引入JavaScript文件，这通常是一个`.js`文件，比如`...
h5页面路由切换动画-左右横滑效果（v2）
醉逍遥neo的博客
11-12 8618
h5实现仿微信那种页面切换时左右横滑的动画效果，页面前进时新页面从右往左滑，页面后退时旧页面从左往右滑。
【H5C3过渡动画】
qq_45753546的博客
05-05 585
1.过渡 transition: 过度属性（all width) 可以指定什么属性进行过渡 过渡时间 过度动画函数（linear | ease | ease-in-out） 过渡延时 2.CSS3渐变【了解】 2.1 线性渐变 语法： background:linear-gradient(方位，颜色1，颜色2，颜色3，…） 方位 1 。单词： to top:从下往上 to bottom:从下往上 to left::从左往右 to right::从右往左 2. 数字+deg（角度） 注意：渐变和背景颜色不能同
css原地颠倒 h5_H5案例分享：CSS3 reflect倒影
weixin_39588542的博客
12-24 183
CSS3 reflect倒影说起倒影效果，在传统网页中，我们只能使用photoshop事先将倒影设计好，然后导入到网页中，这样不但耗费资源，也阻碍了开发的效率。而现在CSS3有一个属性box-reflect可以实现。那么今天我们要给大家介绍的就是这个属性的应用。一、box-reflect语法box-reflect：none | = above | below | left | right =...
HTML5权威指南——过渡，动画和变换
gyypwrs的博客
11-17 444
使用过渡 过渡效果一般指的是浏览器直接改变CSS属性实现的，使用transition的一系列属性就可以控制应用新属性的速度 过渡属性如下 属性 说明 transition-delay 指定过渡开始之前的延迟时间 transition-duration 指定过渡的持续时间 transition-property 指定过渡应用的属性 transition-timing-function 指定过渡期间计算中间值的方式 transition 以上过渡声明都可简写于此 时间的单
哪些官网是用html5 做的,做个简单的h5,用这几个网站就够了!
weixin_35702533的博客
06-09 2507
原标题：做个简单的h5,用这几个网站就够了!日常工作中经常会遇到需要h5的时候，如果只是需要一些简单的H5用来营销传播可以尝试使用一下网站。1.易企秀传送门：http://store.eqxiu.com/这算是H5制作网站的老品牌了，满足各种场景制作，模板也很丰富、有付费的也有免费的，如果是普通的H5制作，免费模板基本可以满足需求，很多媒体运营者都在使用。如需联系，请按上图私信 2.意派传送门：h...
CSS3过渡效果
weixin_52005030的博客
08-28 59
移入过渡:宽高,颜色,边距都可以 .box:hover{ transition: 要过渡的属性 花费时间 运动曲线 何时开始; } 通常写为: .box:hover{ transition: all 1s; }
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

mf_717714

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值