一款利用css3的鼠标经过动画显示详情特效的实例教程
程序员文章站
2022-03-13 09:23:17
这篇文章主要为大家介绍了一款利用css3的鼠标经过动画显示详情特效的实例教程,这款实例鼠标经过的时候基于中间动画放大,效果非常不错,下面我们一起来看看... 14-12-29...
之前为大家分享过一款基于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>
- <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 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>
- <h3>
- vaste ploeg</h3>
- 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>
- <h3>
- ri</h3>
- 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>
- <h3>
- direct contact</h3>
- 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 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);
- }
下一篇: 一款基于css3的动画按钮代码教程
推荐阅读
-
纯css3实现鼠标经过图片显示描述的动画效果
-
css实例教程 一款纯css3实现的超炫动画背画特效
-
一款纯css3实现的鼠标经过按钮特效教程
-
一款利用css3的鼠标经过动画显示详情特效的实例教程
-
30款css3实现的鼠标经过图片显示描述特效_html/css_WEB-ITnose
-
30款css3实现的鼠标经过图片显示描述特效_html/css_WEB-ITnose
-
基于css3的鼠标经过动画显示详情特效_html/css_WEB-ITnose
-
基于css3的鼠标经过动画显示详情特效_html/css_WEB-ITnose
-
纯css3实现鼠标经过图片显示描述的动画效果
-
一款利用css3的鼠标经过动画显示详情特效的实例教程