CSS3-——过渡-CSDN博客

本文链接：https://blog.csdn.net/JLY19970726/article/details/135223974

过渡

过渡可以在不使用 Flash 动画，不使用 JavaScript 的情况下，让元素从一种样式，平滑过渡为另一种样式

1. transition-property

作用:定义哪个属性需要过渡，只有在该属性中定义的属性(比如宽、高、颜色等)才会以有过渡效果。

常用值:.

none : 不过渡任何属性

all:过渡所有能过渡的属性。

具体某个属性名，若有多个以逗号分隔,例如: width,heigth，

不是所有的属性都能过渡，值为数字，或者值能转为数字的属性，都支持过渡，否则不支持过渡。常见的支持过渡的属性有: 颜色、长度值、百分比、 z-index 、 opacity 、 2D 变换属性、 3D 变换属性、阴影。

2.transition-duration

作用:设置过渡的持续时间，即:一个状态过渡到另外一个状态耗时多久。

常用值:

0:没有任何过渡时间 -- 默认值。

s或ms : 秒或毫秒。

列表：如果想让所有属性都持续一个时间，那就写一个值。

如果想让每个属性持续不同的时间那就写一个时间的列表。

3. transition-delay

作用: 指定开始过渡的延退时间，单位: s或ms

4. transition-timing-function

作用:设置过渡的类型

常用值:

1. ease: 平滑过渡-- 默认值

2. linear : 线性过渡

3.ease-in:慢->快

4.ease-out:快->慢

5.ease-in-out :慢->快->慢

6 step-start : 等同于 steps(1， start)

7. step-end : 等同于 steps(1， end)

8. steps( integer,?): 接受两个参数的步进函数。第一个参数必须为正整数，指定函数的步数。第二个参数取值可以是 start 或 end，指定每一步的值发生变化的时间点。第二个参数默认值为 end。

9. cubic-bezie(number,number,number,number): 特定的贝塞尔曲线类型

过渡复合属性：transition:3S all 0.5s linear;

过渡的四个属性：

transition-property

transition-duration

transition-delay

transition-timing-function

5.transition 复合属性

如果设置了一个时间，表示 duration;如果设置了两个时间，第一是 durat1on，第二个是 delay; 其他信没有顺序要求。

transition:1s 1s limear all;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>盒子阴影</title>
		<style>
			#box1{
				width:200px;
				height:200px;
				background:orange;
				/*设置哪个属性需要过渡效果*/
				/*transition-property:width,height,background-color;*/
				/*让所有能过渡的属性，都过渡*/
				transition-property: all;
				/*分别设置时间*/
				/*transition-duration：1s,1s,1s;*/
				/*设置一个时间，所有人都用*/
				transition-duration: 1s;
			}
			#box1:hover{
				width:400px;
				height:400px;
				background-color:green;
			}
		</style>

		<body>
			<div id="box1"></div>
		</body>

</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>盒子阴影</title>
		<style>
			#box1{
				width:200px;
				height:200px;
				background:orange;
				/*设置哪个属性需要过渡效果*/
				/*transition-property:width,height,background-color;*/
				/*让所有能过渡的属性，都过渡*/
				transition-property: all;
				/*分别设置时间*/
				/*transition-duration：1s,1s,1s;*/
				/*设置一个时间，所有人都用*/
				transition-duration: 1s;
			}
			#box1:hover{
				/*能过渡的属性*/
				width:400px;
				height:400px;
				background-color:green;
				transform:rotate(45deg);
				box-shadow: 0px 0px 20px black;
				opacity:1;
			}
		</style>

		<body>
			<div id="box1"></div>
		</body>

</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>盒子阴影</title>
		<style>
			.outer{
				width:1000px;
				height:100px;
				border:1px solid black;
			}
			.inner{
				width:100px;
				height:100px;
				background-color:orange;
				transition:3s all border-left-width.5s linear;
			}
			/*效果是把鼠标放到父元素上子元素的宽度会变得和父元素一样*/
			.outer:hover .inner{
				width:1000px;
			}
		</style>

		<body>
			<div class="outer">
				<div class="inner"></div>
			</div>
		</body>

</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>盒子阴影</title>
		<style>
			.outer{
				width:400px;
				height:224px;
				position:realtive;
				overflow:hidden;
			}
			.mask{
				width:400px;
				height:224px;
				background-color:black;
				color:white;
				position: absolute;
				top:0;
				left:0;
				text-align:center;
				line-height:224px;
				font-size:100px;
				opacity:0;
				transition:1s linear;
			}
			/*单独加过渡*/
			img{
				transition:1s linear;
			}
			.outer:hover .mask{
				opacity:0.5;
			}
			.outer:hover .img{
				transform:scale(1.6) rotate(20deg);
			}
		</style>

		<body>
			<div class="outer">
				<img src="img/2.png"  alt="">
				<div class="mask">铃铛</div>
			</div>
		</body>

</html>