HTML5开发系列 之 过渡动画

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/z_x_Qiang/article/details/82821524

过渡动画

transition 属性 可以在属性之间参数多个帧数进行显示,这样就会看起来和动画效果一样的;

可以实现类似小米官网上的鼠标移动上去产生阴影效果,动态的添加阴影,盒子的位置;

过渡动画是css3出现的新特性;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				width: 100px;
				height:100px;
				background-color: yellow;
				transition: all;	/*属性width height background-color 三个属性变化*/
				transition-duration: 500ms;
				transition-delay: 1000ms;		/*延迟1000ms执行动画*/
			}
			div:hover{
				width: 200px;		
				height: 200px;
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

猜你喜欢

转载自blog.csdn.net/z_x_Qiang/article/details/82821524
今日推荐