CSS3动画

程序员文章站 2022-06-23 17:28:33

...

概述：

设计2D变换
设计3D变换
设计过渡动画
设计帧动画
使用CSS3动画功能设计页面特效样式

1，设计2D变换

transform:none|<transform-function>[<transform-function>]*;

transform属性的初始值是none，适用于块元素和行内元素
<transform-function>设置变换函数。可以是一个或多个变换函数列表。transform-function函数包括matrix(),translate(),scale(),scaleX(),scaleY(),rotate(),skewX(),skewY(),skew()等。
matrix()：矩阵变换
translate()：移动元素对象
scale()：缩放元素对象
rotate()：旋转元素对象
skew()：倾斜元素对象

1.1 定义旋转

rotate(<angle>)

<style>
	div{
		width:200px;
		height:10px;
		background-color:red;
		border-radius:5px;
		position:absolute;
		top:30%;
		left:30%;
	}
	div:hover{
		transform:rotate(-90deg);
	}
</style>
<div></div>

CSS3动画

1.2 定义缩放

scale(<number>[,<number>])

scale(1.5)

1.3 定义移动

translate(<translation-value>[,<translation-value>])

	div:hover{
		transform:translate(20px,20px);
	}

1.4 定义倾斜

skew(<angle>[,<angle>])

		transform:skew(30deg,-10deg);

CSS3动画

1.5 定义矩阵

1.6 定义变换原点

transform-origin:

transform-origin:0 0;  //以元素对象左上角为原点

2，设计3D变换

3D位移：translateZ()和translate3d()

3D旋转：rotateX(),rotateY(),rotateZ(),rotate3d()

3D缩放：scaleZ() scale3d()

3D矩阵：matrix3d()

2.1 定义位移

translate3d(tx,ty,tz)

<html>
	<head>
		<meta charset="utf-8">
		<style>
		.stage{  /*设置舞台，定义观察者距离*/
			width:600px;height:200px;
			border:solid 1px red;
			perspective:1200px;
		}
		.container{ /*创建3维空间*/
			transform-style:preserve-3d;
		}
		img{width:120px;}
		img:nth-child(2){
			transform:translate3d(30px,30px,200px);
		}
		</style>
	</head>
	<body>
		<div class="stage">
			<div class="container"><img src="images/1.jpg" /><img src="images/1.jpg" /></div>
		</div>
	</body>
</html>

CSS3动画

2.2 定义缩放

scale3d(sx,sy,sz)

取值说明如下：

sx：横向缩放比例 sy：纵向缩放比例， sz：Z轴缩放比例

<html>
	<head>
		<meta charset="utf-8">
		<style>
		.stage{  /*设置舞台，定义观察者距离*/
			width:600px;height:200px;
			border:solid 1px red;
			perspective:1200px;
		}
		.container{ /*创建3维空间*/
			transform-style:preserve-3d;
		}
		img{width:120px;}
		img:nth-child(2){
			transform:scale3d(2,3,5);
		}
		</style>
	</head>
	<body>
		<div class="stage">
			<div class="container"><img src="images/1.jpg" /><img src="images/1.jpg" /></div>
		</div>
	</body>
</html>

CSS3动画

2.3 定义旋转

rotateX(a)
rotateY(a)
rotateZ(a)

rotate3d(x,y,z,a)

rotate3d(x,y,z,a)取值说明如下：

x：是一个0到1之间的取值，主要用来描述元素围绕X轴旋转的矢量值
y：
z：
a：是一个角度值，主要用来指定元素在3D空间旋转的角度，如果其值为正值，元素顺时针旋转，反之元素逆时针旋转。

<html>
	<head>
		<meta charset="utf-8">
		<style>
		.stage{  /*设置舞台，定义观察者距离*/
			width:600px;height:200px;
			border:solid 1px red;
			perspective:1200px;
		}
		.container{ /*创建3维空间*/
			transform-style:preserve-3d;
		}
		img{width:120px;}
		img:nth-child(2){
			transform:rotate3d(1,0,1,45deg);
		}
		</style>
	</head>
	<body>
		<div class="stage">
			<div class="container"><img src="images/1.jpg" /><img src="images/1.jpg" /></div>
		</div>
	</body>
</html>

CSS3动画

3，设计过渡动画

CSS3使用transition属性定义过渡动画，目前已获得所有浏览器的支持。

3.1 设置过渡属性

transition-property:none|all|[<IDENT>][',',<IDENT>]*;

none：表示没有元素
all：默认值，表示针对所有元素，包括：before和：after元素
IDENT：指定CSS属性列表。几乎所有色彩，大小和位置等相关的CSS属性，包括许多新添加的属性，都可以应用过渡，如CSS3变换中的放大，缩小，旋转，斜切，渐变等。

3.2 设置过渡时间

transition-duration:<time>[,<time>]*;

初始值为0，适用于所有元素。在默认情况下，动画过渡时间为0秒，所以当指定元素动画时，会看不到过渡的过程，直接看到结果。

<style>
div{
	margin:10px auto;height:80px;
	background:red;
	border-radius:12px;
	box-shadow:2px 2px 2px #999;
	}
div:hover{
	background-color:blue;
	transition-property:background-color;
	transition-duration:2s;
	}
</style>
<body>
	<div></div>
</body>

CSS3动画

3.3 设置延迟时间

transition-delay:<time>[,<time>]

<style>
div{
	margin:10px auto;height:80px;
	background:red;
	border-radius:12px;
	box-shadow:2px 2px 2px #999;
	}
div:hover{
	background-color:blue;
	transition-property:background-color;
	transition-delay:1s;
	transition-duration:2s;
	}
</style>
<body>
	<div></div>
</body>

CSS3动画

3.4 设置过渡动画类型

transition-timing-function:ease|linear|ease-in|ease-out|ease-in-out

ease：平滑过渡
linear：线性过渡
ease-in：由慢到快
ease-out：由快到慢
ease-in-out：由慢到快再到慢

3.5 设置触发方式

CSS伪类: link visited hover active focus

javascript事件： click focus mousemove mouseover mouseout

4，设计帧动画

CSS3使用animation属性定义帧动画

4.1 设置关键帧

CSS3使用@keyframes定义关键帧。具体用法如下：

@keyframes animationname{
	keyframes-selector{
		css-styles;
	}
}

其中参数说明如下：

animationname：定义动画的名称
keyframes-selector：定义帧的时间未知，也就是动画时长的百分比，合法的值包括0~100%,from,to
css-styles：表示一个或多个合法的CSS样式属性

<html>
	<head>
		<meta charset="utf-8">
		<style>
			#wrap{  /*定义运动轨迹包含框*/
				position:relative;   /*定义定位包含框*/
				border:solid 1px red;
				width:250px;
				height:250px;
			}
			#box{ /*定义运动小盒的样式*/
				position:absolute;
				left:0;
				top:0;
				width:50px;
				height:50px;
				background:#93FB40;
				border-radius:8px;
				box-shadow:2px 2px 2px #999;
				/*定义帧动画：动画名称为ball，，动画时长5s，动画类为匀速*/
				animation:ball 5s linear infinite;
			}
			@keyframes ball{
				0%{left:0;top:0;}
				25%{left:200px;top:0;}
				50%{left:200px;top:200px;}
				75%{left:0;top:200px;}
				100%{left:0;top:0;}
			}
		</style>
	</head>
	<body>
		<div id="wrap">
			<div id="box"></div>
		</div>
	</body>
</html>

CSS3动画

4.2 设置动画属性

1，定义动画名称

animation-name:none|IDENT[,none|IDENT]*;

2，定义动画时间

animation-duration:<time>

3，定义动画类型

animation-timing-function

4，定义延迟时间

animation-delay

5,定义播放次数

animation-iteration-count

6，定义播放方向

animation-direction

7，定义播放状态

animation-play-state：paused | running

8，定义播放外状态

animation-fill-mode:none|forwards|backgrounds|both

5，实现一个2D盒子

<!doctype html>
<html>
	<head>
		<title>这是一个2D盒子</title>
		<meta charset="utf-8">
		<style>
			body{padding:20px 0 0 100px;}
			.side{
				height:100px;width:100px;
				position:absolute;
				font-size:20px;font-weight:bold;line-height:100px;
				text-align:center;color:#fff;
				text-shadow:0 -1px 0 rgba(0,0,0,0.2);
				text-transform:uppercase;
			}
			.top{
				background:red;
				transform:rotate(-45deg) skew(15deg,15deg);
			}
			.left{
				background:blue;
				transform:rotate(15deg) skew(15deg,15deg) translate(-50%,100%);
			}
			.right{
				background:yellow;
				transform:rotate(-15deg) skew(-15deg,-15deg) translate(50%,100%);
			}
		</style>
	</head>
	<body>
		<div class="side top">Top</div>
		<div class="side left">Left</div>
		<div class="side right">Right</div>
	</body>
</html>

CSS3动画

示例：3D盒子

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>3D</title>
		<style>
			.stage{
				width:300px;height:300px;margin:100px auto;position:relative;
				perspective:300px;
			}
			.container{
				transform-style:preserve-3d
			}
			.side{
				background:rgba(255,0,0,0.3);
				border:1px solid red;
				font-size:60px;font-weight:bold;color:#fff;text-align:center;
				height:196px;line-height:196px;width:196px;
				position:absolute;
				text-shadow:0 -1px 0 rgba(0,0,0,0.2);
				text-transform:uppercase;
			}
			.front{
				transform:translateZ(100px);
			}
			.back{
				transform:translateZ(-100px);
			}
			.left{
				transform:rotateY(-90deg) translateZ(100px);
			}
			.right{
				transform:rotateY(90deg) translateZ(100px);
			}
			.top{
				transform:rotateX(90deg) translateZ(100px);
			}
			.bottom{
				transform:rotateX(-90deg) translateZ(100px);
			}
		</style>
	</head>
	<body>
		<div class="stage">
			<div class="container">
				<div class="side front">前面</div>
				<div class="side back">背面</div>
				<div class="side left">左面</div>
				<div class="side right">右面</div>
				<div class="side top">顶面</div>
				<div class="side bottom">底面</div>
			</div>
		</div>
	</body>
</html>

CSS3动画

示例：实现3D旋转盒子

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>3D</title>
		<style>
			.stage{
				width:300px;height:300px;margin:100px auto;position:relative;
				perspective:300px;
			}
			.container{
				transform-style:preserve-3d
			}
			.side{
				background:rgba(255,0,0,0.3);
				border:1px solid red;
				font-size:60px;font-weight:bold;color:#fff;text-align:center;
				height:196px;line-height:196px;width:196px;
				position:absolute;
				text-shadow:0 -1px 0 rgba(0,0,0,0.2);
				text-transform:uppercase;
			}
			.front{
				transform:translateZ(100px);
			}
			.back{
				transform:translateZ(-100px);
			}
			.left{
				transform:rotateY(-90deg) translateZ(100px);
			}
			.right{
				transform:rotateY(90deg) translateZ(100px);
			}
			.top{
				transform:rotateX(90deg) translateZ(100px);
			}
			.bottom{
				transform:rotateX(-90deg) translateZ(100px);
			}
			@keyframes spin{
				0%{transform:rotateY(0deg)}
				100%{transform:rotateY(360deg)}
			}
			.container:hover{
				animation:spin 5s linear infinite;
			}
		</style>
	</head>
	<body>
		<div class="stage">
			<div class="container">
				<div class="side front">前面</div>
				<div class="side back">背面</div>
				<div class="side left">左面</div>
				<div class="side right">右面</div>
				<div class="side top">顶面</div>
				<div class="side bottom">底面</div>
			</div>
		</div>
	</body>
</html>

上一篇：七下名著阅读书目七年级下册必读语文课外书有哪些

下一篇： Tableau嵌入视图失败解决办法

CSS3动画

1.1 定义旋转

1.2 定义缩放

1.3 定义移动

1.4 定义倾斜

1.5 定义矩阵

1.6 定义变换原点

2.1 定义位移

2.2 定义缩放

2.3 定义旋转

3.1 设置过渡属性

3.2 设置过渡时间

3.3 设置延迟时间

3.4 设置过渡动画类型

3.5 设置触发方式

4.1 设置关键帧

4.2 设置动画属性

网页Flash动画文件无法显示的原因和解决方法

UG NX10.0怎么制作棘轮机构仿真动画?

SKETCHUP展示建筑生长动画的技巧

CSS3绘制六边形的简单实现

CSS3利用text-shadow属性实现多种效果的文字样式展现方法

5分钟让你掌握css3阴影、倒影、渐变小技巧(小编推荐)

CSS3实现鼠标悬停显示扩展内容

使用CSS3的appearance属性改变任何元素的浏览器默认风格

利用CSS3实现的文字定时向上滚动

CSS3实现可爱的小黄人动画