小白在学习前端技术时候，一定会在刚开始的时候学习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. 大型图像数据聚类匹配：ICCV2019论文解析

    大型图像数据聚类匹配:ICCV2019论文解析 Jointly Aligning Millions of Images with Deep Penalised Reconstruction Conge ...

  2. MegEngine基本概念

    MegEngine基本概念 基本概念 MegEngine 是基于计算图的深度神经网络学习框架. 本文内容会简要介绍计算图及其相关基本概念,以及在 MegEngine 中的实现. 计算图 结合一个简单的 ...

  3. cuDNN概述

    cuDNN概述 NVIDIACUDA深度神经网络库(cuDNN)是GPU加速的用于深度神经网络的原语库.cuDNN为标准例程提供了高度优化的实现,例如向前和向后卷积,池化,规范化和激活层. 全球的深度 ...

  4. Hashing散列注意事项

    Hashing散列注意事项 Numba支持内置功能hash(),只需__hash__()在提供的参数上调用成员函数即可 .这使得添加对新类型的哈希支持变得微不足道,这是因为扩展APIoverload_ ...

  5. Pass Infrastructure基础架构（上）

    Pass Infrastructure基础架构(上) Operation Pass OperationPass : Op-Specific OperationPass : Op-Agnostic De ...

  6. onnx算子大全

    本文通过此脚本从def文件自动生成.不要直接修改,而是编辑算子定义. 对于算子输入/输出的可辩别的,它可以是可辩别的.不可辩别的或未定义的.如果未指定变量的可辩别的,则该变量具有未定义的可辩别的. a ...

  7. 『言善信』Fiddler工具 — 6、Fiddler界面布局详解【命令行和状态栏】

    目录 1.命令行 2.状态栏 1.命令行 命令行在Fiddler的左下方的黑色窗口,也叫QuickExec,可以调用 Fiddler的内置命令. 这一系列内置的函数用于筛选和操作会话列表中的sessi ...

  8. .NET平台系列21：云原生时代 .NET5 雄霸天下

    系列目录     [已更新最新开发文章,点击查看详细] 随着互联网持续高歌猛进,相关技术名词也是层出不穷.微服务.容器化.DevOps.ServerLess.FaaS,这两年最火的当属云原生Cloud ...

  9. C# Net Core 使用 itextsharp.lgplv2.core 把Html转PDF

    C# Net Core 使用 itextsharp.lgplv2.core 把Html转PDF 只支持英文(中文我不知道怎么弄,懂的朋友帮我看一下)!!!!![补充:评论区的小伙伴已解决] 引入包it ...

  10. linux命令基础（一课）

    一.Linux命令基础 1.shell Linux系统中运行的一种特殊程序 在用户和内核之间充当'翻译官' 用户登录Linux系统时,自动加载一个shell程序 bash是Linux系统中默认使用的s ...