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/

(滑过前)

(滑过时,图片放大)

posted @ 2018-08-02 15:35  牛新龙的IT技术博客  阅读(1504)  评论(0编辑  收藏  举报