Home > Web Front-end > HTML Tutorial > 基于css3 transition图文动画显示特效_html/css_WEB-ITnose

基于css3 transition图文动画显示特效_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:26:34
Original
971 people have browsed it

分享一款基于css3 transition图文动画显示特效。这是一款鼠标悬停在图片上动画显示文字描述CSS3特效。效果图如下:

在线预览    源码下载

实现的代码。

html代码:

<div class="box">           <div class="he_border1">               <img class="he_border1_img" src="images/pro_1.jpg" alt="Image 01">               <div class="he_border1_caption">                   <h3 class="he_border1_caption_h">爱编程w2bc.com</h3>                   <p class="he_border1_caption_p">WEB前端应用教程+演示+源码</p>                   <a class="he_border1_caption_a" href="http://www.w2bc.com/"></a>               </div>           </div>       </div>        <div class="box">           <div class="he_border2">               <img class="he_border2_img" src="images/pro_2.jpg" alt="Image 01">               <div class="he_border2_caption">                   <h3 class="he_border2_caption_h">爱编程</h3>                   <p class="he_border2_caption_p">WEB前端应用教程+演示+源码</p>                   <a class="he_border2_caption_a" href="http://www.w2bc.com/"></a>               </div>           </div>       </div>        <div class="box">           <div class="he_3DFlipX">               <div class="he_3DFlipX_inner">                   <div class="he_3DFlipX_img">                       <img src="images/pro_3.jpg" alt="img01">                   </div>                   <div class="he_3DFlipX_caption">                       <h3>爱编程</h3>                       <p>WEB前端应用教程+演示+源码</p>                   </div>                   <a href="http://www.w2bc.com/"></a>               </div>           </div>       </div>
Copy after login

via:http://www.w2bc.com/article/2015-12-27-css3%20transition-hover

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template