css动画(transition,translate,rotate,scale)

序言

为什么会用css动画呢
通过CSS3过渡,我们可以在不使用 Flash 动画或 JavaScript 的情况下,
使元素从一种样式变换为另一种样式时为元素添加效果。
css动画可以做很多特效,特点就是体积小,与js相比不需要操作DOM,下面正式讲解下常用对的css的动画属性。

transition

 规定应用过渡效果的属性名称  transition-property
		属性值为 指定的css属性名称,默认值为 all 全部,none 没有
		注:仅属性值为数值型或颜色的属性可以应用过渡效果,其他属性不行 
		transition-property: all;
				
		规定过渡效果完成所需要花费的时间--完成时间 transition-duration
		属性值以秒(s)或毫秒(ms)计,默认值为 0
		transition-duration: 5s; 
				
		规定过渡完成的时间曲线(速度曲线)  transition-timing-function:
		属性值:	ease 默认值,慢快慢 		ease-in 慢开始 		ease-out 慢结束
		ease-in-out 慢开始和慢结束 		linear 匀速
		cubic-bezier(0,1.51,0,1.28); 
		transition-timing-function: linear; 
				
		规定出发开始以后多久开始执行过渡效果---延时时间  transition-delay
		属性值以秒(s)或毫秒(ms)计,默认值为 0
		属性值可以规定负值,负值表示提前多少时间进入到过渡,会将前几秒错过 
		transition-delay: 2s;
				
		通过transition属性规定过渡的简写
		简写时属性值的顺序不分先后,但是针对时间,默认认为写在前的完成时间,后的为延时时间
		简写时某个值取默认值时可以省略不写,但是必须规定完成时间,只存在一个时间则默认为完成时间
					 
				 transition: all 5s linear 2s; 
				 transition: 2s linear 5s all; 
				 transition: 5s; 

举个简单的例子

 #box {
		width: 500px;
		height: 400px;
		background: yellow;
		border: 20px solid orange;
		font: 30px/50px "";
		color: blue;
		transition:all 1s
	}
#box:hover {
	width: 800px;
	font: 50px/80px "";
	border-style: double;
	background: green;
}
	<div id="box">
		周杰伦不知道你还能不能坚持住,你感觉自己要坚持不住的时候,叫我,我来扛伤害,尤其有人勾引你的时候。
	</div>
	这段代码的含义为当鼠标经过div元素的时候 宽度变成800px 字体也变大了,背景也变了

transform

通过CSS3转换,能够对元素进行移动、缩放、转动、拉伸,转换是使元素改变形状、尺寸和位置的一种效果。
实现转换的属性是 transform

transform 	针对元素进行 2D 或 3D 的转换
	位移:
		translate(x,y) 		指定元素在x轴和y轴的位移
							第一个参数值表示在x轴(水平)上的位移值
							第二个参数值表示在y轴(垂直)上的位移值
		translateX(x) 		指定元素在x轴的位移
		translatey(y) 		指定元素在y轴的位移
			参数值: 	length(数值+单位) 		%(根据元素自身的宽高计算的百分比值)
				x轴位移,正值向右发生位置移动,负值向左发生位置移动
				y轴位移,正值向下发生位置移动,负值向上发生位置移动
		
		transform: translateX(100px) translateY(-50px);
rotate(?deg) 		指定元素在平面上的旋转角度
			参数值: ?deg(+-?deg)
				角度值为 正值 元素 顺时针旋转
				角度值为 负值 元素 逆时针旋转
				
缩放:
		scale(x,y) 			指定元素在x轴和y轴的缩放
							第一个参数值表示在x轴(水平)上的缩放值
							第二个参数值表示在y轴(垂直)上的缩放值
							可以给到一个参数值,此值表示x轴和y轴都按照此值放大或缩小
		scaleX(x) 			指定元素在x轴的缩放
		scaleY(Y) 			指定元素在y轴的缩放
			参数值:	数字,表示与元素原本大小的倍数值
				默认值为1,原本大小
				大于1的值都表示放大的倍数值
				小于1但是大于0表示的是缩小的倍数值
				为0,缩小到没有
				可以规定负值,表示的是反向放大缩小的倍数值

用得少

	拉伸(倾斜)skew(x,y) 			指定元素在x轴和y轴的拉伸倾斜
							第一个参数值表示在x轴(水平)上的拉伸值
							第二个参数值表示在y轴(垂直)上的拉伸值
		skewX(x) 			指定元素在x轴的拉伸倾斜
		skewY(y) 			指定元素在y轴的拉伸倾斜
			参数值:	?deg(+-?deg)
				x轴正值将元素的左上角和右下角沿着x轴拉伸角度使元素产生倾斜
				x轴负值将元素的右上角和左下角沿着x轴拉伸角度使元素产生倾斜
				y轴正值将元素的左上角和右下角沿着y轴拉伸角度使元素产生倾斜
				y轴负值将元素的右上角和左下角沿着y轴拉伸角度使元素产生倾斜
transform-origin 	设置改变转换元素的中心点原点
	第一个属性值:x轴坐标点
		left
		center
		rigth
		length
		%
	第二个属性值:y轴坐标点
		top
		center
		bottom
		length
		%

写动画的大概思路就是
1 写好初始状态
2 写好最终状态
3 写上需要过渡的属性+过渡时间+过渡的速度(匀速还是先快后慢还是先慢后快 还有贝塞尔曲线)

举个例子吧
附上源代码(直接复制可运行)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{margin: 0;padding: 0;}
			html{
				height: 100%;
			}
			body{
				height: 100%;
				background: #ccc;
				display: flex;
				justify-content: space-around;
				align-items: center;
			}
			a{
				width: 150px;
				height: 150px;
				border: 10px groove #fff;
				border-radius: 50%;
				opacity: .3;
				position: relative;
				z-index: 10;
			}
			a:nth-of-type(1){
				background: url(./过去式/a1.jpg) no-repeat center;
			}
			a:nth-of-type(2){
				background: url(./过去式/b1.jpg) no-repeat center;
			}
			a:nth-of-type(3){
				background: url(./过去式/c1.jpg) no-repeat center;
			}
			a:nth-of-type(4){
				background: url(./过去式/d1.jpg) no-repeat center;
			}
			a:nth-of-type(5){
				background: url(./过去式/e1.jpg) no-repeat center;
			}
			a:hover{
				opacity: 1;
			}
			img{
				width: 100%;
				height: 100%;
				position: fixed;
				left: 0;
				top: 0;
				opacity: 0;
				transition: all 3s linear;
			}
			img:nth-of-type(1){
				/* top: -100%; */
				transform: translateY(-100%);
			}
			img:nth-of-type(1):target{
				opacity: 1;
				transform: translateY(0);
			}
			img:nth-of-type(2){
				/* left: -100%; */
				transform: translateX(-100%);
			}
			img:nth-of-type(2):target{
				opacity: 1;
				transform: translateX(0);
			}
			img:nth-of-type(3):target{
				opacity: 1;
				transform: rotate(360deg);
			}
			img:nth-of-type(4){
				transform: scale(.7);
			}
			img:nth-of-type(4):target{
				opacity: 1;
				transform: scale(1);
			}
			img:nth-of-type(5){
				transform: scale(1.4);
			}
			img:nth-of-type(5):target{
				opacity: 1;
				transform: scale(1);
			}
		</style>
	</head>
	<body>
		<a href="#aaa"></a>
		<a href="#bbb"></a>
		<a href="#ccc"></a>
		<a href="#ddd"></a>
		<a href="#eee"></a>
		<img src="./过去式/a.jpg" id="aaa">
		<img src="./过去式/b.jpg" id="bbb">
		<img src="./过去式/c.jpg" id="ccc">
		<img src="./过去式/d.jpg" id="ddd">
		<img src="./过去式/e.jpg" id="eee">
	</body>
</html>

使用到一个锚点链接 img的话随便在网上找几张就好了

你可能感兴趣的:(css3,html,前端)