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

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

WBOY
Freigeben: 2016-06-24 11:26:34
Original
975 Leute haben es durchsucht

分享一款基于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>
Nach dem Login kopieren

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

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage