使用合适的CSS优化界面：translate和top/left的比较

最新推荐文章于 2024-04-25 16:16:15 发布
转载 最新推荐文章于 2024-04-25 16:16:15 发布 · 3.6k 阅读 · 3
文章标签：

#css #优化 #动画

本文探讨了如何利用GPU加速和CSS关键帧动画或CSS过渡来优化网页性能，特别是通过2D变换替代绝对定位，以减少绘制时间和提高动画流畅度。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

Guidelines for translate

top/left花了大量的时间去绘制每一帧。所有的css包括box-shdow都是在CPU上计算的。在translate版本中，却让这个macbook在自己新的图层在GPU中得到提升。此时此元素macboox是在自己单独的一层上，任何2D transform，3D transform或者opacity的变化都可以完全的使用GPU，GPU可以保持非常快并且可以给我们提供非常快的帧速率。


Guidelines for animation 

1. 尽可能的使用CSS 关键帧动画或者CSS transition。浏览器可以优化大量绘制和组合的时间。 
2. 如果一定使用基于JS的动画，尽量使用requestAnimationFrame。尽量不要使用setTimeout， setInterval。 
3. 尽量不要在每一帧上改变inline元素，浏览器可以在多方面优化css中声明式动画。 
4. 使用2D transforms来代替pos:abs将会显著的提高FPS（每秒传输帧数），因为2D transform有更少的绘制时间和更流畅的动画。 
5. 通过Timeline Frams模式来观测什么让你变慢 
6. 在chroms://flags中打开“ 
合成渲染层边框”，帮助你看到哪些元素正在被GPU render
为什么说移动一个元素用Translate()比Pos:abs Top/Left好？
u010552788的专栏
08-11 4313
为什么说移动一个元素用Translate()比Pos:abs Top/Left好？整理来自：http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/Distraction: Pixel snapping 1. Animating with Top/Left： ht
css百分比问题——`top`、`left`、'translate'的百分比参照谁？
06-05 1625
比如 top、left、transform属性的translate方法，他们的百分比都是相较谁而言的？ top、left是基于父元素的： .parent { position: relative; background-color: rgb(243, 225, 225); height: 100px; width: 240px; } .child { ...
定位百分比问题——`top`、`left`...、‘translate‘的百分比参照谁？
斜杠青年博客
11-09 1041
top、left、right、bottom设置百分比基于父元素！ 首先定位之后,left、top、right、bottom 设置百分比的情况是 因为在不同设备下，定位的元素宽高也是不同的，那么这个时候给出固定值显然是不对的。所以用到了百分比 translate’的百分比参照自身 遇到这个问题的时候，是因为我想把这个元素定位居中，可是我要居中的元素没有宽高，是内容撑起来的，那么我无法设置margin值来让他偏移！translate的作用派上了用场！在我设置top、left为50%的时候，设置translate
用 top left 定位和 transform 的区别
pky@
07-24 4361
链接：https://www.zhihu.com/question/334077465/answer/759985633 来源：知乎 最首要的区别是元素位置： 使用 top left 定位是直接改变元素真实位置的，简单来说你 top: 5px 那就真的是离父容器上端 5px 或者偏离顶部定位 5px（这里我们不讨论 position 各种定位的破事） 但是你用 transform: transla...
CSS 之 过渡动画（transition）
weixin_45092437的博客
04-25 9824
transition属性用来设置元素的过渡动画，是过渡属性的简写形式，属性值可以包含四部分transition-property、transition-duration、ransition-timing-function和transition-delay，分别表示过渡动画的CSS属性、过渡动画所需的时间、过渡动画执行的速度曲线和过渡动画执行前需要等待的时间。过渡相关事件：transitionrun、transitionstart、transitionend、transitioncancel。
/* 文件路径: webapp/components/custom-form-modal/index.wxss */ .custom-form-modal { height: 80vh; border-top-left-radius: 8rpx; border-top-right-radius: 8rpx; display: flex; flex-direction: column; overflow: hidden; max-width: 100vw; box-sizing: border-box; } .modal-header { display: flex; justify-content: flex-start; align-items: center; padding: 10rpx 16rpx; /* 极小的内边距 */ border-bottom: 1rpx solid #eee; flex-shrink: 0; } .modal-header .title { font-size: 20rpx; /* 极小的标题字体 */ font-weight: bold; } .form-content { flex: 1; padding: 0 16rpx; /* 极小的内边距 */ overflow-y: auto; } .section-title { font-size: 18rpx; /* 极小字体 */ font-weight: bold; padding: 8rpx 0 4rpx; /* 极小的内边距 */ border-bottom: 2rpx solid #eee; margin-bottom: 4rpx; /* 极小的间距 */ } .form-row { display: flex; align-items: center; min-height: 40rpx; /* 极小的行高 */ padding: 4rpx 0; /* 极小的内边距 */ border-bottom: 2rpx solid #eee; flex-wrap: nowrap; } .row-title { min-width: 20%; font-size: 16rpx; /* 目标字体大小 */ color: #333; padding-right: 0rpx; /* 极小的间距 */ margin-right: 0rpx; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .title-text { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16rpx; /* 确保字体统一 */ } .row-content { width: 100%; flex: 1; display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; padding: 0 0 0 0; border-bottom: 1rpx solid #555555; gap: 4rpx; /* 极小的间隙 */ } /* 错误提示放在单独一行 */ .error-message { color: #ee0a24; font-size: 14rpx; /* 极小的字体 */ width: 100%; text-align: right; padding: 0 0 4rpx 0; /* 极小的内边距 */ margin: -4rpx 0 0 0; /* 负边距减小空间 */ } .time-picker, .select-picker { padding: 6rpx 0; /* 极小的内边距 */ font-size: 16rpx; /* 目标字体大小 */ text-align: left; flex: 1; min-width: 60%; } .select-container { display: flex; align-items: center; flex: 1; min-width: 70%; } .inline-button { margin-left: 4rpx; /* 极小的边距 */ flex-shrink: 0; font-size: 14rpx; /* 按钮字体更小 */ } .modal-footer { display: flex; padding: 8rpx 16rpx; /* 极小的内边距 */ gap: 12rpx; /* 极小的间距 */ border-top: 1rpx solid #eee; flex-shrink: 0; } .modal-footer van-button { flex: 1; height: 40rpx; /* 极小的按钮高度 */ line-height: 40rpx; font-size: 16rpx; /* 目标字体大小 */ } /* 加载状态样式 */ .loading-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 100; background: rgba(255, 255, 255, 0.8); padding: 12rpx; border-radius: 8rpx; font-size: 16rpx; /* 目标字体大小 */ } /* 横屏适配 */ @media (orientation: landscape) { .custom-form-modal { height: 90vh; width: 80vw; margin: 0 auto; border-radius: 8rpx; } .form-row { max-width: 80%; min-height: 40rpx; /* 横屏也保持紧凑 */ } .row-title { max-width: 80rpx; flex: 0 0 25%; font-size: 18rpx; /* 横屏稍大 */ } .section-title { font-size: 20rpx; padding: 8rpx 0 4rpx; } .title-text { font-size: 18rpx; } .time-picker, .select-picker { font-size: 18rpx; } .modal-footer van-button { height: 50rpx; line-height: 50rpx; } } /* 超紧凑模式 */ .ultra-compact .form-row { min-height: 32rpx; padding: 2rpx 5rpx; } .ultra-compact .row-title { font-size: 14rpx; } .ultra-compact .title-text { font-size: 14rpx; } .ultra-compact .row-content { gap: 2rpx; } .ultra-compact .time-picker, .ultra-compact .select-picker { padding: 4rpx 0; font-size: 14rpx; } .ultra-compact .modal-footer { padding: 4rpx 16rpx; } .ultra-compact .modal-footer van-button { height: 32rpx; line-height: 32rpx; font-size: 14rpx; } .ultra-compact .error-message { font-size: 12rpx; } /* 文件路径: webapp/components/custom-form-modal/index.wxss */ /* 添加以下样式 */ /* 自定义下拉框容器 */ .filter-picker-container { flex: 1; min-width: 70%; } /* 调整下拉框高度 */ .filter-picker { height: 30rpx; /* 极小的下拉框高度 */ } /* 输入框样式调整 */ .picker-input { height: 30rpx; /* 极小的输入高度 */ line-height: 30rpx; font-size: 14rpx; /* 极小的字体 */ padding: 4rpx 8rpx; /* 极小的内边距 */ } /* 下拉选项样式 */ .dropdown-item { padding: 6rpx 10rpx; /* 极小的内边距 */ font-size: 14rpx; /* 极小的字体 */ } /* 按钮与下拉框的对齐 */ .select-container { display: flex; align-items: center; gap: 4rpx; /* 极小的间距 */ } .inline-button { height: 30rpx; /* 与下拉框高度一致 */ line-height: 30rpx; padding: 0 8rpx; /* 极小的内边距 */ font-size: 12rpx; /* 极小的字体 */ } 优化简化去重
最新发布
08-02
但是，代码中存在一些重复和可以优化的地方。我们的目标是优化、简化和去重。 优化点： 1. 合并重复的样式声明。 2. 移除不必要的样式。 3. 利用CSS变量（如果微信小程序支持，但微信小程序wxss不支持CSS变量，...
css-switch:使用 CSS 重新创建 iOS 切换开关
07-03
在本文中，我们将深入探讨如何使用CSS来重现iOS设备上的切换开关效果。这种效果常见于各种应用程序和网站中，用于用户界面的开/关选择。iOS的切换开关以其平滑的动画和直观的设计而闻名，我们可以利用CSS的力量来...
} 一个最长的用法就是：让弹出的元素始终位于页面的中间位置。首先position: fixed; top: 50%; left: 50%;让这个图片的左上角处在屏幕的正中间。然后让他上下位移transform:translateX(-50%) translateY(-50%);就是相对于这个图片的宽高的50%，也就是一半。移回来。 .center-vertical {    position: fixed;    top: 50%;    left:50%;      -webkit-transform: translate(-50%, -50%);    -ms-transform: translate(-50%,-50%);    -moz-transform: translate(-50%,-50%);    -o-transform: translate(-50%,-50%);    transform: translate(-50%, -50%);}肖肖肖丽珠关注120分享专栏目录CSS实现垂直居中的4种思路详解09-24CSS实现垂直居中是网页布局中的常见需求，本文将详细讲解四种不同的方法，帮助开发者更好地理解和运用这些技巧。 1. **行高line-height实现单行文本垂直居中** 单行文本的垂直居中可以通过设置`line-height`来实现...CSS进阶之形变与动画 (一)：transform、垂直居中总结、transition动画、animation动画、vertical-alignGood Good Study,Day Day Up! 1万+水平居中的方案行内级元素：设置父元素的 text-align:center块级元素：设置当前块级元素(要有宽度) margin:0 auto绝对定位：元素有宽度的情况下，设置left0、right0、margin:0 auto；flex布局：通过设置justify-content: center;垂直居中的方案绝对定位： 元素要有高度的情况下，设置top0、bottom0、margin:auto 0;flex布局 通过设置align-CSS 盒子垂直居中的方法_css transform居中3-15margin-top: 50%; // 向下移动父盒子的一半 transform: translateY(-50%); // 向上移动自身盒子的一半 } /* 通过 定位来移动*/ .father { width: 500px; height: 500px; background-color: skyblue; border: 1px solid #000; margin: 0 auto; position: relative; } .son { width: 200px; height...CSS进阶之形变与动画 (一):transform、垂直居中总结、transition动画、a...3-13translate的水平垂直居中 水平居中:使用left/translate,其中需要知道left是基于包含块的宽度,translate是基于自身的大小。 垂直居中: 使用top/translate,其中需要知道top是基于包含块的高度,translate是基于自身的大小。 .shuipin{ position: relative; left: 50%; transform: translateX(-50%); } .chuizhi{ position...transform 垂直居中weixin_33948416的博客 9212019独角兽企业重金招聘Python工程师标准>>> ...css水平垂直居中方案最新发布m0_73351190的博客 187本篇文章介绍比较常见的三种方法。...的元素水平垂直居中的总结_绝对定位位水平垂直居中 transform...3-15DOCTYPEhtml>元素的垂直居中.elem1{position:relative;width:500px;height:500px;border:1px solid red; } .elem2{position:absolute;width:200px;height:200px;border:1px solid#9521de;left:50%;top:50%;transform:translate(-50%,-50%); } 效果如下: 不过transform是css3里面的内容,所以存在兼容性问题;IE9...实现div元素在整个屏幕的的垂直居中之translateY(-50%)的利用_tran...3-14本文介绍了如何使用CSS的transform: translateY(-50%)实现div元素在整个屏幕的垂直居中。通过设置position: absolute,top: 50%,right: 20px,再结合transform: translateY(-50%),即使元素高度不确定,也
03-19
- 接着，通过设定 `top: 50%` 和 `left: 50%` 将该子元素移动到父容器中心位置。 - 最后，利用 `transform: translate(-50%, -50%)` 对齐子元素本身的内容区域至完全居中状态。这里 `-50%` 表示向左上方分别移动半个...
微信小程序CSS优化技巧：提升滚动效果的渲染性能
![微信小程序CSS优化技巧：提升滚动效果的渲染性能]... 微信小程序CSS优化概述 微信小程序作为当下流行的移动端应用开发平台，对于开发者而言，实现优雅而高效的CSS布局和渲
掌握CSS模态项目：创建简易互动界面
2. CSS样式：CSS用于美化和定位模态窗口。对于遮罩层，我们通常会设置其背景色和透明度来降低背景内容的可见性。对于内容层，我们需要定位其在页面中的具体位置，以及通过CSS动画来实现打开和关闭时的过渡效果。 ``...
一篇文章吃透 CSS3 属性： transition过渡 与 transform动画
热门推荐
weixin_52212950的博客
09-28 1万+
transition 过渡与transform动画 这两个新属性的参数确实比较复杂，它们可以做出 CSS 的一些基础动画效果，平移，旋转，倾角......等等，这些也是我早期学习 CSS 的难记易忘之处，今天给大家详细总结出来。一：transition 过渡transition 可以做出 CSS 的过渡效果，例如要过渡的属性名称，要过渡的时间，过渡的延迟等待时间，过渡的速度变化（过渡类型）
HTML5 考试题（四）
HAI6545的博客
12-18 9580
一、单选题（共20题，每题2分） 1.下面选项中,可以设置页面中某个DIV标签当内容溢出的时候出现滚动条的是( ) Aoverflow:hidden Bdisplay:block Coverflow:scroll Ddisplay:scroll; 正确答案:C 解析:超出显示滚动条用的是overflow：auto或者scroll； 2.以下各选项描述正确的是( ) A标题标签、段落标签、<span>标签都是块级元素 B<div>...
css——利用translate让元素居中
叶落无痕的博客
08-30 1237
css——利用translate让元素居中 父元素： position: relative; 居中元素： position: absolute; top: 50%; //基于父元素 left: 50%; //基于父元素 transform: translate(-50%, -50%); //基于自身 注意：此方法可能会导致像素模糊问题，因为CSS 的 transform： translate 属性在作元素位移时，极有可能发生像素点无法对齐的情况。正常情况下，元素的边缘应该和像素..
关于CSS transition:translate导致字体模糊的解决办法
编程架构三分天下：分层、分治、分时序。
09-23 4078
请依次验证以下几种情况： 1 是否使用了translate3d 使用translate3d可能使浏览器开启GPU加速，GPU加速的实现原理会导致模糊，详见segmentfault为何使用css3 translate3d会导致显示模糊。不过这一点，个笔者没有进行验证。 2 translate计算出元素的最终偏移位置不是整数像素 注意位置和大小的计算避免出现非整数结果即可避免这个问题。 3 在Chro...
firefox css3 transform样式 位置偏移问题解决
weixin_30797027的博客
03-11 1044
最近一个项目要做一个图片缩放特效，如下： 原始是小图片 点击右下角的加号后变成大图片 再点击大图片右下角的缩小标记，又回到初始状态。 因为这个特效用到的图片大部分不是很大，于是准备利用jquery来改变图片边框的宽高，再用css3的transform属性来改变图片的大小。 html代码如下： <div class="click_to_zoom">&lt...
关于left,top和translate2d以及translate3d性能问题的详讲
南宫的CG世界
05-30 1579
left和top的性能高还是translate2d的性能高？听说translate3d的性能最高？
css left top和transform的区别
liuhua3000的博客
01-24 1700
left top在选择%计算时候，是按照父节点的长宽来位移，而transform的%是按照自身节点的宽高来位移。
translate和left
ywb201314的专栏
11-01 1673
1. translate 产生的位移始终是相对于元素最初位置，而left是相对于元素当前位置。 因为translate和left产生的位移可以叠加，而两次translate产生的位移只会以最后一次为准，两次left产生的位移也只会以最后一次为准。 2.translate和left产生的位移互不影响，不会因为translate的位移设置为0，而影响left的位移，反之亦然。 3
CSS3 动画卡顿性能优化解决方案
lx583274568的专栏
08-07 4674
https://segmentfault.com/a/1190000013045035 在使用css3 transtion做动画效果时，优先选择transform，尽量不要使用height，width，margin和padding 在使用height，width，margin，padding作为transition的值时，会造成浏览器主线程的工作量较重，例如从margin-left：-20px...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值