这是一款通过js和CSS3来制作的鼠标滑过图片随机切换展示效果。该特效中，当用户使用鼠标滑过图片时，会以切换扑克牌的方式展开图片，随机显示三幅图片，效果非常炫酷。

使用方法

在页面中引入样式文件style.css和main.js文件。

<link rel="stylesheet" href="css/style.css">
<script src="js/main.js"></script>
                

HTML结构

该图片随机切换展示效果有三种图片切换方式，它们的HTML结构分别如下：

<div class="thumb kort">
  <img src="images/1.jpg" width="200" height="200">
  <img src="images/2.jpg" width="200" height="200">
  <img src="images/3.jpg" width="200" height="200">
  <img src="images/4.jpg" width="200" height="200">
  <img src="images/5.jpg" width="200" height="200">
  <img src="images/6.jpg" width="200" height="200">
  <img src="images/7.jpg" width="200" height="200">
  <img src="images/8.jpg" width="200" height="200">
  <img src="images/9.jpg" width="200" height="200">
</div>

<h2>Concave</h2>
<div class="thumb kort concave">
  <img src="images/1.jpg" width="200" height="200">
  <img src="images/2.jpg" width="200" height="200">
  <img src="images/3.jpg" width="200" height="200">
  <img src="images/4.jpg" width="200" height="200">
  <img src="images/5.jpg" width="200" height="200">
  <img src="images/6.jpg" width="200" height="200">
  <img src="images/7.jpg" width="200" height="200">
  <img src="images/8.jpg" width="200" height="200">
  <img src="images/9.jpg" width="200" height="200">
</div>

<h2>Stack</h2>
<div class="thumb kort stack">
  <img src="images/1.jpg" width="200" height="200">
  <img src="images/2.jpg" width="200" height="200">
  <img src="images/3.jpg" width="200" height="200">
  <img src="images/4.jpg" width="200" height="200">
  <img src="images/5.jpg" width="200" height="200">
  <img src="images/6.jpg" width="200" height="200">
  <img src="images/7.jpg" width="200" height="200">
  <img src="images/8.jpg" width="200" height="200">
  <img src="images/9.jpg" width="200" height="200">
</div>
                

在线预览    源码下载