脚本之家 服务器常用软件
快捷导航
您的位置：主页 > 网页制作 > CSS > css3 >

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

  发布时间：2014-12-29 08:42:37   作者：佚名   我要评论
这篇文章主要为大家介绍了一款利用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.         }  

相关文章

  • CSS3 最强二维布局系统之Grid 网格布局

    CS3的Grid网格布局是目前最强的二维布局系统,可以同时对列和行进行处理,将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局，本文介绍CSS3 最强二维布局系
    2025-02-27

  • 如何使用CSS3实现波浪式图片墙

    本文介绍了如何使用CSS3的transform属性和动画技巧实现波浪式图片墙,通过设置图片的垂直偏移量,并使用动画使其周期性地改变位置,可以创建出动态且具有波浪效果的图片墙,同
    2025-02-27

  • CSS3模拟实现一个雷达探测扫描动画特效(最新推荐)

    文章介绍了如何使用CSS3实现一个雷达探测扫描的效果,包括夜色背景、蜘蛛网盘、扫描体的转动效果、尾巴阴影以及被扫描到的光点,通过HTML和CSS的配合,实现了丰富的动画效果,
    2025-02-21

  • css3 display:flex 弹性盒模型的使用方法

    CSS3的Flexbox是一种强大的布局模式,通过设置display:flex可以轻松实现对齐、排列和分布网页元素,它解决了传统布局方法中的对齐、间距分配和自适应布局等问题,接下来通过本
    2025-02-19

  • css3 实现icon刷新转动效果

    本文给大家介绍css3 实现icon刷新转动效果，文章开头给大家介绍了webkit-transform、animation、@keyframes这三个属性，结合实例代码给大家介绍的非常详细，感兴趣的朋友一
    2025-02-19

  • CSS3动态效果之过渡属性(最新推荐)

    CSS3过渡属性用于实现元素从一种样式平滑过渡到另一种样式,通过设置transition-property过渡属性、transition-duration过渡时长transition-timing-function过渡函数和trans
    2025-02-19

  • CSS3实现动态旋转加载样式的示例代码

    本文介绍了如何使用CSS3创建一个简单的动态旋转加载样式,通过定义一个带有类名“loader”的HTML元素,并使用CSS样式和@keyframes规则来实现旋转动画,你可以根据需要调整样式
    2025-02-19

  • 使用CSS3实现平滑的过渡动画效果(实例代码)

    这篇文章主要介绍了如何使用CSS3的transition属性实现平滑的过渡动画，本文通过实例代码给大家介绍的非常详细，感兴趣的朋友一起看看吧
    2025-02-13

  • CSS3中使用flex和grid实现等高元素布局的示例代码

    本文介绍了使用CSS3中的Flexbox和Grid布局实现等高元素布局的方法,通过简单的两列实现、每行放置3列以及全部代码的展示,展示了这两种布局方式的实现细节和效果，感兴趣的朋
    2025-02-11

  • 使用CSS3和SVG创建圆形进度条动画效果

    CSS3和SVG的结合使用为网页设计带来了创新的动态视觉效果,本文通过一个圆形进度条的动画特效示例,展示了如何利用CSS3的动画功能和SVG的矢量图形能力来创建丰富的用户交互体
    2024-10-24

最新评论

关注微信公众号

扫一扫