码迷,mamicode.com
首页 > Web开发 > 详细

CSS3-过渡动画

时间:2020-02-20 21:55:04      阅读:69      评论:0      收藏:0      [点我收藏+]

标签:sla   默认   nsf   over   oct   cal   width   set   col   

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>过渡动画效果</title>
	<style type="text/css">
        div {
        	width: 100px;
        	height: 100px;
        	background-color: yellow;
        	transition: all .5s; /*过渡写在本身,谁做动画写在谁身上  s  ms*/
        }
        div:hover {
        	background-color: pink;
        	/*transform: translate(100px,100px);  /**移动到x100,y100位置*/
        	/*transform: scale(1.3); /*先缩小到1.3倍,只有x,y默认 等比例缩放*/

        	/**顺序有关系:先移动后缩放,再旋转45°*/
            transform: translate(100px,100px) scale(0.3) rotate(45deg); 
        }

	</style>
</head>
<body>
	<div></div>
</body>
</html>

  

CSS3-过渡动画

标签:sla   默认   nsf   over   oct   cal   width   set   col   

原文地址:https://www.cnblogs.com/youzhishusheng/p/12337457.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!