CSS3 動畫-- 滑鼠移上去，div 會旋轉、放大、移動
阿新 • • 發佈：2018-12-10
原碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> div{ width:120px; height:120px; line-height:120px; margin: 20px; background-color: #5cb85c; float: left; font-size: 12px; text-align: center; color:#000; } /*效果一：360°旋轉 修改rotate(旋轉度數)*/ .img1 { transition: All 0.4s ease-in-out; -webkit-transition: All 0.4s ease-in-out; -moz-transition: All 0.4s ease-in-out; -o-transition: All 0.4s ease-in-out; } .img1:hover { transform: rotate(360deg); -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); } /*效果二：放大 修改scale(放大的值)*/ .img2 { transition: All 0.4s ease-in-out; -webkit-transition: All 0.4s ease-in-out; -moz-transition: All 0.4s ease-in-out; -o-transition: All 0.4s ease-in-out; } .img2:hover { transform: scale(1.2); -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -o-transform: scale(1.2); -ms-transform: scale(1.2); } /*效果三：旋轉放大 修改rotate(旋轉度數) scale(放大值)*/ .img3 { transition: All 0.4s ease-in-out; -webkit-transition: All 0.4s ease-in-out; -moz-transition: All 0.4s ease-in-out; -o-transition: All 0.4s ease-in-out; } .img3:hover { transform: rotate(360deg) scale(1.2); -webkit-transform: rotate(360deg) scale(1.2); -moz-transform: rotate(360deg) scale(1.2); -o-transform: rotate(360deg) scale(1.2); -ms-transform: rotate(360deg) scale(1.2); } /*效果四：上下左右移動 修改translate(x軸,y軸)*/ .img4 { transition: All 0.4s ease-in-out; -webkit-transition: All 0.4s ease-in-out; -moz-transition: All 0.4s ease-in-out; -o-transition: All 0.4s ease-in-out; } .img4:hover { transform: translate(0, -10px); -webkit-transform: translate(0, -10px); -moz-transform: translate(0, -10px); -o-transform: translate(0, -10px); -ms-transform: translate(0, -10px); } </style> </head> <body> <div class="img1">360°旋轉 </div> <div class="img2">放大</div> <div class="img3">旋轉放大</div> <div class="img4">上下左右移動 </div> </body> </html>