1、转换 2、过渡 3、动画

最新推荐文章于 2022-05-24 15:52:17 发布

NotBad_1

最新推荐文章于 2022-05-24 15:52:17 发布

阅读量566

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/NotBad_/article/details/51922605

版权

css 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

1、转换
1、什么是转换
转换即改变元素的一些状态，大小、位置、形状
可以是2d转换，也可以是3d的转换
2d : 使元素在 x轴和 y轴上发生变化
3d ：2d基础上增加了 z轴的变化
2、转换属性
CSS3转换属性:
transform : none / transform-function;
none:不转换，默认值
transform-function：表示要实现转换的函数
旋转：rotate()
位移：translate()
缩放：scale()
transform:rotate(); -- 旋转操作
3、转换原点：
转换原点：即转换过程中围绕的中心点。
默认情况下，原点是在整个元素的中间处
更改转换原点：
transform-origin:
取值：
数值：以元素左上方的点为(0,0)，再去计算其他点
百分比:
0% , 0% : 左上方的点
50% ， 50% ：元素的中心点
关键字:
left
right
top
bottom
center
left top : 表示左上方
transform-origin赋值：
一个值：x轴的移动
两个值：x轴和y轴
三个值：x轴，y轴，z轴
2、2D转换 - 位移
位移：位置移动
从当前元素的位置处，移动到指定坐标轴位置处
函数：
translate(x,y)
translate(value);
取值：
数值、百分比
取负值
x ：正向右移动
负向左移动
y : 正向下移动
负向上移动
单方向位移：
translateX(x)
translateY(y)
3、2D转换 - 缩放
缩放：改变元素大小
函数：scale(value)
scale(x,y)
取值：
默认值 1
缩小：0 - 1 之间的小数
放大：大于1
scaleX(x) : 横向缩放
scaleY(y) : 纵向缩放
4、2D转换 - 旋转
围绕着指定点，按照指定的角度发生的旋转
函数：rotate(deg)
取值：deg 为角度 0-360
默认为顺时针旋转
deg取值为负的话，则将逆时针旋转
5、2D转换 - 倾斜
函数：skew()
取值：为角度
skewX(x)

skewY(y)

2D转换案例

<!DOCTYPE html>
<html>
 <head>
  <title> 2d转换-位移 </title>
  <meta charset="utf-8" />
  <style>
	div{
		width:200px;
		height:200px;
		position:absolute;
		left:200px;
		top:100px;
	}
	#d1{
		border:1px dotted black;
	}
	#d2{
		border:1px solid black;
		background:rgba(0,0,255,0.3);
	}

	#d2{
		/**位移*/
		/*属性：transform*/
		/*函数：translate*/
		/*transform:translate(50%,-50%);*/
		/*transform:translatex(200px);*/
	}
	#d2{
		/*缩放*/
		/*属性：transform*/
		/*函数：scale()*/
		/*transform:scale(0.5,2);*/
	}
	#d2{
		/*旋转*/
		/*属性：transform*/
		/*函数：rotate(deg)*/
		/*transform:rotate(45deg) translateX(150px);*/
		/*transform:rotate(-270deg);*/
		/**变换原点*/
		/*transform-origin:left top;
		transform:rotate(45deg);*/
	}
	#d2{
		/*transform:skewX(45deg);*/
		transform:skewY(45deg);
	}
  </style>
 </head>

 <body>
  <div id="d1">原始位置</div>
  <div id="d2">待转换元素</div>
 </body>
</html>

6、3D转换
属性:
perspective : 设置假定人眼到投影平面的距离
只影响3D元素，不影响2D元素
设置位置：加在父元素上，设置好后，其子元素就可以完成3D的转换。
1、3d位移
改变元素在z轴上的位置
属性：transform:
函数：translateZ(z);
translate3d(x,y,z);
2、3d旋转
属性：transform
函数：
rotateX(deg);
rotateY(deg);
rotateZ(deg)
rotate3d(x,y,z,deg);
x,y,z : 取值为 1，0，-1

rotate3d(-1,0,1,45deg);

3D旋转案例

<!DOCTYPE html>
<html>
 <head>
  <title> 3d转换 </title>
  <meta charset="utf-8" />
  <style>
	#father{
		-webkit-perspective:100px;
		width:200px;
		height:200px;
		border:1px solid black;
		position:relative;
	}
	#div1{
		position:absolute;
		width:100px;
		height:100px;
		border:1px solid black;
		background:#ddd;
		left:50px;
		top:50px;
		/*x轴旋转*/
		transform:rotateX(45deg);
		/*y轴旋转*/
		/*transform:rotateY(360deg);*/
		/*z轴旋转*/
		/*transform:rotateZ(90deg);*/
	}

  </style>
 </head>

 <body>
  <div id="father">
	<div id="div1">Rotate Div</div>
  </div>
 </body>
</html>

****************************************************
1、过渡
1、什么是过渡
元素从一个【状态】到另外一个【状态】的【平滑变换】【过程】
2、过渡属性
transition
3、过渡4要素(子属性)
1、过渡属性
元素的哪个【状态】发生变化时要使用过渡的效果
当指定的属性发生改变时，就会触发过渡效果
语法：
transition-property:none | all | property
transition-property:background;
2、过渡时间
整个过渡效果在多长时间内完成，以秒(s)或毫秒(ms)为单位
语法：
transition-duration: s|ms;
transition-duration:1s;
注意：
过渡时间默认为 0 ，如果为0时，则没有过渡的效果产生。
如果想看到过渡效果，则必须设置该属性。
3、过渡函数
指定时间内(transition-duration)过渡的速度效果。
语法：
transition-timing-function
取值：
ease : 默认值，慢速开始，速度变快，慢速结束
linear:匀速开始到结束
ease-in:慢速开始，加速效果(由慢到快)
ease-out:慢速结束，减速效果(由快到慢)
ease-in-out:以慢速开始和结束，先加速再减速
4、过渡延迟
当过渡操作被激发后，等待多长时间后才开始执行效果
语法：transition-delay
以秒或毫秒作为单位
5、统一设置过渡效果
属性：
transition:
用于设置四个过渡子属性
transition:transition-property transition-duration transition-timing-function transition-delay;
transition: prop dura timing delay;
4、触发过渡
过渡效果由用户的行为进行触发(点击、鼠标悬停)
4、多个过渡效果
transition-property:prop1,prop2;
transition-duration:t1,t2;
transition-timing-function:fun1,fun2;

transition-delay:delay1,delay2;

过度案例

<!DOCTYPE html>
<html>
 <head>
  <title> 背景颜色和宽度改变</title>
  <meta charset="utf-8" />
  <style>
	#d1{
		width:200px;
		height:200px;
		background:red;
		/*过渡*/
		transition-property:background,width;
		transition-duration:2s;
		transition-timing-function:linear;
		transition-delay:1s;
	}
	#d1:hover{
		/*过渡*/
		/*transition:background 2s linear 0s;*/
		background:blue;
		width:400px;
		height:400px;
	}
  </style>
 </head>

 <body>
  <div id="d1"></div>
 </body>
</html>

<!DOCTYPE html>
<html>
 <head>
  <title> 鼠标悬停旋转效果 </title>
  <meta charset="utf-8" />
  <style>
    #parent{
		-webkit-perspective:150px;
		border:1px solid #ddd;
	}
	#d1{
		border-top:5px solid #000;
		position:absolute;
		top:100px;
		left:300px;
		width:200px;
		height:200px;
		background:rgba(255,0,0,0.3);
		/*过渡*/
		transition:transform 2s linear 0s;
	}
	#d1:hover{
		/*transform:rotate(720deg);*/
		transform:rotateZ(360deg);
	}
  </style>
 </head>

 <body>
  <div id="parent">
	<div id="d1"></div>
  </div>
 </body>
</html>

<!DOCTYPE html>
<html>
 <head>
  <title> 鼠标放在分针上自动旋转 </title>
  <meta charset="utf-8" />
  <style>
	#clock{
		width:400px;
		height:400px;
		border:6px solid #369;
		border-radius:50%;
		position:relative;
	}
	#minute{
		width:10px;
		height:100px;
		background:#f00;
		position:absolute;
		top:100px;
		left:195px;
	}
	#second{
		width:6px;
		height:140px;
		background:#369;
		position:absolute;
		left:197px;
		top:60px;
		transform-origin:3px bottom;
		/*定义过渡效果*/
		transition:transform 60s linear 0s;
	}
	#second:hover{
		/*激发过渡操作*/
		transform:rotate(360deg);
	}
  </style>
 </head>

 <body>
  <div id="clock">
	<div id="minute"></div>
	<div id="second"></div>
  </div>
 </body>
</html>

2、动画
1、什么是动画
将元素的多个状态放在一起进行运行(多个状态间的转换)
过渡：实现简单的动态效果
动画：实现复杂的动态效果
注意：浏览器兼容性
Chrome 和 Safari : -webkit-
Firefox : -moz-
Opera : -o-
实现动画的步骤:
1、声明动画
@keyframes
声明整个动画过程中的不同状态都是什么
2、调用动画
通过 animation 属性调用已声明动画
2、关键帧
语法：@keyframes 规则声明动画

      <span style="white-space:pre">	</span><style>
		@keyframes 动画名称{
<span style="white-space:pre">			</span>/*定义关键帧即不同时间点上的动画状态*/
<span style="white-space:pre">			</span>from | 0%{
<span style="white-space:pre">			</span>/*动画的开始状态(样式)*/
<span style="white-space:pre">			</span>}
<span style="white-space:pre">			</span>/*...若干关键帧*/
<span style="white-space:pre">			</span>20%{
<span style="white-space:pre">				</span>/*动画在执行到20%的时候的状态(样式)*/
<span style="white-space:pre">			</span>}
<span style="white-space:pre">			</span>25%{

<span style="white-space:pre">			</span>}
<span style="white-space:pre">			</span>26%{

<span style="white-space:pre">			</span>}

<span style="white-space:pre">			</span>to | 100%{
<span style="white-space:pre">			</span>/*动画结束时候的状态(样式)*/
<span style="white-space:pre">			</span>}
<span style="white-space:pre">		</span>}


<span style="white-space:pre">		</span>@-webkit-keyframes changeBack{

<span style="white-space:pre">		</span>}
<span style="white-space:pre">		</span>@-moz-keyframes changeBack{

<span style="white-space:pre">		</span>}
<span style="white-space:pre">		</span>@-o-keyframes changeBack{

<span style="white-space:pre">		</span>}
      </style>

3、动画属性(调用)
1、animation-name : 调用动画的名称，指定 @keyframes 的名字
2、animation-duration:动画执行的时常以 s或ms
3、animation-timing-function:动画执行时的速度效果
取值 ease,linear,ease-in,ease-out,ease-in-out
4、animation-delay:延迟时间，以s或ms为单位
5、animation-iteration-count
动画执行的次数
取值：
1、具体数值
2、infinite : 无限次播放
6、animation-direction : 动画播放方向
取值：
normal
alternate :
奇数次播放为正向播放(状态从from - to)
偶数次播放为逆向播放(状态从to - from)
7、动画综合属性 : animation
ainimation:name duration timing-function delay iteration-count direction;
8、animation-fill-mode
指定动画在播放之前或之后的效果
none : 默认行为
forwards:动画完成后，保持最后一个状态
backwards : 动画显示之前，保持在第一个状态
both:动画完成后，动画显示前，都被相应的状态所保持着。

9、animation-play-state
定义动画播放状态
配合着 Javascript使用，用于播放过程中暂停动画
取值：
paused ：暂停

running ：播放

动画案例

<!DOCTYPE html>
<html>
 <head>
  <title> new document </title>
  <meta charset="utf-8" />
  <style>
	#d1{
		width:100px;
		height:100px;
		background:red;
		/*调用 changeDiv 的动画*/
		-webkit-animation:changeDiv 5s linear 0s;
		/*-webkit-animation-fill-mode:both;*/
		/*-webkit-animation-direction:reverse;*/
	}
	/*声明动画*/
	@-webkit-keyframes changeDiv{
		from{
			background:red;
		}
		25%{
			transform:translateX(50px);
			background:green;
		}
		50%{
			transform:translateY(50px);
			background:yellow;
		}
		75%{
			transform:translate(50px,-50px);
			background:pink;
		}
		to{
			transform:translateX(0px);
			border-radius:50%;
			background:blue;
		}
	}
  </style>
 </head>

 <body>
  <div id="d1"></div>
 </body>
</html>

时钟动画

<!DOCTYPE html>
<html>
 <head>
  <title> new document </title>
  <meta charset="utf-8" />
  <style>
	#clock{
		width:400px;
		height:400px;
		border:6px solid #369;
		border-radius:50%;
		position:relative;
	}
	#minute{
		transform-origin:5px bottom;
		width:10px;
		height:100px;
		background:#f00;
		position:absolute;
		top:100px;
		left:195px;
		-webkit-animation:minute 3600s linear 0s infinite;
	}
	#second{
		transform-origin:3px bottom;
		width:6px;
		height:140px;
		background:#369;
		position:absolute;
		left:197px;
		top:60px;
		-webkit-animation:second 60s linear 0s infinite;
	}
	/**定义分针动画*/
	@-webkit-keyframes minute{
		from{
			transform:rotate(0deg);
		}
		to{
			transform:rotate(360deg);
		}
	}
	/*定义秒针动画*/
	@-webkit-keyframes second{
		0%{
			transform:rotate(0deg);
		}
		100%{
			transform:rotate(360deg);
		}
	}
  </style>
 </head>

 <body>
  <div id="clock">
	<div id="minute"></div>
	<div id="second"></div>
  </div>
 </body>
</html>

NotBad_1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
1、转换 2、过渡 3、动画

1、转换 1、什么是转换转换即改变元素的一些状态，大小、位置、形状可以是2d转换，也可以是3d的转换 2d : 使元素在 x轴和 y轴上发生变化 3d ：2d基础上增加了 z轴的变化 2、转换属性 CSS3转换属性:transform : none / transform-function;none:
复制链接

扫一扫