1款运用css3的电脑鼠标历经动漫显示信息详细信息

2021-01-20 07:54 jianzhan

  以前为大伙儿共享过1款根据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.             marginauto;   
  9.             max-width1070px;   
  10.             padding: 0;   
  11.         }   
  12.            
  13.         .blocks li   
  14.         {   
  15.             color#fff;   
  16.             background-color#2196F3;   
  17.             cursordefault;   
  18.             floatleft;   
  19.             list-stylenone;   
  20.             margin: 1%;   
  21.             padding60px 0;   
  22.             positionrelative;   
  23.             text-aligncenter;   
  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-weightbold;   
  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.             positionabsolute;   
  48.             top: 0;   
  49.             padding15px;   
  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-size12px;   
  58.             font-weightnormal;   
  59.             left: 0;   
  60.             padding15px 25px;   
  61.             positionabsolute;   
  62.             top: 50%;   
  63.             -webkit-transform: translateY(⑸0%);   
  64.             -ms-transform: translateY(⑸0%);   
  65.             transform: translateY(⑸0%);   
  66.         }   
  67.            
  68.         .popup h3   
  69.         {   
  70.             font-size13px;   
  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.         }