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

当前位置:主页 > CSS3库 > CSS3动画 > css3鼠标悬停图片动画特效库Izmir
css3鼠标悬停图片动画特效库Izmir
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2019-11-13
    阅读:
简要教程

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

使用方法

在页面中引入下面的文件。

<link rel="stylesheet" href="css/izmir.min.css">                  
                
HTML结构
<figure class="c4-izmir">
  <img src="demo.jpg" alt="Sample Image">
  <figcaption>
      <h3>
        Some sample text
      </h3>
    </div>
</figure>
                

边框动画:

<figure class="c4-izmir c4-border-vert">
  <img src="demo.jpg" alt="Sample Image">
  <figcaption>
    // Caption text
  </figcaption>
</figure>                  
                

css3鼠标悬停图片动画特效-1

图片动画:

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

css3鼠标悬停图片动画特效-2

文字动画:

<figure class="c4-izmir">
  <img src="demo.jpg" alt="Sample Image">
  <figcaption>
    <div class="c4-reveal-up">
      <h3>
        Sample Text
      </h3>
    </div>
    <div class="c4-reveal-up">
      <p>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio.
      </p>
    </div>
  </figcaption>
</figure>               
                

css3鼠标悬停图片动画特效-3

遮罩层动画:

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

css3鼠标悬停图片动画特效-4

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