5、CSS 过渡动画

最新推荐文章于 2024-04-25 16:16:15 发布

CodeCode!

最新推荐文章于 2024-04-25 16:16:15 发布

阅读量153

点赞数

分类专栏： CSS 文章标签： css css3 html html5

本文链接：https://blog.csdn.net/qq_42847094/article/details/108010068

版权

CSS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

过渡动画

设置过渡的属性
设置过渡的时间
设置过渡的速度
设置过渡的延迟时间

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			#d1{
				width: 100px;
				height: 100px;
				background: skyblue;
				
				/*过渡效果,综合性过渡效果设置*/
				/*transition: width 2s;*/
				/*设置具有过渡效果的属性
				 	可设置多个值（用逗号隔开）：width, background
				 	设置全部： all
				 * */
				transition-property: all;
				
				/*过渡的时间长度*/
				transition-duration: 2s;
				
				/*
				
				 ease:(默认值)，从慢到快再 慢下来
				 linear:线性速度
				 ease-in:从慢到快的变化 过程
				 ease-out:从快到慢的过程
				 可通过浏览器进行调节获取 ,曲线 值 
				  */
				transition-timing-function: ease-out;
				/*transition-timing-function:cubic-bezier(0, 0, 1, 0.07)*/
				
				/*设置延时时间*/;
				/*transition-delay: 2s;*/
				
			}
			#d1:hover{
				width: 800px;
				height: 100px;
				background: orange;
			}
		</style>
	</head>
	<body>
		<div id="d1">
			
		</div>
	</body>
</html>

在这里插入图片描述

仿小米悬浮过渡效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#d1{
				width: 200px;
				height: 300px;
				margin: 0 auto;/*居中*/
				background: skyblue;
				box-shadow: 0 0 0px #ccc; /*阴影*/
				transition: all 0.5s ease; /*动画过渡*/
			}
			#d1:hover{
				box-shadow: 0 5px 10px #ccc;
			}
		</style>
	</head>
	<body>
		<div id="d1">
			
		</div>
	</body>
</html>