[科技]基于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>