transform: scale() 实现鼠标悬浮在元素之上出现和消失
2022/6/2 23:23:09
本文主要是介绍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() 实现鼠标悬浮在元素之上出现和消失的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-13PingCAP 戴涛:构建面向未来的金融核心系统
- 2024-05-09flutter3.x_macos桌面os实战
- 2024-05-09Rust中的并发性:Sync 和 Send Traits
- 2024-05-08使用Ollama和OpenWebUI在CPU上玩转Meta Llama3-8B
- 2024-05-08完工标准(DoD)与验收条件(AC)究竟有什么不同?
- 2024-05-084万 star 的 NocoDB 在 sealos 上一键起,轻松把数据库编程智能表格
- 2024-05-08Mac 版Stable Diffusion WebUI的安装
- 2024-05-08解锁CodeGeeX智能问答中3项独有的隐藏技能
- 2024-05-08RAG算法优化+新增代码仓库支持,CodeGeeX的@repo功能效果提升
- 2024-05-08代码报错不用愁,CodeGeeX一键完成代码修复、错误解释的功能上线了!