一款利用css3的鼠标经过动画显示详情特效的实例教程

2020-05-07 06:05:10易采站长站整理

  之前为大家分享过一款基于jquery的手风琴显示详情,今天给大家分享基于css3的鼠标经过动画显示详情特效。这款实例鼠标经过的时候基于中间动画放大,效果非常不错,效果图如下:

  实现的代码。

  html代码:

XML/HTML Code复制内容到剪贴板

<ul class="blocks">  
       <li>Vakmanschap en ambacht<div class="popup">  
           <span>  
               <h3>  
                   Vakmanschap en ambacht</h3>  
               Ervaring is niet te koop, het is een kwestie van veel doen. Met aandacht en passie.   
               Dat staat bij ons centraal.</span></div>  
       </li>  
       <li>Begeleiding op het werk<div class="popup">  
           <span>  
               <h3>  
                   Begeleiding op het werk</h3>  
               Scholing of diploma’s vormen de basis voor onze collega’s. Het bewijs wordt echter   
               geleverd in de praktijk. Vandaar dat wij onze mensen ook begeleiden tijdens hun   
               werkzaamheden. Zo houden we elkaar scherp en maken we optimaal gebruik van onze   
               kennis, ervaring en talenten.</span></div>  
       </li>