css3中transition的五种效果

最新推荐文章于 2025-04-09 15:52:37 发布

elena_0117

最新推荐文章于 2025-04-09 15:52:37 发布

阅读量1.6k

点赞数

分类专栏： css3 文章标签： css3 transition效果

本文链接：https://blog.youkuaiyun.com/elena20170326/article/details/73724654

版权

css3 专栏收录该内容

2 篇文章

订阅专栏

本文通过实例详细介绍了如何使用CSS来实现不同类型的过渡效果，包括线性的垂直过渡、缓动过渡等，展示了:hover伪类的选择器状态变化触发的动画效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	    .progress-bar{
	    	width:40px;
	    	height:40px;
	    	background-color: #69c;
	    }
	    .progress-bar:hover{
             height:700px;
	    }
	    #bar1{
	    	transition: height 5s linear;
	    	-moz-transition: height 5s linear;/*火狐浏览器用*/
	    }
         #bar2{
	    	transition: height 5s ease;
	    	-moz-transition: height 5s ease;/*火狐浏览器用*/
	    }
	    #bar3{
	    	transition: height 5s ease-in;
	    	-moz-transition: height 5s ease-in;/*火狐浏览器用*/
	    }
	    #bar4{
	    	transition: height 5s ease-out;
	    	-moz-transition: height 5s ease-out;/*火狐浏览器用*/
	    }
	    #bar5{
	    	transition: height 5s ease-in-out;
	    	-moz-transition: height 5s ease-in-out;/*火狐浏览器用*/
	    }
	</style>
</head>
<body>
	<p>vertical</p>
	<div class="progress-bar" id="bar1"></div>
	<p>ease</p>
	<div class="progress-bar" id="bar2"></div>
	<p>ease-in</p>
	<div class="progress-bar" id="bar3"></div>
	<p>ease-out</p>
	<div class="progress-bar" id="bar4"></div>
	<p>ease-in-out</p>
	<div class="progress-bar" id="bar5"></div>
</body>
</html>