很多时候，不快乐不是因为幸福的条件不完整，而是因为生活不容易。一个人只拥有此生此世是不够的，他还应当拥有着诗意的世界。
之前为大家分享过一款基于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的鼠标经过动画显示详情特效的实例好代码教程就介绍到这了。人为什么会犯下同样的错误？原因或许只有一个晚安！更多相关一款如何利用css3的鼠标经过动画显示详情特效的实例好代码教程内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！
![]("./images/paella-dish.jpg)