css3过渡效果

最新推荐文章于 2023-01-12 08:16:21 发布

red_paper_zj

最新推荐文章于 2023-01-12 08:16:21 发布

阅读量240

点赞数 1

文章标签： css3 html5

本文链接：https://blog.csdn.net/red_paper_zj/article/details/105007953

版权

关于Css3过渡

Css3过渡

Css3过渡

	什么是css3过渡？CSS3 过渡其实就是元素从一种样式逐渐改变为另一种样式的效果，实现了最初级的动画效果。

过渡作用

	让元素的变化发生平滑的效果，显得不生硬

具体参数的取值及说明

	<transition-property>	定义用于过渡的属性；例：all；

	<transition-duration>	定义过渡过程所需要的时间；（必选，否则不会产生过渡效果）；例：2s（两秒）；

	<transition-delay>	定义开始过渡的延迟时间；例：1s（一秒）；

	<transition-timing-function>	定义过渡的类型；例：ease-in(加速）；

Css3过渡综合写法

	例：transition：width，0.5s，1s，linear；
		transition：指定属性，过渡时间，延迟时间，动画类型；
	（注意：transition属性可以同时定义两组或两组以上的过渡效果，最少写一组，也就是过渡时间属性transition-duration；组与组之间用逗号或空格分隔。）

案例：实际效果（附：代码）

初始效果：
在这里插入图片描述
过渡效果：

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			.box1{
				width:200px;
				height:200px;
				background:red;
				margin:100px;
				border:4px solid #000;
			}
			.box2{
				width:100px;
				height:100px;
				background:pink;
				margin-left:-104px;
				transition:all 1s 0.5s;/*所有属性，过渡时间1s，延迟时间0.5s*/
			}
			.box1:hover .box2{
				margin-left:150px;
				background:gold;
			}
			.box3{
				width:600px;
				height:300px;
				background:skyblue;
				margin:100px;
				border:4px solid #000;
			}
			.box4{
				width:100px;
				height:50px;
				background:red;
				margin:20px 0px;
			}
			.con1{
				transition:all 5s 1s linear;
			}
			.con2{
				transition:all 2s 1s linear;/*匀速*/
			}
			.con3{
				transition:all 2s 1s ease;/*逐步降速，由快到慢*/
			}
			.con4{
				transition:all 2s 1s ease-in;/*逐步加速，由慢到快*/
			}
			.box3:hover .box4{
				width:600px;
				background:yellow;
			}
		</style>
	</head>
	<body>
		<div class="box1">
			<div class="box2"></div>
		</div>
		<div class="box3">
			<div class="box4 con1"></div>
			<div class="box4 con2"></div>
			<div class="box4 con3"></div>
			<div class="box4 con4"></div>
		</div>
	</body>
</html>

red_paper_zj

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css3过渡效果

关于Css3过渡Css3过渡过渡作用具体参数的取值及说明Css3过渡综合写法案例：实际效果（附：代码）Css3过渡什么是css3过渡？CSS3 过渡其实就是元素从一种样式逐渐改变为另一种样式的效果，实现了最初级的动画效果。过渡作用让元素的变化发生平滑的效果，显得不生硬具体参数的取值及说明 &lt;transition-property&gt; 定义用于过渡的属性...
复制链接

扫一扫