小白在学习前端技术时候，一定会在刚开始的时候学习CSS2和CSS3的相关知识。这篇内容给大家介绍一个CSS鼠标悬停的效果。大家可以先看下面的效果图，然后我们在说一下实现的效果要求吧

上图效果非常简单和清晰，就是鼠标放上去能够将图片进行缩率图的放小效果。实现要求

  • CSS的伪类hover的应用，通过伪类完成CSS样式的变化
  • CSS3中的transform:scale(...)的应用，完成缩放比例的设置
  • CSS3中的过渡transition:all 200ms ease-in样式的的应用，因为缩放效果需要过渡的属性来触发效果的实现
  • 图片和文字通过定位来进行位置的设置，图片会浮动到文字的上方，同时图片定位是基于父容器来绝对定位的

下面是整个程序的源码，大家可以复制下来进行测试

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            * {

                margin: 0;

                padding: 0;

                list-style-type: none;

            }

            a,img {

                border: 0;

            }

            body {

                font: 12px/180% Arial, Helvetica, sans-serif, "新宋体";

            }

            .carre_couleur {

                width: 200px;

                height: 200px;

                display: inline-block;

                position: relative;

                margin-top: 0px;

            }

            .base_hov .retract {

                -webkit-transition:all 200ms ease-in;

                -webkit-transform-origin:50% 20%;

                -webkit-transform:scale(1);

                -moz-transition:all 200ms ease-in;

                -moz-transform-origin:50% 20%;

                -moz-transform:scale(1);

                -ms-transition:all 200ms ease-in;

                -ms-transform-origin:50% 20%;

                -ms-transform:scale(1);

                position: absolute;

                left: 0;

                width: 200px;

                height: 200px;

                z-index: 2;

            }

            .base_hov:hover .retract {

                -webkit-transition:all 200ms ease-in;

                -webkit-transform:scale(0.6);

                -moz-transition:all 200ms ease-in;

                -moz-transform:scale(0.6);

                -ms-transition:all 200ms ease-in;

                -ms-transform:scale(0.6);

                transition:all 200ms ease-in;

                transform:scale(0.6);

            }

            .acced {

                width: 180px;

                padding: 10px;

                bottom: 0;

                position: absolute;

                z-index: 1;

                text-align: left;

            }

            .big-acced {

                color: #FFFFFF;

                font-size: 25px;

                font-weight: 400;

            }

            .middle_acced {

                color: #FFFFFF;

                font-size: 15px;

                font-weight: 400;

            }

        </style>

    </head>

    <body>

        <div align="center">

            <div class="carre_couleur base_hov" style="background-color: #f8b334;">

                <a href=#"">

                    <div class="retract" style="background-color: #f8b334;">

                        <img src="img/1.png"/>

                    </div>

                    <div class="acced">

                        <div class="big-acced">商店</div>

                        <div class="middle_acced">欢迎光临</div>

                    </div>

                </a>

            </div>

            <div class="carre_couleur base_hov" style="background-color: #2ecc71;">

                <a href=#"">

                    <div class="retract" style="background-color: #2ecc71;">

                        <img src="img/2.png"/>

                    </div>

                    <div class="acced">

                        <div class="big-acced">影视</div>

                        <div class="middle_acced">欢迎光临</div>

                    </div>

                </a>

            </div>

            <div class="carre_couleur base_hov" style="background-color: #e74c3c;">

                <a href=#"">

                    <div class="retract" style="background-color: #e74c3c;">

                        <img src="img/3.png"/>

                    </div>

                    <div class="acced">

                        <div class="big-acced">设备</div>

                        <div class="middle_acced">欢迎光临</div>

                    </div>

                </a>

            </div>

        </div>

    </body>

</html>

[刘阳Java]_CSS鼠标悬停的更多相关文章

  1. [刘阳Java]_CSS数字分页效果

    先给出效果图,见下图.下图主要的完成当鼠标放到分页数字的上会呈现一个变大的效果 实现思路: (1). 使用浮动属性,以便让li元素水平排列. (2).将a元素设置为块级元素,然后设置它们的尺寸. (3 ...

  2. [刘阳Java]_CSS普通菜单制作

    简单给大家介绍一下CSS普通菜单制作,先看图 功能很简单 UL制作菜单 鼠标进入LI的CSS伪类,实现菜单弹出效果 源码如下 <!DOCTYPE html> <html> &l ...

  3. [刘阳Java]_CSS图片画廊

    图片画廊也是一种比较经典的案例.本节文章主要简单给大家介绍了CSS2实现图片画廊,采取的实现思路 ul放置图片 li标签里面嵌套a标签 a标签里面嵌套两个图片的标签 通过简单的伪类来实现图片预览效果 ...

  4. [刘阳Java]_CSS菜单侧边栏制作

    再来写一个菜单侧边栏的制作,先看截图 源代码如下 <!DOCTYPE html> <html> <head> <meta charset="UTF- ...

  5. [刘阳Java]_斗胆介绍一下Eclipse快捷键大全[超详细]_第6讲

    斗胆让我在这里介绍一下Eclipse快捷键有哪些 ctrl+shirt+r 打开资源 这组快捷键可以让你开打Eclipse工作区中任何一个文件,你只需要输入你想查找的文件名字即可,而且绝对支持模糊检索 ...

  6. [刘阳Java]_Spring常用注解介绍_第6讲

    Spring的注解是在Spring2.5的版本中引入的,目的简化XML配置.在企业开发过程中使用注解的频率非常高,但是学习注解的前提是大家一定要对Spring基于XML配置要熟悉,这是我个人建议,因为 ...

  7. [刘阳Java]_MyBatis_动态SQL标签用法_第7讲

    1.MyBatis的动态SQL是基于OGNL表达式的,它可以帮助我们方便的在SQL语句中实现某些逻辑. 2.MyBatis中用于实现动态SQL的元素主要有 if choose(when,otherwi ...

  8. [刘阳Java]_MyBatis_常规标签的用法_第6讲

    一般MyBatis最基本标签,或者说初学者上手最快的标签就是增删改查 1.<insert>标签,在MyBatis中完成数据添加操作 <insert id="addMyUse ...

  9. [刘阳Java]_MyBatis_映射文件的resultMap标签入门_第4讲

    <resultMap>:用于解决实体类中属性和表字段名不相同的问题 id:表示当前<resultMap>标签的唯一标识 result:定义表字段和实体类属性的对应关系 prop ...

随机推荐

  1. 嵌入式Linux设备驱动程序：用户空间中的设备驱动程序

    嵌入式Linux设备驱动程序:用户空间中的设备驱动程序 Embedded Linux device drivers: Device drivers in user space Interfacing ...

  2. VB 老旧版本维护系列---迷之集合- ArrayList

    迷之集合- ArrayList '定义一个字符串 Dim dataType_ImageStr As String = "2023,2091,2092,2096,2212" '将字符 ...

  3. Ckeditor 缺少图像源文件地址的解决 笨笨的人都看啦！

    Ckeditor 本文是关于CKEditor 无法上传图片问题的一个解决.我大致写了一下遇到问题的过程,问题的出处,怎么解决的,原因是什么. 希望能够帮到有需要的大家,有些时候找不到问题的答案,真的是 ...

  4. 【NX二次开发】Block UI 指定方位

    属性说明 属性   类型   描述   常规           BlockID    String    控件ID    Enable    Logical    是否可操作    Group    ...

  5. 【NX二次开发】根据视图名称旋转视图，在布局中替换视图uc6464

    uc6464("布局名","旧视图名","新视图名");输入布局名.旧视图名.新视图名.如果布局名为空则更新当前布局.如果旧视图名为空,则工 ...

  6. [Linux]经典面试题 - 网络基础 - TCP三次握手

    [Linux]经典面试题 - 网络基础 - TCP三次握手 目录 [Linux]经典面试题 - 网络基础 - TCP三次握手 一.TCP报文格式 1.1 TCP报头 1.2 报文图例 二.TCP三次握 ...

  7. noip2006总结

    T1 能量项链 原题 在Mars星球上,每个Mars人都随身佩带着一串能量项链.在项链上有N颗能量珠.能量珠是一颗有头标记与尾标记的珠子,这些标记对应着某个正整数.并且,对于相邻的两颗珠子,前一颗珠子 ...

  8. 禁止特定IP访问Oracle数据库

    通过使用数据库服务器端的sqlnet.ora文件可以实现禁止指定IP主机访问数据库的功能,这对于提升数据库的安全性有很大的帮助,与此同时,这个技术为我们管理和约束数据库访问控制提供了有效的手段 在sq ...

  9. npm ERR! Unexpected end of JSON input while parsing near '...'解决方法

    npm install时出现npm err! Unexpected end of JSON input while parsing near'...'错误 输入  npm cache clean -- ...

  10. Python中Random随机数返回值方式

    1.a=["1","2","3"] print(random.choice(a)),  随机返回列表a中的一个元素 print(random ...