JS过渡和变形效果演示(举例:鼠标滑过图片放大) --JS案例

时间:2021-05-28 21:31:27

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/

(滑过前)

JS过渡和变形效果演示(举例:鼠标滑过图片放大) --JS案例

(滑过时,图片放大)

JS过渡和变形效果演示(举例:鼠标滑过图片放大) --JS案例