利用css3實現鼠標經過動畫顯示詳情特效
本篇內容介紹了“利用css3實現鼠標經過動畫顯示詳情特效”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！
目前成都創(chuàng)新互聯公司已為上千的企業(yè)提供了網站建設、域名、網絡空間、網站改版維護、企業(yè)網站設計、新邵網站維護等服務，公司將堅持客戶導向、應用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協力一起成長，共同發(fā)展。
之前為大家分享過一款基于jquery的手風琴顯示詳情，今天給大家分享基于css3的鼠標經過動畫顯示詳情特效。這款實例鼠標經過的時候基于中間動畫放大，效果非常不錯，效果圖如下：
實現的代碼。
html代碼：
XML/HTML Code復制內容到剪貼板
<ul class="blocks">
<li>Vakmanschap en ambacht<div class="popup">
<span>
<h4>
Vakmanschap en ambacht</h4>
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>
<h4>
Begeleiding op het werk</h4>
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>
<li>Leren van elkaar<div class="popup">
<span>
<h4>
Leren van elkaar</h4>
Kennis en ervaring delen en vermenigvuldigen houdt ons scherp en slim. Mensen vinden
het leuk om ‘weetjes’ te delen, wij stimuleren onze mensen dit te doen, je bent
immers nooit te ervaren om te leren.</span></div>
</li>
<li>Vaste ploeg<div class="popup">
<span>
<h4>
Vaste ploeg</h4>
Op elk object werken we met vaste collega’s en ploegen. Ze kennen het pand, de omgeving
en de mensen, en kunnen daardoor ‘onzichtbaar’ hun werk doen. Bovendien geeft het
uw mensen een vertrouwd gevoel dat er een bekende aan het werk is, die ze ook met
een incidenteel verzoek kunnen benaderen.</span></div>
</li>
<li>RI<div class="popup">
<span>
<h4>
RI</h4>
Welzijn, vitaliteit en veiligheid van onze en uw mensen staan centraal. Bij aanvang
van ieder nieuw project voeren we samen met onze opdrachtgever een RI&E uit. Daarmee
brengen 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 regels
gewerkt kan worden.</span></div>
</li>
<li>Direct contact<div class="popup">
<span>
<h4>
Direct contact</h4>
Glas&Rein is een platte organisatie met korte lijnen. Zowel met onze opdrachtgevers
als met onze mensen op locatie. We zijn erop ingesteld om snel in te kunnen spelen
op wijzigende omstandigheden en aanvragen. Ons belang is en blijft iedereen tevreden
en actief te houden.</span></div>
</li>
</ul>
css3代碼：
CSS Code復制內容到剪貼板
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 h4
{
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);
}
“利用css3實現鼠標經過動畫顯示詳情特效”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關的知識可以關注創(chuàng)新互聯網站，小編將為大家輸出更多高質量的實用文章！
網頁標題：利用css3實現鼠標經過動畫顯示詳情特效
本文地址：http://chinadenli.net/article34/gjogse.html
成都網站建設公司_創(chuàng)新互聯，為您提供網站營銷、網站建設、品牌網站制作、標簽優(yōu)化、企業(yè)建站、網站導航
聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯
