[科技]基于html5鼠標懸停圖片動畫展示效果
分享一款基于html5鼠標懸停圖片動畫展示效果。里面包含兩款不同效果的html5圖片展示效果。效果圖如下：
實現的代碼。
html代碼：
<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 target="_blank">
<i class="icon-demo">
</i>
</a>
<a target="_blank">
<i class="icon-buy">
</i>
</a>
</p>
<a 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 target="_blank">
<i class="icon-demo">
</i>
</a>
<a target="_blank">
<i class="icon-buy">
</i>
</a>
</p>
<a 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 target="_blank">
<i class="icon-demo">
</i>
</a>
<a target="_blank">
<i class="icon-buy">
</i>
</a>
</p>
<a 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 target="_blank">
<i class="icon-demo">
</i>
</a>
<a target="_blank">
<i class="icon-buy">
</i>
</a>
</p>
<a 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 target="_blank">
<i class="icon-demo">
</i>
</a>
<a target="_blank">
<i class="icon-buy">
</i>
</a>
</p>
<a 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 target="_blank">
<i class="icon-demo">
</i>
</a>
<a target="_blank">
<i class="icon-buy">
</i>
</a>
</p>
<a 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 target="_blank">
<i class="icon-demo">
</i>
</a>
<a target="_blank">
<i class="icon-buy">
</i>
</a>
</p>
<a target="_blank">
查看更多
</a>
</figcaption>
</figure>
</li>
<li>
<figure class="effect-winston">
<img src="image/480_0105.jpg" alt="瑪雅|maaya">
<figcaption>
<h2>
瑪雅
<span>
maaya
</span>
</h2>
<p>
<a target="_blank">
<i class="icon-demo">
</i>
</a>
<a target="_blank">
<i class="icon-buy">
</i>
</a>
</p>
<a target="_blank">
查看更多
</a>
</figcaption>
</figure>
</li>
<li>
<figure class="effect-winston">
<img src="image/480_0104.jpg" alt="卡那|Carnac">
<figcaption>
<h2>
卡那
<span>
Carnac
</span>
</h2>
<p>
<a target="_blank">
<i class="icon-demo">
</i>
</a>
<a target="_blank">
<i class="icon-buy">
</i>
</a>
</p>
<a target="_blank">
查看更多
</a>
</figcaption>
</figure>
</li>
</ul>
</main>
<!-- 這個是第一種風格 End-->
<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-jazz">
<img src="image/480_soft_days.jpg" alt="云上的日子|soft days">
<figcaption>
<h2>
云上的日子
<br>
<span>
soft days
</span>
</h2>
<p>
單頁
</p>
<a target="_blank">
查看更多
</a>
</figcaption>
</figure>
</li>
<li>
<figure class="effect-jazz">
<img src="image/480_wedding_blessing.jpg" alt="婚禮的祝福|wedding blessing">
<figcaption>
<h2>
婚禮的祝福
<br>
<span>
wedding blessing
</span>
</h2>
<p>
喜帖
</p>
<a target="_blank">
查看更多
</a>
</figcaption>
</figure>
</li>
<li>
<figure class="effect-jazz">
<img src="image/480_taste.jpg" alt="美食藝術家|taste">
<figcaption>
<h2>
美食藝術家
<br>
<span>
taste
</span>
</h2>
<p>
餐廳
</p>
<a target="_blank">
查看更多
</a>
</figcaption>
</figure>
</li>
<li>
<figure class="effect-jazz">
<img src="image/480_dreamer.jpg" alt="夢想家|dreamer">
<figcaption>
<h2>
夢想家
<br>
<span>
dreamer
</span>
</h2>
<p>
商城
</p>
<a target="_blank">
查看更多
</a>
</figcaption>
</figure>
</li>
<li>
<figure class="effect-jazz">
<img src="image/480_maple_leaf.jpg" alt="楓葉街|maple leaf">
<figcaption>
<h2>
楓葉街
<br>
<span>
maple leaf
</span>
</h2>
<p>
商城
</p>
<a target="_blank">
查看更多
</a>
</figcaption>
</figure>
</li>
<li>
<figure class="effect-jazz">
<img src="image/480_My_Own_Secret.jpg" alt="秘密|My Own Secret">
<figcaption>
<h2>
秘密
<br>
<span>
My Own Secret
</span>
</h2>
<p>
店鋪
</p>
<a target="_blank">
查看更多
</a>
</figcaption>
</figure>
</li>
<li>
<figure class="effect-jazz">
<img src="image/480_wonder_world.jpg" alt="奇世界|wonder world">
<figcaption>
<h2>
奇世界
<br>
<span>
wonder world
</span>
</h2>
<p>
企業
</p>
<a target="_blank">
查看更多
</a>
</figcaption>
</figure>
</li>
<li>
<figure class="effect-jazz">
<img src="image/480_misical_diary.jpg" alt="音樂日記|misical diary">
<figcaption>
<h2>
音樂日記
<br>
<span>
misical diary
</span>
</h2>
<p>
音樂
</p>
<a target="_blank">
查看更多
</a>
</figcaption>
</figure>
</li>
<li>
<figure class="effect-jazz">
<img src="image/480_guess.jpg" alt="猜想|guess">
<figcaption>
<h2>
猜想
<br>
<span>
guess
</span>
</h2>
<p>
博客
</p>
<a target="_blank">
查看更多
</a>
</figcaption>
</figure>
</li>
</ul>
</main>
</div>