小白在学习前端技术时候，一定会在刚开始的时候学习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. 3D重建算法原理

    3D重建算法原理 三维重建(3D Reconstruction)技术一直是计算机图形学和计算机视觉领域的一个热点课题.早期的三维重建技术通常以二维图像作为输入,重建出场景中的三维模型.但是,受限于输入 ...

  2. 转置卷积Transposed Convolution

    转置卷积Transposed Convolution 我们为卷积神经网络引入的层,包括卷积层和池层,通常会减小输入的宽度和高度,或者保持不变.然而,语义分割和生成对抗网络等应用程序需要预测每个像素的值 ...

  3. 5G和AI机器人平台为工业4.0和无人机提供服务

    5G和AI机器人平台为工业4.0和无人机提供服务 Qualcomm 5G and AI robotics platform delivers for Industry 4.0 and drones 高 ...

  4. httprunner中的分层（api、testcase、testsuite）及实际使用

    一.分层思想 api定义层:最底下的一层是api的定义层testcase层:测试用例层,调用定义层的内容testsuite:测试套件层 二.分层案例设计实现实践举例 1.api 层: 2.testca ...

  5. vscode使用版本控制git commit unstaged时提示对话框的设置

    使用 vscode 版本控制提交代码时,如果有 unstaged file,会有一个弹出框: 选择 always 或者 never ,这个框下次就不再弹出了. 如果你想让他再次出现,请去setting ...

  6. JVM 垃圾回收算法和垃圾回收器

    JVM 垃圾回收算法和垃圾回收器. 一.垃圾回收的区域 栈:栈中的生命周期是跟随线程,所以一般不需要关注. 堆:堆中的对象是垃圾回收的重点. 方法区:这一块也会发生垃圾回收,不过这块的效率比较低,一般 ...

  7. P2365 任务安排

    题目描述 n 个任务排成一个序列在一台机器上等待完成(顺序不得改变),这 n 个任务被分成若干批,每批包含相邻的若干任务. 从零时刻开始,这些任务被分批加工,第 i 个任务单独完成所需的时间为 ti​ ...

  8. docker安装nextcloud私人网盘,开启https配置证书

    docker安装nextcloud私人网盘 之前一直用的百度网盘最近svip超级会员到期了,续费要￥199元,对于一个打工人的我来说有点儿贵.作为技术人的一员,我就来发挥发挥自己的长处,来搭建一个私人 ...

  9. Arduino参考手册-函数和变量及电路图

    标题: Arduino参考手册-函数和变量及电路图 作者: 梦幻之心星 sky-seeker@qq.com 标签: [#Arduino,#参考手册,#函数,#变量] 目录: [Arduino] 日期: ...

  10. Centos7搭建内网DNS服务器

      一.配置阿里云yum源 执行脚本配置阿里云的yum源,已配置yum源的可以忽略 #!/bin/bash # ******************************************** ...