首页 网页制作网络编程脚本专栏数据库网站运营网络安全平面设计CMS教程

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

所属分类： 网页制作 / CSS 阅读数： 1343
收藏 0 赞 0 分享

　　之前为大家分享过一款基于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.         }  
更多精彩内容其他人还在看

CSS样式分离之再分离达到精简与重用

无论是CSS的分离还是js的分离，其主要作用之一就是精简与重用,CSS本身就代表着精简与重用,CSS样式分离，我一般指的是“以单独的CSS文件将CSS样式分离出来”，此处的重用多针对不同页面的重用，就是说，一个样式文件，可以多个页面使用，这对于一些公共样式的重构是很有
收藏 0 赞 0 分享

CSS属性behavior的语法使用说明

在进行CSS网页布局的时候，我们经遇到刷新要保留表单里内容的时候，习惯的做法使用cookie，但是那样做实在是很麻烦，css中的behavior就为我们很好的解决了这个问题。今天jb51.net就向大家介绍CSS属性behavior的语法
收藏 0 赞 0 分享

网页制作中的水平居中和垂直居中解决方法集合

　在定义网页的CSS样式的时候，我们或许并不怎么用到垂直居中。
收藏 0 赞 0 分享

最常见IE的Bug及其fix修复方法

Internet Explorer – Web程序员的毒药。在IE上开发时间中有超过60%的时间是花在和IE的bug进行搏斗，让你的开发生产率严重下降。下面是一个教程，告诉你9个IE上最常见的BUG以及如何解决它们。
收藏 0 赞 0 分享

CSS常用浏览器兼容调整小结

用CSS+DIV来写网站代码的好处显而易见，这里不多说了，但由于不同浏览器对CSS的解释不统一，造成不同浏览器下页面错位的现象十分常见……
收藏 0 赞 0 分享

css firefox火狐浏览器下的兼容性问题

css firefox火狐浏览器下的兼容性问题
收藏 0 赞 0 分享

DIV+CSS 浏览器兼容性小结

在网站设计的时候，应该注意css样式兼容不同浏览器问题，特别是对完全使用DIV CSS设计的网，就应该更注意IE6 IE7 FF对CSS样式的兼容，不然，你的网乱可能出去不想出现的效果！
收藏 0 赞 0 分享

div+css 布局常识 8问

CSSer与其他IT职位一样，在找工作的时候，都会面临着面试官提出的问题，或者给出的试卷。今天jb51.net收集了常见的8条面试题目，希望对您有所帮助。
收藏 0 赞 0 分享

CSS用四种方式实现布局

CSS用四种方式实现布局
收藏 0 赞 0 分享

css 解决表格边框不显示的问题

在 IE6 中，当表格单元格中的数据为空时，边框是不显示的，在IE8中是会显示的，怎样解决这个不兼容的问题呢。
收藏 0 赞 0 分享
查看更多

网络赚钱

更多

站长故事

更多
建站极客
合作伙伴
在线工具
建站极客移动版
聚合全网技术文章，根据你的阅读喜好进行个性推荐
© 2012 - 2020 zhanzhang360.cn Some Rights Reserved.
沪ICP备13040166号-22