<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>html5鼠标悬停图片动画展示效果_js代码</title>
<meta name="Keywords" content="html5鼠标悬停图片动画展示效果" />
<meta name="description" content="html5鼠标悬停图片动画展示效果" />
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="css/fonts.css">
</head>
<body>
<!-- 代码 开始 -->
<div class="wrap" id="wrap">
<div style="float: left;padding-top: 30px;text-align: center;width: 100%;font-weight: bolder;color: #ff6600;">这是第一种风格</div>
<!-- 这个是第一种风格 Satrt-->
<main>
<ul class="ul items">
<li>
<figure class="effect-winston">
<img src="image/480_yugao.jpg" alt="轻网站公|lila">
<figcaption>
<h2>
轻网站公告
<span>
lila
</span>
</h2>
<p>
<a href="http://www.jsdaima.com/" target="_blank">
<i class="icon-demo">
</i>
</a>
<a href="http://www.jsdaima.com/" target="_blank">
<i class="icon-buy">
</i>
</a>
</p>
<a href="http://www.jsdaima.com/" target="_blank">
查看更多
</a>
</figcaption>
</figure>
</li>
<li>
<figure class="effect-winston">
<img src="image/480_0111.jpg" alt="丽拉|lila">
<figcaption>
<h2>
丽拉
<span>
lila
</span>
</h2>
<p>
<a href="http://www.jsdaima.com/" target="_blank">
<i class="icon-demo">
</i>
</a>
<a href="http://www.jsdaima.com/" target="_blank">
<i class="icon-buy">
</i>
</a>
</p>
<a href="http://www.jsdaima.com/" target="_blank">
查看更多
</a>
</figcaption>
</figure>
</li>
<li>
<figure class="effect-winston">
<img src="image/480_0110.jpg" alt="塔尔|taal">
<figcaption>
<h2>
塔尔
<span>
taal
</span>
</h2>
<p>
<a href="http://www.jsdaima.com/" target="_blank">
<i class="icon-demo">
</i>
</a>
<a href="http://www.jsdaima.com/" target="_blank">
<i class="icon-buy">
</i>
</a>
</p>
<a href="http://www.jsdaima.com/" target="_blank">
查看更多
</a>
</figcaption>
</figure>
</li>
<li>
<figure class="effect-winston">
<img src="image/480_0109.jpg" alt="格瑞斯|grace">
<figcaption>
<h2>
格瑞斯
<span>
grace
</span>
</h2>
<p>
<a href="http://www.jsdaima.com/" target="_blank">
<i class="icon-demo">
</i>
</a>
<a href="http://www.jsdaima.com/" target="_blank">
<i class="icon-buy">
</i>
</a>
</p>
<a href="http://www.jsdaima.com/" target="_blank">
查看更多
</a>
</figcaption>
</figure>
</li>
<li>
<figure class="effect-winston">
<img src="image/480_0108.jpg" alt="赛唯|seawee">
<figcaption>
<h2>
赛唯
<span>
seawee
</span>
</h2>
<p>
<a href="http://www.jsdaima.com/" target="_blank">
<i class="icon-demo">
</i>
</a>
<a href="http://www.jsdaima.com/" target="_blank">
<i class="icon-buy">
</i>
</a>
</p>
<a href="http://www.jsdaima.com/" target="_blank">
查看更多
</a>
</figcaption>
</figure>
</li>
<li>
<figure class="effect-winston">
<img src="image/480_0107.jpg" alt="克里|cree">
<figcaption>
<h2>
克里
<span>
cree
</span>
</h2>
<p>
<a href="http://www.jsdaima.com/" target="_blank">
<i class="icon-demo">
</i>
</a>
<a href="http://www.jsdaima.com/" target="_blank">
<i class="icon-buy">
</i>
</a>
</p>
<a href="http://www.jsdaima.com/" target="_blank">
查看更多
</a>
</figcaption>
</figure>
</li>
<li>
<figure class="effect-winston">
<img src="image/480_0106.jpg" alt="伊丽丝|iris">
<figcaption>
<h2>
伊丽丝
<span>
iris
</span>
</h2>
<p>
<a href="http://www.jsdaima.com/" target="_blank">
<i class="icon-demo">
html5鼠标悬停图片动画展示效果
5星 · 超过95%的资源 需积分: 10 161 浏览量
2015-09-10
14:18:13
上传
评论
收藏 1.19MB ZIP 举报 
html5鼠标悬停图片动画展示效果.zip （27个子文件） 
html5鼠标悬停图片动画展示效果 css 
Xyyv.eot 6KB app.css 6KB
triangle.svg 383B fonts.css 2KB Xyyv.ttf 6KB Xyyv.svg 18KB Xyyv.woff 6KB index.css 6KB image 
480_taste.jpg 75KB 480_wonder_world.jpg 86KB 480_maple_leaf.jpg 63KB 480_0107.jpg 75KB 480_guess.jpg 96KB 480_0110.jpg 87KB 480_wedding_blessing.jpg 81KB 480_yugao.jpg 99KB 480_0109.jpg 67KB 480_soft_days.jpg 53KB 480_dreamer.jpg 95KB 480_0105.jpg 73KB 480_0104.jpg 67KB 480_0106.jpg 94KB 480_misical_diary.jpg 103KB 480_0108.jpg 75KB 480_My_Own_Secret.jpg 78KB 480_0111.jpg 80KB
index.html 18KB资源评论
benpaodesikuaiwu2018-07-19效果还可以 学习了
