基于css3的鼠标经过动画显示详情特效

鼠标经过动画显示详情特效"/>

基于css3的鼠标经过动画显示详情特效

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

在线预览   源码下载

实现的代码。

html代码：

 <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 echtergeleverd in de praktijk. Vandaar dat wij onze mensen ook begeleiden tijdens hunwerkzaamheden. Zo houden we elkaar scherp en maken we optimaal gebruik van onzekennis, ervaring en talenten.</span></div></li><li>Leren van elkaar<div class="popup"><span><h3>Leren van elkaar</h3>Kennis en ervaring delen en vermenigvuldigen houdt ons scherp en slim. Mensen vindenhet leuk om ‘weetjes’ te delen, wij stimuleren onze mensen dit te doen, je bentimmers nooit te ervaren om te leren.</span></div></li><li>Vaste ploeg<div class="popup"><span><h3>Vaste ploeg</h3>Op elk object werken we met vaste collega’s en ploegen. Ze kennen het pand, de omgevingen de mensen, en kunnen daardoor ‘onzichtbaar’ hun werk doen. Bovendien geeft hetuw mensen een vertrouwd gevoel dat er een bekende aan het werk is, die ze ook meteen incidenteel verzoek kunnen benaderen.</span></div></li><li>RI&E<div class="popup"><span><h3>RI&E</h3>Welzijn, vitaliteit en veiligheid van onze en uw mensen staan centraal. Bij aanvangvan ieder nieuw project voeren we samen met onze opdrachtgever een RI&E uit. Daarmeebrengen we alle risico’s in kaart, opdat we ons werk veilig en goed kunnen doen.Desgewenst brengen wij advies uit over verbeterpunten, zodat er volgens de regelsgewerkt kan worden.</span></div></li><li>Direct contact<div class="popup"><span><h3>Direct contact</h3>Glas&Rein is een platte organisatie met korte lijnen. Zowel met onze opdrachtgeversals met onze mensen op locatie. We zijn erop ingesteld om snel in te kunnen spelenop wijzigende omstandigheden en aanvragen. Ons belang is en blijft iedereen tevredenen actief te houden.</span></div></li></ul>

css3代码：

html{font-family: 'Noto Sans' , serif;}.blocks{margin: auto;max-width: 1070px;padding: 0;}.blocks li{color: #fff;background-color: #2196F3;cursor: default;float: left;list-style: none;margin: 1%;padding: 60px 0;position: relative;text-align: center;-webkit-transition: .3s cubic-bezier(.3,0,0,1.3);transition: .3s cubic-bezier(.3,0,0,1.3);width: 31%;border-radius: 4px;font-weight: bold;}.blocks li: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: .3s cubic-bezier(.3,0,0,1.37);transition: .3s cubic-bezier(.3,0,0,1.37);}.popup span{font-size: 12px;font-weight: normal;left: 0;padding: 15px 25px;position: absolute;top: 50%;-webkit-transform: translateY(-50%);-ms-transform: translateY(-50%);transform: translateY(-50%);}.popup h3{font-size: 13px;margin: 0 0 5px;padding: 0;}.blocks li:hover .popup{opacity: 1;-webkit-transform: scale(2);-ms-transform: scale(2);transform: scale(2);box-shadow: 0 0 10px 2px rgba(0,0,0,.4);}

via:http://***/Article/13665

转载于:.html