<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css3过渡效果笔记</title>
<style type="text/css">
.transition{
width: 300px;
height: 300px;
background: aqua;
margin:0 auto;
color: darkslategrey;
margin-top: 200px;
text-align: center;
line-height: 300px;
overflow: hidden;
transition: all 5s ;
}
/*-- hover style --*/
.transition:hover{
width: 100px;
height: 100px;
border-radius: 50%;
background-color: cornflowerblue;
transform: rotate(10000deg);
}
p{
text-align: center;
}
.zhu{
color: red;
}
</style>
</head>
<body>
<div class="transition">
鼠标指向我，我将旋转由方到圆颜色变化
</div>
<p>可以以实现鼠标移上去过后的过渡效果</p>
<p class="zhu">注：必须经过事件的触发才可以实现动画效果</p>
</body>
</html>
<html>
<head>
<meta charset="utf-8" />
<title>css3过渡效果笔记</title>
<style type="text/css">
/*-- box style --*/
width: 300px;
height: 300px;
background: aqua;
margin:0 auto;
color: darkslategrey;
margin-top: 200px;
text-align: center;
line-height: 300px;
overflow: hidden;
transition: all 5s ;
}
/*-- hover style --*/
.transition:hover{
width: 100px;
height: 100px;
border-radius: 50%;
background-color: cornflowerblue;
transform: rotate(10000deg);
}
p{
text-align: center;
}
.zhu{
color: red;
}
</style>
</head>
<body>
<div class="transition">
鼠标指向我，我将旋转由方到圆颜色变化
</div>
<p>可以以实现鼠标移上去过后的过渡效果</p>
<p class="zhu">注：必须经过事件的触发才可以实现动画效果</p>
</body>
</html>