CSS3简单运用过渡元素（transition）

发布时间：2024年01月12日

CSS3过渡

概念：在CSS3中，我们可以使用transition属性将元素的某一个属性从“一个属性值”在指定的时间内平滑地过渡到“另一个属性值”，从而实现动画效果。

CSS3变形（transform)呈现的仅仅是一个结果，而CSS过渡（transition）呈现的是一个过程。这个所谓的过程，通俗来说就是一种动画变化过程，如渐渐显示，渐渐隐藏，动画快慢等

语法：

transition:过渡属性 过渡时间 过渡方式 延迟时间;

实例：指定单个属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>过渡</title>
		<style>
			*{
				padding:0;
				margin:0;
			}
			div{
				display:inline-block;
				padding:5px 10px;
				margin:20px;
				text-align:center;
				border-radius:20px;
				background-color:rgba(138,199,83,0.6);
				cursor:pointer;
				transition:background-color 0.3s linear 0s;
				
			}
			.a:hover{
				background-color:rgba(144,83,199,0.4);
				
			}
			
		</style>
	</head>
	<body>
		<div class="a">按钮</div>
	</body>
</html>

运行结果

请添加图片描述

实例：指定多个属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		*{
			padding:0;
			margin:0;
		}
		div{
			width:50px;
			display:inline-block;
			padding:5px 10px;
			margin:20px;
			text-align:center;
			background-color:rgba(138,199,83,0.6);
			cursor:pointer;
			transition:background-color 1s linear 0s,color 0.3s ease 0s,border-radius 0.5s linear 0s;
			
		}
		.a:hover{
			color:white;
			background-color:rgba(144,83,199,0.4);
			border-radius:20px;
		}
		</style>
	</head>
	<body>
			<div class="a">按钮</div>
	</body>
</html>

运行结果

请添加图片描述

实例：指定全部属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>过渡</title>
		<style>
			*{
				padding:0;
				margin:0;
			}
			div{
				width:50px;
				display:inline-block;
				padding:5px 10px;
				margin:20px;
				text-align:center;
				background-color:rgba(138,199,83,0.6);
				cursor:pointer;
				transition:all 0.3s linear 0s;
				
			}
			.a:hover{
				background-color:rgba(144,83,199,0.4);
				width:100px;
				border-radius:20px;
				
			}
			
		</style>
	</head>
	<body>
		<div class="a">按钮</div>
	</body>
</html>

运行结果

请添加图片描述

说明：凡是涉及CSS3过渡，我们都是结合:hover伪类来实现过渡效果的

transition是一个复合属性，主要包括4个子属性。

属性说明
transition-property对元素的哪一个属性进行操作
transition-duration过渡的持续时间
transition-timing-function过渡的速率变化方式
transition-delay过渡的延迟时间（可选参数）

在"实例:指定单个属性"中，属性值

/*transition复合属性*/
transition:background-color 0.3s linear 0s;

/*transition子属性*/
transition-property:background-color;
transition-duration:0.3s;
transition-timing-function:linear;
transition-delay:0s

这两者代码是等价的

过渡属性:transition-property

概念：在CSS3中，可以使用transition-property属性定义过渡效果操作的是哪一个属性.

当指定的CSS属性的值发生改变时，过渡效果才开始

语法：

transition:property:none | all | property;

属性值

属性值说明
none没有属性应用过渡效果
all默认值，所有属性都应用过渡效果
property应用过渡效果的属性名称列表，多个属性间以逗号分隔

过渡时间:transition-duration

概念：在CSS3中，transition-duration属性用于指定过渡效果持续的时间

语法：

transition-duration:time;

属性值

属性值说明
time完成过渡效果所需要的时间（以秒或毫秒记）。默认值为0，表示不出现过渡动画。可以指定多个时长，每个时长会被应用到由transition-property指定的对应属性上。如果指定的时长个数小于属性个数，那么时长列表会重复。如果时长列表更长，那么该列表会被裁剪。两种情况下，属性列表都保持不变

过渡方式:transition-timing-function

概念：在CSS3中，transition-timing-function属性用于指定过渡效果执行时速度变化的时间曲线

语法

transition-timing-function:linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);

属性值

属性值说明速率
linear规定以相同速度开始至结束的过渡效果，即”匀速“在这里插入图片描述
ease默认值，规定慢速开始，变快之后慢速结束的过渡效果在这里插入图片描述
ease-in规定速度越来越快的过渡效果在这里插入图片描述
ease-out规定速度越来越慢的过渡效果在这里插入图片描述
ease-in-out规定以慢速开始和结束的过渡效果在这里插入图片描述
cubic-bezier(n.n,n,n)在cubic-bezier函数中自定义值，参数是0~1的数值

延迟时间:transition-delay

概念：在CSS3中，transition-delay属性用于指定执行过渡效果之前需要等待的时间

语法：

transition-delay:time;

属性值

属性值说明
time定义过渡效果属性执行之前所需要等待的时间（以秒或毫秒计）。该属性值可以为正整数、负整数或0。默认值为0，即不延迟。当取值为正整数时，过渡效果会延迟触发。当取值为负整数时，过渡效果会从该时间点开始，之前的效果会被截断。

实例：导航下拉列表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>导航菜单</title>
		<style>
			*{
				padding:0;
				margin:0;
			}
			a{
				text-decoration:none;
			}
			.nav{
				width:150px;
				height:50px;
				background-color:rgb(83,199,86);
				margin:20px auto;
				line-height:50px;
				text-align:center;
			}
			.list{
				list-style: none;
				height:0;
				overflow:hidden;
				/* 指定应用过渡效果的属性为height */
				transition-property:height;
				/* 指定过渡效果持续时间为1s */
				transition-duration:1s;
				/* 指定过渡效果速度变化 */
				transition-timing-function:linear;
				/* 指定过渡效果延迟执行 */
				transition-delay:0s; 
			}
			.list li{
				background-color:lightblue;
				border-bottom:1px solid red;
				list-style:none;
			}
			.nav:hover .list{
				/* 当鼠标移入导航菜单盒子时，下拉列表的高度发生变化 */
				height:240px;
			}
		</style>
	</head>
	<body>
		<div class='nav'>
			<a href="">中国新四大发明</a>
			<ul class="list">
				<li><a href="">高速铁路</a></li>
				<li><a href="">扫码支付</a></li>
				<li><a href="">共享单车</a></li>
				<li><a href="">网络购物</a></li>
			</ul>
		</div>
	</body>
</html>

运行结果
请添加图片描述

文章来源:https://blog.csdn.net/AIMing_byte/article/details/135560506
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章