Izmir – 鼠标悬停图片CSS3动画特效库

创客云


Izmir是一款css3鼠标悬停图片动画特效库插件。Izmir提供了20种边框动画、9种图片动画、12种文字动画,一级遮罩层动画,动画延迟等等。你可以通过它们组合出1000+种不同的动画特效。
使用方法
在页面中引入下面的文件。

  1. <link rel="stylesheet" href="css/izmir.min.css">

HTML结构

  1. <figure class="c4-izmir">
  2.   <img src="demo.jpg" alt="Sample Image">
  3.   <figcaption>
  4.       <h3>
  5.         Some sample text
  6.       </h3>
  7.     </div>
  8. </figure>

边框动画

  1. <figure class="c4-izmir c4-border-vert">
  2.   <img src="demo.jpg" alt="Sample Image">
  3.   <figcaption>
  4.     // Caption text
  5.   </figcaption>
  6. </figure>


图片动画

  1. <figure class="c4-izmir c4-image-zoom-in">
  2.   <img src="demo.jpg" alt="Sample Image">
  3.   <figcaption>
  4.     // Caption text
  5.   </figcaption>
  6. </figure>


文字动画

  1. <figure class="c4-izmir">
  2.   <img src="demo.jpg" alt="Sample Image">
  3.   <figcaption>
  4.     <div class="c4-reveal-up">
  5.       <h3>
  6.         Sample Text
  7.       </h3>
  8.     </div>
  9.     <div class="c4-reveal-up">
  10.       <p>
  11.         Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio.
  12.       </p>
  13.     </div>
  14.   </figcaption>
  15. </figure>


遮罩层动画

  1. <figure class="c4-izmir c4-gradient-top-left">
  2.   <img src="demo.jpg" alt="Sample Image">
  3.   <figcaption>
  4.     // Caption text
  5.   </figcaption>
  6. </figure>

Github网址:https://github.com/ciar4n/Izmir

演示地址 免费下载
本文由 CityMall 整理发布如需转载,请注明出处:https://www.22vd.com/54430.html
云模板

发表评论