小白在学习前端技术时候，一定会在刚开始的时候学习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. synchronized使用及java中的原子性问题

    1.Synchronized关键字使用 class X { // 修饰非静态方法 synchronized void foo() { // 临界区 } // 修饰静态方法 synchronized s ...

  2. 给手绘图着色（添加颜色或色彩）：CVPR2020论文点评

    给手绘图着色(添加颜色或色彩):CVPR2020论文点评 Learning to Shade Hand-drawn Sketches 论文链接:https://arxiv.org/pdf/2002.1 ...

  3. 3D目标检测（CVPR2020：Lidar）

    3D目标检测(CVPR2020:Lidar) LiDAR-Based Online 3D Video Object Detection With Graph-Based Message Passing ...

  4. Spring Cloud07: Feign 声明式接口调用

    一.什么是Feign Feign也是去实现负载均衡,但是它的使用要比Ribbon更加简化,它实际上是基于Ribbon进行了封装,让我们可以通过调用接口的方式实现负载均衡.Feign和Ribbon都是由 ...

  5. thymeleaf模板引擎基础知识

    一.表达式 分为四类: 1.变量表达式 ${} :获取容器上下文变量的值. 举例: 获取application域中的username: ${application.username} 获取sessio ...

  6. 692. 前K个高频单词

    2021-05-20 LeetCode每日一题 链接:https://leetcode-cn.com/problems/top-k-frequent-words/ 标签:堆.字典序.哈希表 题目 给一 ...

  7. C语言数组初始化方式

    //一维数组初始化//初始化方法1 int arr[5] = {3,7,2,1,9}; //定义了一个长度是5的数组,并给每个元素赋值 //初始化方法2 int arr[5] = {3,7}; //给 ...

  8. 一文带你了解.Net自旋锁

    本文主要讲解.Net基于Thread实现自旋锁的三种方式 基于Thread.SpinWait实现自旋锁 实现原理:基于Test--And--Set原子操作实现 使用一个数据表示当前锁是否已经被获取 0 ...

  9. 内核、dns、网卡配置

    升级内核(安装新版软件包) rpm -ivh kernel-3.10.0-123.1.2.el7.x86_64.rpm 二.配置永久IP地址,子网掩码,网关地址   /etc/sysconfig/ne ...

  10. 【NX二次开发】点到矢量或直线的垂点

    已知p1.p2.v1求p0 求解: 通过P1点和P2点,先求出v2: 使用 UF_VEC3_dot(),v1点乘v2得到P0与P2之间的距离: 使用UF_VEC3_unitize()将v1单位化: p ...