随笔- 319  评论- 386  文章- 1 

CSS3(2)--- 过渡(transition)

CSS3(2)--- 过渡(transition)

一、概念

1、什么是过渡

通俗理解 是从一个状态 渐渐的过渡到 另外一个状态。

比如一个盒子原先宽度为100px,当鼠标点击时盒子的宽度变成200px,如果直接从100px变化到200px。从视觉上看去并不友好。我们更喜欢看到的是平滑的过渡。

2、浮动的语法

属性语法格式

transition: 要过渡的属性  花费时间  运动曲线  何时开始;
// 如果有多组属性变化,还是用逗号隔开。前两个属性必须写。后两个可以不写。运动曲线默认匀速。开始时间默认0秒。

属性值

注意

- 如果想要所有的属性都变化过渡, 写一个all 就可以
- transition-duration 花费时间 单位是 秒 s (这个秒是一定需要的)
- 运动曲线 默认是 ease
- 默认是 0s 立马开始
- 过渡写到本身上 谁做过渡动画,写到谁身上(下面例子说明)

运动曲线示意图


二、示例

1、示例一

效果

代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css3过渡</title>
	<style>
	div {
		width: 100px;
		height: 100px;
		background-color: pink;
		/*transition: width 0.5s ease 0s, height 0.3s; 多组属性用逗号分隔*/
		transition: all 1s; /*  这里过渡是当前div,按照谁做过渡动画,写到谁身上,所以这里要写在这里*/
	}
	div:hover {
		width: 400px;
		height: 300px;
	}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

2、示例二

效果

代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS过渡</title>
	<style>
	div {
		width: 183px;
		height: 130px;
		border: 1px solid red;
		overflow: hidden;  /*多余部分隐藏*/
	}
	div img {
		width: 193px;
		height: 130px;
		transition: all 0.4s; /*所以变化,过渡时间0.4秒*/
	}
	div:hover img {
		margin-left: -10px;  /*移动*/
	}
	</style>
</head>
<body>
	<div>
		<img src="1.jpg" alt="">
	</div>
</body>
</html>

3、示例三

效果

代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css过渡</title>
	<style>
	* {
		margin: 0;
		padding: 0;
	}
	li {
		list-style: none;
	}
	.subnav {
		margin: 100px auto;
		width: 20px;
	}
	.subnav li {
		width: 20px;
		height: 20px;
		margin: 3px 0;
		background-color: pink;
		position: relative;
	}
	.subnav div {
		position: absolute;  /*子绝父相*/
		right: 0;
		top: 0;
		height: 20px;
		width: 0;
		background-color: purple;
		transition: all 0.6s;
		z-index: -1;  /*这里设置定位级别小于父类,所以父类浮在它上面*/
	}
	.subnav li:hover div {
		width: 100px;
	}
	</style>
</head>
<body>
	<div class="subnav">
		<ul>
			<li>
				<div></div>
			</li>
			<li><div></div></li>
			<li><div></div></li>
			<li><div></div></li>
			<li><div></div></li>
		</ul>
	</div>
</body>
</html>


``` 你如果愿意有所作为,就必须有始有终。(16) ```
posted on 2019-12-16 23:27  雨点的名字  阅读(...)  评论(...编辑  收藏