图片/图形

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

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

已有 336 人购买
  • wcme
查看演示升级 VIP立刻购买

演示地址 下载地址
收藏
(1)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!