简单transition动画
html代码:
1 <div class="img1">效果1,360度旋转</div> 2 <div class="img2">效果2,放大</div> 3 <div class="img3">效果3,旋转放大</div> 4 <div class="img4">效果4,上下左右移动</div>
css代码:
div{ width: 120px; height: 120px; line-height: 120px; margin:20px; background-color: #5cb85c; float: left; font-size: 12px; text-align: center; color: orangered; } .img1,.img2,.img3,.img4{ transition: all 0.4s ease-in-out; } .img1:hover{ transform: rotate(360deg); } .img2:hover{ transform: scale(1.2); } .img3:hover{ transform: rotate(360deg) scale(1.2); } .img4:hover{ transform: translate(0,-10px); }