一款利用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实现预加载动画效果
Sep 06 HTML / CSS
CSS3简单实现照片墙
Dec 12 HTML / CSS
纯css3实现的鼠标悬停动画按钮
Dec 23 HTML / CSS
CSS3 3D旋转rotate效果实例介绍
May 03 HTML / CSS
CSS3实现div从下往上滑入滑出效果示例
Apr 28 HTML / CSS
html5+css3气泡组件的实现
Nov 21 HTML / CSS
详解html5 shiv.js和respond.min.js
Jan 24 HTML / CSS
使用postMessage让 iframe自适应高度的方法示例
Oct 08 HTML / CSS
html5给汉字加拼音加进度条的实现代码
Apr 07 HTML / CSS
html5的pushstate以及监听浏览器返回事件的实现
Aug 11 HTML / CSS
详解淘宝H5 sign加密算法
Aug 25 HTML / CSS
纯CSS实现hover图片pop-out弹出效果的实例代码
Apr 16 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的ASP防火墙
2006/10/09 PHP
PHP编程开发怎么提高编程效率 提高PHP编程技术
2015/11/09 PHP
php实现搜索类封装示例
2016/03/31 PHP
PHP基于ICU扩展intl快速实现汉字转拼音及按拼音首字母分组排序的方法
2017/05/03 PHP
PHP实现字符串大小写转函数的功能实例
2019/02/06 PHP
使用正则表达式的格式化与高亮显示json字符串
2014/12/03 Javascript
浅谈Javascript中的Function与Object
2015/01/26 Javascript
jQuery在ul中显示某个li索引号的方法
2015/03/17 Javascript
jQuery EasyUI Dialog拖不下来如何解决
2015/09/28 Javascript
浅谈jQuery 选择器和dom操作
2016/06/07 Javascript
Angular2中Bootstrap界面库ng-bootstrap详解
2016/10/18 Javascript
JavaScript中 this 指向问题深度解析
2017/02/21 Javascript
bootstrap fileinput 插件使用项目总结(经验)
2017/02/22 Javascript
JavaScript实现HTML5游戏断线自动重连的方法
2017/09/18 Javascript
Angular.js中window.onload(),$(document).ready()的写法浅析
2017/09/28 Javascript
关于jquery中attr()和prop()方法的区别
2018/05/28 jQuery
angularJs提交文本框数据到后台的方法
2018/10/08 Javascript
记录一次开发微信网页分享的步骤
2019/05/07 Javascript
前后端常见的几种鉴权方式(小结)
2019/08/04 Javascript
微信小程序之左右布局的实现代码
2019/12/13 Javascript
iview实现图片上传功能
2020/06/29 Javascript
Win7下搭建python开发环境图文教程(安装Python、pip、解释器)
2016/05/17 Python
python遍历小写英文字母的方法
2019/01/02 Python
python爬虫 批量下载zabbix文档代码实例
2019/08/21 Python
在Django下测试与调试REST API的方法详解
2019/08/29 Python
在Python中实现字典反转案例
2020/12/05 Python
Application Cache未缓存文件无法访问无法加载问题
2014/05/31 HTML / CSS
西尔斯百货官网:Sears
2016/09/06 全球购物
三星法国官方网站:Samsung法国
2019/10/31 全球购物
C++面试题目
2013/06/25 面试题
高中地理教学反思
2014/01/29 职场文书
不服从公司安排检讨书
2014/09/24 职场文书
北京离婚协议书范文2014
2014/09/29 职场文书
爱的教育观后感
2015/06/17 职场文书
nginx实现多geoserver服务的负载均衡
2022/05/15 Servers
Promise静态四兄弟实现示例详解
2022/07/07 Javascript