transform: scale() 实现鼠标悬浮在元素之上出现和消失
前言
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() 实现鼠标悬浮在元素之上出现和消失的更多相关文章
- 鼠标悬浮控制元素隐藏与显示 - css中鼠标的hover状态
需求:当鼠标移动到一个元素A身上时,另外一个元素B显示. 实现原理: A元素与B元素有一个相同的父级. B元素默认隐藏,A元素默认显示. 当鼠标移动到A元素身上时,也可以看做是移动到了A元素的父级身上 ...
- css鼠标悬浮控制元素隐藏与显示
在网页开发中经常有需求是鼠标移动到一个元素A身上时,另外一个元素B显示. 如下图 当鼠标移到图片上时,相关的描述从下方显示出来. css实现原理与情景: A 是 B 的父元素 B 默认隐藏 B{opa ...
- 鼠标悬浮弹出标题制作JQuery
今天给客户制作的网站里面加个效果,当鼠标在列表图片之外时,标题不显示,当鼠标悬浮在图片之上时,标题从底部弹出. 效果图如下: 鼠标悬浮前: 鼠标悬浮后: html代码如下: <ul class= ...
- css3-12 transform:scale(1.2,1.2)实现移入元素变大特效
css3-12 transform:scale(1.2,1.2)实现移入元素变大特效 一.总结 一句话总结:transform:scale(1.2,1.2)鼠标移入的时候变大一点点,超出边框的部分隐藏 ...
- Selenium之当鼠标悬浮时隐藏的元素才出现
在自动化过程中,有些导航按钮只有当鼠标悬浮在登录信息上时,它才能出现.这时候如果想要点击导航按钮直接用selenium的webDriver是无法定位的元素的,因为这些元素是隐藏的,只有鼠标悬浮时才出现 ...
- cursor CSS属性定义鼠标指针悬浮在元素上时的外观。
1 1 cursor CSS属性定义鼠标指针悬浮在元素上时的外观. https://developer.mozilla.org/zh-CN/docs/Web/CSS/cursor 概述 cursor ...
- 使用 JavaScript 中的 document 对象查找 HTML 元素,实现“登录”按钮的高亮特效 鼠标悬浮于“登录”按钮时,按钮高亮显示;
查看本章节 查看作业目录 需求说明: 使用 JavaScript 中的 document 对象查找 HTML 元素,实现"登录"按钮的高亮特效 鼠标悬浮于"登录" ...
- 浅谈CSS和JQuery实现鼠标悬浮图片放大效果
对于刚刚学习网页前台设计的同学一定对图片的处理非常苦恼,那么这里简单的讲解一下几个图片处理的实例. 以.net为平台,微软的Visual Studio 2013为开发工具,当然前台技术还是采用CSS3 ...
- zoom和transform:scale的区别
小tips: zoom和transform:scale的区别 这篇文章发布于 2015年11月3日,星期二,00:52,归类于 css相关. 阅读 7876 次, 今日 8 次 by zhangxin ...
随机推荐
- vue3 迫不得已我硬着头皮查看了keepalive的源代码,解决了线上的问题
1.通过本文可以了解到vue3 keepalive功能 2.通过本文可以了解到vue3 keepalive使用场景 3.通过本文可以学习到vue3 keepalive真实的使用过程 4.通过本文可以学 ...
- pip国内源配置
Python 的一大优点就是丰富的类库,所以我们经常会用 pip 来安装各种库,所以对于Python开发用户来讲,PIP安装软件包是家常便饭.但国外的源下载速度实在太慢,浪费时间.而且经常出现下载后安 ...
- AT32F415 修改时钟和晶振方法(原创)
1. 简介 我们几乎是国内第一批使用AT32F415芯片的客户,那个时候芯片还没涨价,岁月一切静好.使用AT32F415 做了几个小产品,也在持续出货.后来大家都知道,涨价缺货愈演愈烈.好在我们提前囤 ...
- (干货)基于 veImageX 搭建海报生成平台 -- 附源码
前言 618 年中促销即将来临,很多公司都会通过海报来宣传自己的促销方案,通常情况下海报由设计团队基于 PS.Sketch 等工具创作,后期若想替换海报文案.商品列表等内容则需打开原工程进行二次创作, ...
- 支持向量机SVM(一):基本概念、目标函数的推导
本文旨在介绍支持向量机(SVM)的基本概念并解释SVM中的一个关键问题: 为什么SVM目标函数中的函数间隔取1? 一.分类问题 给定N个分属两类的样本,给出一个决策边界使得边界一侧只含一种样本(如下图 ...
- 【转载】浅谈大规模k8s集群关于events的那些坑
原文链接:一流铲屎官二流程序员[浅谈大规模k8s集群关于events的那些坑] 背景 随着k8s集群规模的增加,集群内的object数量也与日俱增,那么events的数量也会伴随其大量增加,那么当用户 ...
- ffmpeg使用总结
2021-07-21 初稿 截图 ffmpeg -i <video> -ss <time> -vframes 1 <output_pic> 设置视频封面 ffmpe ...
- SAP APO-PP / DS
在SAP APO中,使用生产计划/详细计划(Production Planning/Detailed Scheduling)生成满足生产要求的采购建议. 此组件还用于定义资源计划和订单明细. 您还可以 ...
- 揭开Vue异步组件的神秘面纱
简介 在大型应用里,有些组件可能一开始并不显示,只有在特定条件下才会渲染,那么这种情况下该组件的资源其实不需要一开始就加载,完全可以在需要的时候再去请求,这也可以减少页面首次加载的资源体积,要在Vue ...
- Python+opencv打开修图的正确方式get
先逼逼两句: 图像是 Web 应用中除文字外最普遍的媒体格式. 流行的 Web 静态图片有 JPEG.PNG.ICO.BMP 等.动态图片主要是 GIF 格式.为了节省图片传输流量,大型互联网公司还会 ...