小白在学习前端技术时候，一定会在刚开始的时候学习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. 5G通讯与芯片

    5G通讯与芯片 美国商务部可能接近达成一项新的规则,允许美国公司与华为重启谈判,在共同制定下一代通信技术5G标准方面进行合作. 华为美国首席安全官安迪·珀迪(Andy Purdy)向第一财经记者独家回 ...

  2. 马斯克如何颠覆航天？ 1/5385成本，c++和python编程！

    马斯克如何颠覆航天? 1/5385成本,c++和python编程! 5月31日,经历了重重困难,马斯克的SpaceX载人飞船成功发射,这是美国自2011年以来首次发射载人航天飞船,也是美国进入由商业主 ...

  3. Imec推出高性能芯片的低成本冷却解决方案

    Imec推出高性能芯片的低成本冷却解决方案 Imec unveils low-cost cooling solution for high-performance chips 3D打印冷却器优于传统解 ...

  4. eclipse解决中文乱码

    参考链接:https://blog.csdn.net/lzc2644481789/article/details/97244261

  5. java后端知识点梳理——多线程与高并发

    进程与线程 进程是一个"执行中的程序",是系统进行资源分配和调度的一个独立单位 线程是进程的一个实体,一个进程中一般拥有多个线程. 线程和进程的区别 进程是操作系统分配资源的最小单 ...

  6. 【NX二次开发】用户出口函数介绍

    用户出口(User Exit)是NX Open 中的一个重要概念.NX在运行过程中某些特定的位置存在规定的出口,当进程执行到这些出口时,NX会自动检查用户是否在此处已定义了指向内部程序位置的环境变量: ...

  7. SpringBoot2配置文件application.yaml

    源码基于SpringBoot 2.4.4 1.认识配置文件 1.1 配置文件的加载 创建SpringBoot项目的时候,会自动创建一个application.properties文件,该文件是Spri ...

  8. 想自己写框架？不了解Java注解机制可不行

    无论是在JDK还是框架中,注解都是很重要的一部分,我们使用过很多注解,但是你有真正去了解过他的实现原理么?你有去自己写过注解么? 概念 注解(Annotation),也叫元数据.一种代码级别的说明.它 ...

  9. Spring Boot 实战：如何自定义 Servlet Filter

    1.前言 有些时候我们需要在 Spring Boot Servlet Web 应用中声明一些自定义的 Servlet Filter来处理一些逻辑.比如简单的权限系统.请求头过滤.防止 XSS 攻击等. ...

  10. 【图论】用线段树写Dijikstra！！

    速度是没有极限的. 众说周知,Dijikstra是一种最短路算法,复杂度为O(V^2+E) 朴素Dijikstra void Dijikstra(int s){ memset(dis,inf,size ...