前言

transform属性允许你旋转,缩放,倾斜或平移给定元素。其中scale(x, y)就是实现元素缩放的属性值。

scale(x, y)的 x 乘以原本元素的 x;y 乘以原本的元素 y,就可以实现元素的缩放。

由远到近的缩放效果

从一个点,甚至是无,慢慢地缩放到一个完整,可以看清的一个过程,我叫作由远到近的缩放效果。直接看效果图:

进行缩放的元素必须要有一个父元素可以一直显示,因为一开始这个缩放元素要设置成scale(0, 0),这样导致它不存在于页面中,鼠标悬浮时对它无效。所以父元素起一个支撑作用。

<div class="container">
<div class="scale-obj">
hello
</div>
</div>

当鼠标悬浮到父元素范围内时,即伪类:hover,紫色这一块就开始由远到近的缩放效果。

.scale-obj {
text-align: center;
font-size: 16px;
color: #333333;
width: 50px;
height: 50px;
background-color: #7979DE;
transition: 0.5s;
transform: scale(0, 0);
} .container:hover .scale-obj {
transform: scale(1, 1);
} .container {
cursor: pointer;
width: 100px;
height: 100px;
background-color: #00B7FF;
}

翅膀张开的缩放效果

这样的效果就像是张开翅膀,收缩翅膀一样的效果,所以我就叫作翅膀张开效果。先看效果图:

只有 CSS 样式类名 scale-obj 的transform属性值由scale(0, 0)变成了scale(0, 1)就实现了上图的效果。

.scale-obj {
...
transform: scale(0, 1);
} .container:hover .scale-obj {
transform: scale(1, 1);
}

横线变竖线的缩放效果

废话不多说,直接上效果图:

这次改的地方只有当鼠标悬浮在父元素 container 上的时候transform的属性值由scale(1, 1)变成了scale(1, 0)

.scale-obj {
...
transform: scale(0, 1);
} .container:hover .scale-obj {
transform: scale(1, 0)`。
}

transform: scale() 实现鼠标悬浮在元素之上出现和消失的更多相关文章

  1. 鼠标悬浮控制元素隐藏与显示 - css中鼠标的hover状态

    需求:当鼠标移动到一个元素A身上时,另外一个元素B显示. 实现原理: A元素与B元素有一个相同的父级. B元素默认隐藏,A元素默认显示. 当鼠标移动到A元素身上时,也可以看做是移动到了A元素的父级身上 ...

  2. css鼠标悬浮控制元素隐藏与显示

    在网页开发中经常有需求是鼠标移动到一个元素A身上时,另外一个元素B显示. 如下图 当鼠标移到图片上时,相关的描述从下方显示出来. css实现原理与情景: A 是 B 的父元素 B 默认隐藏 B{opa ...

  3. 鼠标悬浮弹出标题制作JQuery

    今天给客户制作的网站里面加个效果,当鼠标在列表图片之外时,标题不显示,当鼠标悬浮在图片之上时,标题从底部弹出. 效果图如下: 鼠标悬浮前: 鼠标悬浮后: html代码如下: <ul class= ...

  4. css3-12 transform:scale(1.2,1.2)实现移入元素变大特效

    css3-12 transform:scale(1.2,1.2)实现移入元素变大特效 一.总结 一句话总结:transform:scale(1.2,1.2)鼠标移入的时候变大一点点,超出边框的部分隐藏 ...

  5. Selenium之当鼠标悬浮时隐藏的元素才出现

    在自动化过程中,有些导航按钮只有当鼠标悬浮在登录信息上时,它才能出现.这时候如果想要点击导航按钮直接用selenium的webDriver是无法定位的元素的,因为这些元素是隐藏的,只有鼠标悬浮时才出现 ...

  6. cursor CSS属性定义鼠标指针悬浮在元素上时的外观。

    1 1 cursor CSS属性定义鼠标指针悬浮在元素上时的外观. https://developer.mozilla.org/zh-CN/docs/Web/CSS/cursor 概述 cursor  ...

  7. 使用 JavaScript 中的 document 对象查找 HTML 元素,实现“登录”按钮的高亮特效 鼠标悬浮于“登录”按钮时,按钮高亮显示;

    查看本章节 查看作业目录 需求说明: 使用 JavaScript 中的 document 对象查找 HTML 元素,实现"登录"按钮的高亮特效 鼠标悬浮于"登录" ...

  8. 浅谈CSS和JQuery实现鼠标悬浮图片放大效果

    对于刚刚学习网页前台设计的同学一定对图片的处理非常苦恼,那么这里简单的讲解一下几个图片处理的实例. 以.net为平台,微软的Visual Studio 2013为开发工具,当然前台技术还是采用CSS3 ...

  9. zoom和transform:scale的区别

    小tips: zoom和transform:scale的区别 这篇文章发布于 2015年11月3日,星期二,00:52,归类于 css相关. 阅读 7876 次, 今日 8 次 by zhangxin ...

随机推荐

  1. vue3 迫不得已我硬着头皮查看了keepalive的源代码,解决了线上的问题

    1.通过本文可以了解到vue3 keepalive功能 2.通过本文可以了解到vue3 keepalive使用场景 3.通过本文可以学习到vue3 keepalive真实的使用过程 4.通过本文可以学 ...

  2. pip国内源配置

    Python 的一大优点就是丰富的类库,所以我们经常会用 pip 来安装各种库,所以对于Python开发用户来讲,PIP安装软件包是家常便饭.但国外的源下载速度实在太慢,浪费时间.而且经常出现下载后安 ...

  3. AT32F415 修改时钟和晶振方法(原创)

    1. 简介 我们几乎是国内第一批使用AT32F415芯片的客户,那个时候芯片还没涨价,岁月一切静好.使用AT32F415 做了几个小产品,也在持续出货.后来大家都知道,涨价缺货愈演愈烈.好在我们提前囤 ...

  4. (干货)基于 veImageX 搭建海报生成平台 -- 附源码

    前言 618 年中促销即将来临,很多公司都会通过海报来宣传自己的促销方案,通常情况下海报由设计团队基于 PS.Sketch 等工具创作,后期若想替换海报文案.商品列表等内容则需打开原工程进行二次创作, ...

  5. 支持向量机SVM(一):基本概念、目标函数的推导

    本文旨在介绍支持向量机(SVM)的基本概念并解释SVM中的一个关键问题: 为什么SVM目标函数中的函数间隔取1? 一.分类问题 给定N个分属两类的样本,给出一个决策边界使得边界一侧只含一种样本(如下图 ...

  6. 【转载】浅谈大规模k8s集群关于events的那些坑

    原文链接:一流铲屎官二流程序员[浅谈大规模k8s集群关于events的那些坑] 背景 随着k8s集群规模的增加,集群内的object数量也与日俱增,那么events的数量也会伴随其大量增加,那么当用户 ...

  7. ffmpeg使用总结

    2021-07-21 初稿 截图 ffmpeg -i <video> -ss <time> -vframes 1 <output_pic> 设置视频封面 ffmpe ...

  8. SAP APO-PP / DS

    在SAP APO中,使用生产计划/详细计划(Production Planning/Detailed Scheduling)生成满足生产要求的采购建议. 此组件还用于定义资源计划和订单明细. 您还可以 ...

  9. 揭开Vue异步组件的神秘面纱

    简介 在大型应用里,有些组件可能一开始并不显示,只有在特定条件下才会渲染,那么这种情况下该组件的资源其实不需要一开始就加载,完全可以在需要的时候再去请求,这也可以减少页面首次加载的资源体积,要在Vue ...

  10. Python+opencv打开修图的正确方式get

    先逼逼两句: 图像是 Web 应用中除文字外最普遍的媒体格式. 流行的 Web 静态图片有 JPEG.PNG.ICO.BMP 等.动态图片主要是 GIF 格式.为了节省图片传输流量,大型互联网公司还会 ...