17 CSS使用过渡

「已注销」

于 2019-09-03 14:12:14 发布

阅读量234

点赞数

分类专栏： HTML5+CSS+JS

本文链接：https://blog.youkuaiyun.com/Tracy785/article/details/100517067

版权

HTML5+CSS+JS 专栏收录该内容

27 篇文章

订阅专栏

<html>
<head>
	<meta charset='utf-8'>
	<title>transition</title>
	<style type='text/css'>
		p{
			width:100px;
			height:100px;
			background-color:antiquewhite
		}
		p:hover{
			width:200px;
			height:200px;
			background-color:#ffad2a;
			transition-delay:150ms;
			transition-duration:500ms;
			transition-property:background-color
		}
	</style>
</head>
<body>
<p></p>
</body>
</html>

贝塞尔曲线
在这里插入图片描述

<html>
<head>
	<meta charset='utf-8'>
	<title>animation</title>
	<style type='text/css'>
		p{
			width:100px;
			height:100px;
			background-color:antiquewhite
		}
		p:hover{
			width:200px;
			height:200px;
			background-color:#ffad2a;
			transition-delay:150ms;
			transition-duration:1000ms;
			transition-timing-function:ease-in-out
		}
	</style>
</head>
<body>
<p></p>
</body>
</html>