css动画（transition，translate，rotate，scale）

最新推荐文章于 2024-04-25 16:16:15 发布

爱玩亚索的程序员

最新推荐文章于 2024-04-25 16:16:15 发布

阅读量2.1k

点赞数 3

文章标签： css3 html 前端

zhang_chao96@163.com

本文链接：https://blog.csdn.net/qq_45815947/article/details/124383986

版权

序言

为什么会用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的话随便在网上找几张就好了

爱玩亚索的程序员

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
css动画（transition，translate，rotate，scale）

序言为什么会用css动画呢通过CSS3过渡，我们可以在不使用 Flash 动画或 JavaScript 的情况下，使元素从一种样式变换为另一种样式时为元素添加效果。css动画可以做很多特效，特点就是体积小，与js相比不需要操作DOM，下面正式讲解下常用对的css的动画属性。transition 规定应用过渡效果的属性名称 transition-property 属性值为指定的css属性名称，默认值为 all 全部，none 没有注：仅属性值为数值型或颜色的属性可以应用过渡效果，其他
复制链接

扫一扫