<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>8种炫酷CSS3鼠标滑过图片标题动画特效</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">
<link rel="stylesheet" type="text/css" href="css/grids-min.css">
<link rel="stylesheet" type="text/css" href="css/imghover.css">
<!--[if IE]>
<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
<div class="htmleaf-container">
<header class="htmleaf-header">
<h1>8种炫酷CSS3鼠标滑过图片标题动画特效 <span>Image Hover Effects</span></h1>
<div class="htmleaf-links">
<a class="htmleaf-icon icon-htmleaf-home-outline" href="http://www.jb51.net/" title="脚本之家" target="_blank"><span> 脚本之家</span></a>
<a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="http://www.jb51.net/" title="返回下载页" target="_blank"><span> 返回下载页</span></a>
</div>
</header>
<div class="examples">
<div class="wrapper">
<div class="effects pure-g">
<div class="demo pure-u-1 pure-u-sm-1-2 pure-u-md-1-3 pure-u-lg-1-4">
<figure class="imghvr-book-open-horiz">
<img alt="example-image" src="img/1.jpg">
<figcaption>
<h3>Hello World</h3>
<p>Life is too important to be taken seriously!</p>
</figcaption>
<a href="javascript:;"></a>
</figure>
</div>
<div class="demo pure-u-1 pure-u-sm-1-2 pure-u-md-1-3 pure-u-lg-1-4">
<figure class="imghvr-strip-shutter-right">
<img alt="example-image" src="img/2.jpg">
<figcaption>
<h3>Hello World</h3>
<p>Life is too important to be taken seriously!</p>
</figcaption>
<a href="javascript:;"></a>
</figure>
</div>
<div class="demo pure-u-1 pure-u-sm-1-2 pure-u-md-1-3 pure-u-lg-1-4">
<figure class="imghvr-throw-in-left">
<img alt="example-image" src="img/3.jpg">
<figcaption>
<h3>Hello World</h3>
<p>Life is too important to be taken seriously!</p>
</figcaption>
<a href="javascript:;"></a>
</figure>
</div>
<div class="demo pure-u-1 pure-u-sm-1-2 pure-u-md-1-3 pure-u-lg-1-4">
<figure class="imghvr-blocks-zoom-top-left">
<img alt="example-image" src="img/4.jpg">
<figcaption>
<h3>Hello World</h3>
<p>Life is too important to be taken seriously!</p>
</figcaption>
<a href="javascript:;"></a>
</figure>
</div>
<div class="demo pure-u-1 pure-u-sm-1-2 pure-u-md-1-3 pure-u-lg-1-4">
<figure class="imghvr-border-reveal-top-left">
<img alt="example-image" src="img/5.jpg">
<figcaption>
<h3>Hello World</h3>
<p>Life is too important to be taken seriously!</p>
</figcaption>
<a href="javascript:;"></a>
</figure>
</div>
<div class="demo pure-u-1 pure-u-sm-1-2 pure-u-md-1-3 pure-u-lg-1-4">
<figure class="imghvr-cube-left">
<img alt="example-image" src="img/6.jpg">
<figcaption>
<h3>Hello World</h3>
<p>Life is too important to be taken seriously!</p>
</figcaption>
<a href="javascript:;"></a>
</figure>
</div>
<div class="demo pure-u-1 pure-u-sm-1-2 pure-u-md-1-3 pure-u-lg-1-4">
<figure class="imghvr-blocks-rotate-in-left">
<img alt="example-image" src="img/7.jpg">
<figcaption>
<h3>Hello World</h3>
<p>Life is too important to be taken seriously!</p>
</figcaption>
<a href="javascript:;"></a>
</figure>
</div>
<div class="demo pure-u-1 pure-u-sm-1-2 pure-u-md-1-3 pure-u-lg-1-4">
<figure class="imghvr-dive-cc">
<img alt="example-image" src="img/8.jpg">
<figcaption>
<h3>Hello World</h3>
<p>Life is too important to be taken seriously!</p>
</figcaption>
<a href="javascript:;"></a>
</figure>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS3鼠标滑过图片标题遮罩动画特效源码 8种.zip
版权申诉
45 浏览量
2022-11-02
23:37:48
上传
评论
收藏 193KB ZIP 举报
CSS3鼠标滑过图片标题遮罩动画特效源码 8种.zip （19个子文件） 
132689838140807542 CSS3_sbhgbt css 
htmleaf-demo.css 6KB grids-min.css 26KB imghover.css 80KB normalize.css 2KB related 
2.jpg 36KB 1.jpg 24KB img 8.jpg 13KB 2.jpg 15KB 1.jpg 28KB 6.jpg 8KB 3.jpg 16KB 5.jpg 12KB 4.jpg 14KB 7.jpg 10KB fonts icomoon.woff 1KB
icomoon.svg 2KB icomoon.eot 2KB icomoon.ttf 1KB
index.html 4KB资源评论
易小侠
- 粉丝: 6453
- 资源: 9万+
