图片闪烁过渡特效

所属分类:其他,媒体-动画效果,幻灯片和轮播图

 38869  462  查看评论 (4)
分享到微信朋友圈
X
图片闪烁过渡特效 ie兼容12

该插件不支持IE
首先插入样式表,可根据自己需求调整样式

<link rel="stylesheet" type="text/css" href="css/base.css"/> 
<link rel="stylesheet" type="text/css" href="css/glitch-slideshow.css"/>

在页面代码底部插入所需JS

<script src="js/imagesloaded.pkgd.min.js"></script> 
<script src="js/demo.js"></script> 
<script src="js/demo2.js"></script>

在这里放置需要过渡的图片

<div class="slide slide--current">
    <div class="slide__img glitch" style="background-image: url(img/f2.jpg);"></div>
</div>
<div class="slide">
    <div class="slide__img glitch" style="background-image: url(img/f3.jpg);"></div>
</div>
<div class="slide">
    <div class="slide__img glitch" style="background-image: url(img/f1.jpg);"></div>
</div>
<div class="slide">
    <div class="slide__img glitch" style="background-image: url(img/f4.jpg);"></div>
</div>

而demo2中放置图片的位置是

<div class="slide__img glitch" style="background-image: url(img/2.jpg);"></div>
相关插件-动画效果,幻灯片和轮播图

jquery实现烟花特效

基于jquery 实现放烟花特效。使用简单,仅仅需要一个div,可以自由配置(感谢“腰长腿却短
  动画效果
 54263  405

蝴蝶3D效果

HTML5制作逼真蝴蝶天空飞舞动画特效
  动画效果
 51445  853

CSS3提交按钮动画特效

这个提交按钮效果有两组动画:当屏幕大于800px的时候是一个动画效果,当屏幕小于800像素的时候是另一种动画效果。缩放你的浏览器看看不同的提交按钮动画效果吧!
  动画效果
 44619  428

纯JS数字滚动效果(原创)

纯JS数字滚动效果,兼容IE9+、但不兼容水晶字体,需要谷歌浏览器支持
  动画效果
 39395  300

讨论这个项目(4)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    木寸 0
    2020/1/31 17:10:56
    oops ;) 0
    2019/1/3 10:05:49
    涛声依旧 0
    2018/9/1 17:22:58
    666 666 6666 66
        扣扣啊0
        2018/11/13 21:21:03
        66666666666666666666666666
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复