scale改变元素尺寸

目标： transform: scale(x轴缩放倍数, y轴缩放倍数);
技巧：

一般情况下, 只为scale设置一个值, 表示x轴和y轴等比例缩放

transform: scale(缩放倍数);
scale值大于1表示放大, scale值小于1表示缩小。

想要效果：

hover时中间的图标从大变小且居中显示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}li {list-style: none;}img {width: 100%;}.box {width: 249px;height: 210px;margin: 50px auto;图标太大时溢出隐藏overflow: hidden;}.box p {color: #3b3b3b;padding: 10px 10px 0 10px;}.box .pic {position: relative;}// 利用伪元素实现.box .pic::after {/* 播放按钮压在图片上面 - 居中 */// 利用定位实现，而且可以设置尺寸position: absolute;left: 50%;top: 50%;// 1.利用margin实现/* margin-left: -29px;margin-top: -29px; *//* transform: translate(-50%, -50%); */content: '';width: 58px;height: 58px;background-image: url(./images/play.png);/*2 使用transoform实现 */transform: translate(-50%, -50%) scale(5);/* 透明,看不见 */opacity: 0;// 过度效果，谁变加给谁transition: all .5s;}/* li hover的时候,  谁变小pic::after（伪元素变小） */.box li:hover .pic::after {opacity: 1;// 注意这里一定要写translate(-50%, -50%)，否则由于层叠性会覆盖掉前面的transform属性// 则不能实现居中显示的效果transform: translate(-50%, -50%) scale(1);}</style>
</head>
<body><div class="box"><ul><li><div class="pic"><img src="./images/party.jpeg" alt=""></div><p>【和平精英】“初火”音乐概念片：四圣觉醒......</p></li></ul></div>
</body>
</html>

scale改变元素尺寸相关推荐

微信小程序根据wx.getSystemInfo获取屏幕尺寸，并动态改变元素宽高尺寸，示例
通过js获取屏幕尺寸,并改变元素尺寸效果图 index.wxml <view class="body-view" style="width:{{wWidth}}r ...
css元素旋转原点,使用transform-origin属性改变元素变换原点
使用CSS中的旋转函数可以让元素旋转指定的角度,比如transform:rotate(45deg)这条声明是表示将元素顺时针旋转45度,这里的旋转是按照一个默认的原点进行的,在CSS里可以使用tran ...
transform并未改变元素大小等问题
transform并未改变元素大小等问题链接: https://segmentfault.com/q/1010000002557576. transform是在现有的元素上浏览器做的渲染,不会改变位 ...
Web APIs-事件流、事件委托、其他事件、元素尺寸与位置
目录事件流事件捕获事件冒泡阻止冒泡解绑事件事件委托其他事件 1.页面加载事件 2. 页面滚动事件 3.页面尺寸事件元素尺寸与位置今日单词综合案例事件流事件完整执行过程中的流动路 ...
元素尺寸总结（offsetWidth，clientWidth，scrollWidth）
最近自己实现了一个瀑布流的插件,里面需要获取元素相关的尺寸,所以趁此想总结一下元素尺寸相关的内容. 本文大纲: 1.偏移尺寸(offset) offset:偏移 offsetLeft.offsetTo ...
python中plt改变图像尺寸_Matplotlib中图像大小设置
Matplotlib中图像大小设置 2019-10-15 23:53:30 来源: 晴天小雨 0 摘要:Matplotlib中figsize是设置图形大小的参数,接收一个元祖,内含两个元素,分别代表图 ...
python 改变图片尺寸
python 改变图片尺寸 #!/usr/bin/env python # -*- encoding: utf-8 -*- """ #!/usr/bin/env pyth ...
Python 技术篇-用PIL库旋转图片、改变图像尺寸
首先需要安装 PIL 库,直接pip install pillow就好了. 旋转包括 transpose() 和 rotate() 两种方式. resize((a, b)) 是用来改变图片尺寸的. # ...
按键改变元素背景颜色链式编程的原理评分案例 each方法的使用
按键改变元素背景颜色 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...

scale改变元素尺寸

transform: scale(缩放倍数);

scale改变元素尺寸相关推荐

最新文章

热门文章