CSS transform: scale()
2024-09-08 15:49:06
前言
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)`。
}
最新文章
- HashBytes(Transact-SQL)
- React + Redux 入坑指南
- [翻译]Autofac 解析服务
- php 反射
- ECSHOP后台商品列表显示商品缩略图
- Java面向对象的继承
- Strong TLS configuration on servers
- 将SQLServer结果导出为excel文件
- git对象存储
- AirPlay简介
- FJ省队集训DAY2 T1
- VirtualBox创建虚拟电脑、执行Genymotion模拟器报错
- 开启全民窃听风云——C#智能录音录像录屏程序源码放送!
- echarts图表
- Android CmakeList
- WEB UI 上传URL附件(使用方法备份)
- SQL server 2008(Linux安装)
- springboot整合redis-sentinel支持Cache注解
- python如何直接控制鼠标键盘
- 数据摘要 MD5