CSS3简单运用过渡元素(transition)

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 规定以相同速度开始至结束的过渡效果,即”匀速“ CSS3简单运用过渡元素(transition)_第1张图片
ease 默认值,规定慢速开始,变快之后慢速结束的过渡效果 CSS3简单运用过渡元素(transition)_第2张图片
ease-in 规定速度越来越快的过渡效果 CSS3简单运用过渡元素(transition)_第3张图片
ease-out 规定速度越来越慢的过渡效果 CSS3简单运用过渡元素(transition)_第4张图片
ease-in-out 规定以慢速开始和结束的过渡效果 CSS3简单运用过渡元素(transition)_第5张图片
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>

运行结果
CSS3简单运用过渡元素(transition)_第6张图片

你可能感兴趣的:(html+css,css3,前端,css,html)