js+css3鼠标滑过图片随机切换展示效果

当前位置:主页 > CSS3库 > CSS3动画 > js+css3鼠标滑过图片随机切换展示效果
js+css3鼠标滑过图片随机切换展示效果
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2017-02-07
    阅读:
麦子学院
简要教程

这是一款通过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>
                

网友评论