JS過渡和變形效果演示(舉例:鼠標滑過圖片放大) --JS案例


1、代碼:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS過渡和變形效果演示</title>
  <style type="text/css">
    *{
      margin: 0;
      padding: 0;
    }
    .container{
      width: 158px;
      height: 183px;
      margin: 0 auto;
      border:1px solid #fad282;
      overflow: hidden;
    }
    .container img{
      transition: all 1.2s ease;
    }
    .container img:hover{
      transform: scale(1.2);
    }
  </style>
</head>
<body>
  <div class="container">
    <img src="html5.png" alt="html5.png">
  </div>
</body>
</html>

2、演示:http://www.nxl123.cn/bokeyuan/2018080201/

(滑過前)

(滑過時,圖片放大)


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM