基于css3的鼠标经过动画显示详情特效

之前为大家分享过一款基于jquery的手风琴显示详情,今天给大家分享基于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&E<div class="popup">
            <span>
                <h3>
                    RI&E</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);
        }

via:http://www.w2bc.com/Article/13665

时间: 2024-10-16 17:51:43

基于css3的鼠标经过动画显示详情特效的相关文章

30款css3实现的鼠标经过图片显示描述特效

今天给大家分享30款css3实现的鼠标经过图片显示描述特效,鼠标经过这些图片的时候以非常炫的方式显示图片的描述.为保证最佳的效果,请在 IE10+.Chrome.Firefox 和 Safari 等现代浏览器中浏览. 在线预览   源码下载 实现的代码. html代码: <div class="container"> <!-- Top Navigation --> <header class="codrops-header"> &

内容太多用省略号代替、内容不换行,鼠标移上去显示详情

//然后是 内容太多用....表示.内容不换行,鼠标移上去显示详情 //这类问题最简单的肯定是使用css解决 // //1. table-layout: fixed 由于table-layout的默认值是auto, //即table的宽高将取决于其内容的多寡,如果内容的体积无法估测,那么最终表格的呈现形式也无法保证了, //fixed一下就好了.(注意:此样式是关键) // //2. white-space: nowrap 是为了保证无论单元格(TD)中文本内容有多少, //都不会自动换行,此时

基于css3小船水面游动动画特效

基于css3小船水面游动动画特效,这是一款色彩鲜艳扁平风格的css3动画特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="land"> <div class="land_01"></div> <div class="land_02"></div> <div class="land_03"></div&g

基于jQuery点击淡入淡出显示图片特效

分享一款基于jQuery点击淡入淡出显示图片特效.这是一款基于jQuery+CSS3实现酷炫效果的图片切换特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <center><p style="color:#334960">点击图标进行展示</p></center> <div class="main"> <div id="coolShow"><

一款基于css3的3D图片翻页切换特效

今天给大家分享一款基于css3的3D图片翻页切换特效.单击图片下方的滑块会切换上方的图片.动起你的鼠标试试吧,效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="imgdex"> <figure> <img src="arabic-eyes.jpg" alt="Photograph of a woman's face under a Bedouin headress"><

基于css3的鼠标滑动按钮动画之CSS--续

btn2 /*--按钮1--*/ .container1 {   width:200px;   display:block;   margin:20px auto;   position:relative;   font-family:droid arabic kufi; } .con_down1 {   display:block;   cursor:pointer;   background-color:#F6EB96;   width:190px;   height:50px;   pad

纯css3鼠标经过图片显示描述特效

http://www.w2bc.com/Article/5582 今天给大家带来的是用css3技术实现鼠标经过图片,显示图片描述的动画效果.鼠标经过图片时,图片动画缩小并渐变显示描述.我们一起看看效果图: 在线预览   源码下载 我们一起学习下此案例的代码. html代码: <div align="center"> <div class="carre_couleur base_hov" style=""> <a ta

基于css3炫酷页面加载动画特效代码

基于CSS3实现35个动画SVG图标.这是一款基于jQuery+CSS3实现的SVG图标动画代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="loaders"> <div class="loader"> <div class="loader-inner ball-pulse"> <div></div> <div></div

分享10款web前端基于css3和jquery的源码预览

1.基于jquery和css3实现的摩天轮式分享按钮 之前分享了很多css3实现的按钮.今天要给大家带来一款基于jquery和css3实现的摩天轮式分享按钮.这款分享按钮页面底部有一个toggle按钮,单击该按钮,摩天轮按钮以动画的形式出现,各个分享按钮挂在摩天轮上. 在线演示 源码下载 2.纯css3实现的动画加载导航 之前为大家介绍了好几款导航菜单,今天为给大家再带来一款纯css3实现的动画加载导航.该导航出现的时候以动画的形式出现. 在线演示 源码下载 3.纯css3实现的鼠标经过图片显示