之前为大家分享过一款基于jquery的手风琴显示详情，今天给大家分享基于css3的鼠标经过动画显示详情特效。这款实例鼠标经过的时候基于中间动画放大，效果非常不错，效果图如下：
实现的代码。
html代码：
XML/HTML Code复制内容到剪贴板 <ulclass="blocks"> <li>Vakmanschapenambacht<divclass="popup"> <span> <h3> Vakmanschapenambacht</h3> Ervaringisniettekoop,hetiseenkwestievanveeldoen.Metaandachtenpassie. Datstaatbijonscentraal.</span></div> </li> <li>Begeleidingophetwerk<divclass="popup"> <span> <h3> Begeleidingophetwerk</h3> Scholingofdiploma’svormendebasisvooronzecollega’s.Hetbewijswordtechter geleverdindepraktijk.Vandaardatwijonzemensenookbegeleidentijdenshun werkzaamheden.Zohoudenweelkaarscherpenmakenweoptimaalgebruikvanonze kennis,ervaringentalenten.</span></div> </li> <li>Lerenvanelkaar<divclass="popup"> <span> <h3> Lerenvanelkaar</h3> Kennisenervaringdelenenvermenigvuldigenhoudtonsscherpenslim.Mensenvinden hetleukom‘weetjes’tedelen,wijstimulerenonzemensendittedoen,jebent immersnooitteervarenomteleren.</span></div> </li> <li>Vasteploeg<divclass="popup"> <span> <h3> Vasteploeg</h3> Opelkobjectwerkenwemetvastecollega’senploegen.Zekennenhetpand,deomgeving endemensen,enkunnendaardoor‘onzichtbaar’hunwerkdoen.Bovendiengeefthet uwmenseneenvertrouwdgevoeldatereenbekendeaanhetwerkis,diezeookmet eenincidenteelverzoekkunnenbenaderen.</span></div> </li> <li>RI<divclass="popup"> <span> <h3> RI</h3> Welzijn,vitaliteitenveiligheidvanonzeenuwmensenstaancentraal.Bijaanvang vaniedernieuwprojectvoerenwesamenmetonzeopdrachtgevereenRI&Euit.Daarmee brengenweallerisico’sinkaart,opdatweonswerkveiligengoedkunnendoen. Desgewenstbrengenwijadviesuitoververbeterpunten,zodatervolgensderegels gewerktkanworden.</span></div> </li> <li>Directcontact<divclass="popup"> <span> <h3> Directcontact</h3> Glas&Reiniseenplatteorganisatiemetkortelijnen.Zowelmetonzeopdrachtgevers alsmetonzemensenoplocatie.Wezijneropingesteldomsnelintekunnenspelen opwijzigendeomstandighedenenaanvragen.Onsbelangisenblijftiedereentevreden enactieftehouden.</span></div> </li> </ul>
css3代码：
CSS Code复制内容到剪贴板 html { font-family:'NotoSans',serif; } .blocks { margin:auto; max-width:1070px; padding:0; } .blocksli { color:#fff; background-color:#2196F3; cursor:default; float:left; list-style:none; margin:1%; padding:60px0; position:relative; text-align:center; -webkit-transition:.3scubic-bezier(.3,0,0,1.3); transition:.3scubic-bezier(.3,0,0,1.3); width:31%; border-radius:4px; font-weight:bold; } .blocksli:hover { -webkit-transform:scale(.7); -ms-transform:scale(.7); transform:scale(.7); z-index:3000; } .popup { background-color:inherit; color:#fff; height:100%; width:100%; left:0; opacity:0; position:absolute; top:0; padding:15px; border-radius:4px; -webkit-transition:.3scubic-bezier(.3,0,0,1.37); transition:.3scubic-bezier(.3,0,0,1.37); } .popupspan { font-size:12px; font-weight:normal; left:0; padding:15px25px; position:absolute; top:50%; -webkit-transform:translateY(-50%); -ms-transform:translateY(-50%); transform:translateY(-50%); } .popuph3 { font-size:13px; margin:005px; padding:0; } .blocksli:hover.popup { opacity:1; -webkit-transform:scale(2); -ms-transform:scale(2); transform:scale(2); box-shadow:0010px2pxrgba(0,0,0,.4); }
【一款利用css3的鼠标经过动画显示详情特效的实例教程】相关文章：