CSS3中的变形与动画
鼠标移动到指定的区域的某一个位置,触发改变div标签的长度,宽度,背景颜色和字体颜色。移除鼠标恢复原本的长度,宽度,背景颜色和字体颜色。(简称:鼠标移入移出改变事件)
eg:
<title>动画transform transition animation</title>
<style>
.wrapper {
width:200px;
height:200px;
border:2px dotted #4AB01A;
margin:200px;
}
.wrapper div{
width:200px;
height:200px;
background:#CF2225;
line-height:200px;
text-align:center;
color:#fff;
font-size:20px;
/*transition-property:width height background color;*/
transition-property:all;
transition-duration:2s;
}
.wrapper div:hover{
width:400px;
height:400px;
background:#2CD764;
color:#C7E425;
}
</style>
</head>
<body>
<div class="wrapper">
<div><span>哈哈,旋转(^_^)</span></div>
</div>
</body>
CSS3动画
CS