一款利用css3的鼠标经过动画显示详情特效的实例教程

ttx9n

这篇文章主要为大家介绍了一款利用css3的鼠标经过动画显示详情特效的实例教程，这款实例鼠标经过的时候基于中间动画放大，效果非常不错，下面我们一起来看看

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

　　实现的代码。

　　html代码：

XML/HTML Code复制内容到剪贴板

1. <ul class="blocks">  
2.        <li>Vakmanschap en ambacht<div class="popup">  
3.            <span>  
4.                <h3>  
5.                    Vakmanschap en ambacht</h3>  
6.                Ervaring is niet te koop, het is een kwestie van veel doen. Met aandacht en passie.   
7.                Dat staat bij ons centraal.</span></div>  
8.        </li>  
9.        <li>Begeleiding op het werk<div class="popup">  
10.            <span>  
11.                <h3>  
12.                    Begeleiding op het werk</h3>  
13.                Scholing of diploma’s vormen de basis voor onze collega’s. Het bewijs wordt echter   
14.                geleverd in de praktijk. Vandaar dat wij onze mensen ook begeleiden tijdens hun   
15.                werkzaamheden. Zo houden we elkaar scherp en maken we optimaal gebruik van onze   
16.                kennis, ervaring en talenten.</span></div>  
17.        </li>  
18.        <li>Leren van elkaar<div class="popup">  
19.            <span>  
20.                <h3>  
21.                    Leren van elkaar</h3>  
22.                Kennis en ervaring delen en vermenigvuldigen houdt ons scherp en slim. Mensen vinden   
23.                het leuk om ‘weetjes’ te delen, wij stimuleren onze mensen dit te doen, je bent   
24.                immers nooit te ervaren om te leren.</span></div>  
25.        </li>  
26.        <li>Vaste ploeg<div class="popup">  
27.            <span>  
28.                <h3>  
29.                    Vaste ploeg</h3>  
30.                Op elk object werken we met vaste collega’s en ploegen. Ze kennen het pand, de omgeving   
31.                en de mensen, en kunnen daardoor ‘onzichtbaar’ hun werk doen. Bovendien geeft het   
32.                uw mensen een vertrouwd gevoel dat er een bekende aan het werk is, die ze ook met   
33.                een incidenteel verzoek kunnen benaderen.</span></div>  
34.        </li>  
35.        <li>RI<div class="popup">  
36.            <span>  
37.                <h3>  
38.                    RI</h3>  
39.                Welzijn, vitaliteit en veiligheid van onze en uw mensen staan centraal. Bij aanvang   
40.                van ieder nieuw project voeren we samen met onze opdrachtgever een RI&E uit. Daarmee   
41.                brengen we alle risico’s in kaart, opdat we ons werk veilig en goed kunnen doen.   
42.                Desgewenst brengen wij advies uit over verbeterpunten, zodat er volgens de regels   
43.                gewerkt kan worden.</span></div>  
44.        </li>  
45.        <li>Direct contact<div class="popup">  
46.            <span>  
47.                <h3>  
48.                    Direct contact</h3>  
49.                Glas&Rein is een platte organisatie met korte lijnen. Zowel met onze opdrachtgevers   
50.                als met onze mensen op locatie. We zijn erop ingesteld om snel in te kunnen spelen   
51.                op wijzigende omstandigheden en aanvragen. Ons belang is en blijft iedereen tevreden   
52.                en actief te houden.</span></div>  
53.        </li>  
54.    </ul>  

　　css3代码：

CSS Code复制内容到剪贴板

1. html   
2.         {   
3.             font-family: 'Noto Sans' , serif;   
4.         }   
5.            
6.         .blocks   
7.         {   
8.             margin: auto;   
9.             max-width: 1070px;   
10.             padding: 0;   
11.         }   
12.            
13.         .blocks li   
14.         {   
15.             color: #fff;   
16.             background-color: #2196F3;   
17.             cursor: default;   
18.             float: left;   
19.             list-style: none;   
20.             margin: 1%;   
21.             padding: 60px 0;   
22.             position: relative;   
23.             text-align: center;   
24.             -webkit-transition: .3s cubic-bezier(.3,0,0,1.3);   
25.             transition: .3s cubic-bezier(.3,0,0,1.3);   
26.             width: 31%;   
27.             border-radius: 4px;   
28.             font-weight: bold;   
29.         }   
30.            
31.         .blocks li:hover   
32.         {   
33.             -webkit-transform: scale(.7);   
34.             -ms-transform: scale(.7);   
35.             transform: scale(.7);   
36.             z-index: 3000;   
37.         }   
38.            
39.         .popup   
40.         {   
41.             background-color: inherit;   
42.             color: #fff;   
43.             height: 100%;   
44.             width: 100%;   
45.             left: 0;   
46.             opacity: 0;   
47.             position: absolute;   
48.             top: 0;   
49.             padding: 15px;   
50.             border-radius: 4px;   
51.             -webkit-transition: .3s cubic-bezier(.3,0,0,1.37);   
52.             transition: .3s cubic-bezier(.3,0,0,1.37);   
53.         }   
54.            
55.         .popup span   
56.         {   
57.             font-size: 12px;   
58.             font-weight: normal;   
59.             left: 0;   
60.             padding: 15px 25px;   
61.             position: absolute;   
62.             top: 50%;   
63.             -webkit-transform: translateY(-50%);   
64.             -ms-transform: translateY(-50%);   
65.             transform: translateY(-50%);   
66.         }   
67.            
68.         .popup h3   
69.         {   
70.             font-size: 13px;   
71.             margin: 0 0 5px;   
72.             padding: 0;   
73.         }   
74.            
75.         .blocks li:hover .popup   
76.         {   
77.             opacity: 1;   
78.             -webkit-transform: scale(2);   
79.             -ms-transform: scale(2);   
80.             transform: scale(2);   
81.             box-shadow: 0 0 10px 2px rgba(0,0,0,.4);   
82.         }  

bp5jgbcnt

还可以不错

bp5jgbcnt

有什么好的服务器

kwzc65wdj

哟哟哟哟哟以偶

wqpa63gz

收下来看看怎么样

wqpa63gz

iiguuubhuiuihu

i1efp6c

你们谁看了弄洒了可能

wxrf98xr

好东西可以可以可以可以

e5plu

源码源码源码源码源码源码源码源码源码源码源码源码源码

回复用户5

你们谁看了弄洒了可能