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


Posted in HTML / CSS onDecember 29, 2014

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

实现的代码。

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

html代码:

<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代码:

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);   
        }  

 

HTML / CSS 相关文章推荐
利用CSS的Sass预处理器(框架)来制作居中效果
Mar 10 HTML / CSS
需要知道的CSS3动画技术
Jan 01 HTML / CSS
css3进行截取替代js的substring
Sep 02 HTML / CSS
CSS实现定位元素居中的方法
Jun 23 HTML / CSS
CSS3的Flexbox布局的简明入门指南
Apr 08 HTML / CSS
CSS3 Notes: -webkit-box-reflect实现倒影的实例
Dec 08 HTML / CSS
HTML 5 标签、属性、事件及浏览器兼容性速查表 附打包下载
Oct 20 HTML / CSS
css3 transform 3d 使用css3创建动态3d立方体(html5实践)
Jan 06 HTML / CSS
HTML5 Canvas绘制五星红旗
May 04 HTML / CSS
HTML5新增属性data-*和js/jquery之间的交互及注意事项
Aug 08 HTML / CSS
Html5之title吸顶功能
Jun 04 HTML / CSS
HTML5页面打开微信小程序功能实现
Sep 23 HTML / CSS
纯css3实现照片墙效果
Dec 26 #HTML / CSS
纯css3实现走马灯效果
Dec 26 #HTML / CSS
纯CSS3实现的阴影效果
Dec 24 #HTML / CSS
使用CSS3实现圆角,阴影,透明
Dec 23 #HTML / CSS
纯css3实现的鼠标悬停动画按钮
Dec 23 #HTML / CSS
css3实现3D色子翻转特效
Dec 23 #HTML / CSS
CSS3使用border-radius属性制作圆角
Dec 22 #HTML / CSS
You might like
PHP ajax 异步执行不等待执行结果的处理方法
2015/05/27 PHP
Laravel 微信小程序后端搭建步骤详解
2019/11/26 PHP
firefox浏览器下javascript 拖动层效果与原理分析代码
2007/12/04 Javascript
jquery使用淘宝接口跨域查询手机号码归属地实例
2013/11/28 Javascript
javascript实现禁止复制网页内容
2014/12/16 Javascript
js实现文本框中输入文字页面中div层同步获取文本框内容的方法
2015/03/03 Javascript
javascript获取当前的时间戳的方法汇总
2015/07/26 Javascript
JavaScript cookie详解及简单实例应用
2016/12/31 Javascript
AngularJS 霸道的过滤器小结
2017/04/26 Javascript
详解vue组件中使用路由方法
2019/02/12 Javascript
优化Vue项目编译文件大小的方法步骤
2019/05/27 Javascript
LayUI switch 开关监听 获取属性值、更改状态的方法
2019/09/21 Javascript
Vue项目中使用jsonp抓取跨域数据的方法
2019/11/10 Javascript
vue el-table实现自定义表头
2019/12/11 Javascript
Nodejs封装类似express框架的路由实例详解
2020/01/05 NodeJs
使用preload预加载页面资源时注意事项
2020/02/03 Javascript
vue配置多代理服务接口地址操作
2020/09/08 Javascript
Python中datetime常用时间处理方法
2015/06/15 Python
Python深入06——python的内存管理详解
2016/12/07 Python
python实现发送邮件功能代码
2017/12/14 Python
python数据处理 根据颜色对图片进行分类的方法
2018/12/08 Python
pycharm配置当鼠标悬停时快速提示方法参数
2019/07/31 Python
Django关于admin的使用技巧和知识点
2020/02/10 Python
Python3 获取文件属性的方式(时间、大小等)
2020/03/12 Python
python新式类和经典类的区别实例分析
2020/03/23 Python
浅谈css3新单位vw、vh、vmin、vmax的使用详解
2017/12/01 HTML / CSS
localStorage 设置过期时间的方法实现
2018/12/21 HTML / CSS
店长岗位职责
2013/11/21 职场文书
财务部出纳岗位职责
2013/12/22 职场文书
运动会广播稿150字
2014/02/19 职场文书
社区网格化管理实施方案
2014/03/21 职场文书
大学生就业策划书范文
2014/04/04 职场文书
教师党的群众路线教育实践活动学习笔记
2014/11/05 职场文书
论文答谢词
2015/01/20 职场文书
个人年度总结报告
2015/03/09 职场文书
一个成功的互联网创业项目,必须满足这些要求
2019/08/23 职场文书