因为涉及的内容较多，我分5篇内容发出来，好逐一进行让大家消化这些内容，本次我把前13-24个CSS重难点整理出来，具体内容如下： 13、如何判断元素是否到达可视区域（图片懒加载原理）？...24、transform先平移在旋转和先旋转再平移有什么区别？ 13、如何判断元素是否到达可视区域（图片懒加载原理）？...20、为什么有时候用translate来改变位置而不是定位?...元素的位置通过 left、top、right、bottom 属性进行规定。 fixed 生成固定定位的元素，相对于浏览器窗口进行定位。...而当页面滚动超出目标区域时，它以固定定位呈现，否则以相对定位呈现。
换句话说，当文档结构（DOM树）已经构建完毕，但外部资源如样式表和图片可能还在加载时，这个事件就会被触发。...; });在这个例子中，当 DOMContentLoaded 事件触发时，事件处理函数会被调用，然后它会找到ID为 myElement 的DOM元素，并设置其文本内容为 "Hello, world!"...DOMContentLoaded 事件只会在文档解析完成后触发一次。如果你多次添加监听器到这个事件上，它们都会被调用，但是每次都是在第一次解析完成后。...还有一个 load 事件，它会在整个页面及所有依赖资源如样式表和图片都完成加载后触发。如果你需要等待所有资源都加载完毕再执行代码，你应该使用 load 事件而不是 DOMContentLoaded。...transformtransform是CSS中一个强大的属性，它允许开发人员对元素进行二维或三维转换，从而改变元素的形状、大小和位置。
，则使用all关键字 大部分属性都支持过渡效果，注意过渡时必须是从一个有效数值向另外一个有效数值进行过渡（auto不是有效数值，过渡动画效果不会生效） 1.2 transition-duration...，则使用all关键字 大部分属性都支持过渡效果，注意过渡时必须是从一个有效数值向另外一个有效数值进行过渡 */ /* transition-property...每次都是这样 reverse 从 to 向 from 运行 每次都是这样 alternate 从 from 向 to运行 重复执行动画时反向执行 alternate-reverse 从 to 向 from...> 5.transform 之 z轴平移 z轴平移，调整元素在z轴的位置，正常情况就是调整元素和人眼之间的距离，距离越大，元素离人越近 z轴平移属于立体效果（近大远小），默认情况下网页是不支持透视，如果需要看见效果...，调整元素在z轴的位置，正常情况就是调整元素和人眼之间的距离， 距离越大，元素离人越近 z轴平移属于立体效果（近大远小），默认情况下网页是不支持透视
平行四边形 有没有办法只让容器的形状倾斜而保持其内容不变呢？或许你会想到嵌套两层元素，外层skew（）,对内容在应用一次反相skew变形，从而抵消变形的效果。...但是意味着我们不得不使用一层额外的HTML元素包裹内容.有些累赘 解决方案：伪元素，把样式应用到伪元素上，对伪元素进行变形，再把伪元素定位+层级放到到住宿元素下面 光说不练，假把式试一试 8....缓动效果 给过渡和动画加上缓动效果是一种流行的表现手法，可以让界面显得更加生动和真实，但是在现实世界中，物体从a到b点的移动往往不是 完全匀速的，因此我们需要对动画效果加以调整，使得更加逼真 解决方案：...沿环形平移的动画 当一个元素沿着环形进行移动的同时，我们希望它能保存自己原本的的朝向。那我们该如何去实现呢？或许你已经有了你的方法啦！...解决方案：:checked伪类，这个伪类只有在复选框被勾选时才会匹配，不论是由用户交互触发，还是有脚本触发 当 元素与复选框关联之后，可以起到触发开关的作用 label 不是复选框那样的替换元素
通过 CSS 动画进行计时，避免同步阻塞卡顿的问题。 前置知识 伪元素 伪元素允许你对被选择元素的特定部分修改样式。 ::after 用来创建一个伪元素，作为已选中元素的最后一个子元素。...data-* 允许我们在标准内于 HTML 元素中存储额外的信息，而不需要使用类似于 classList 。...attr() CSS 表达式 attr() 用来获取选择到的元素的某一 HTML 属性值，并用于其样式。它也可以用于伪元素，属性值采用伪元素所依附的元素。...所以，上述 animation-delay 就是让固定周期的动画，稍后开始，等待的时间就是依据初始时间计算而来。...animation-delay 指定从应用动画到元素开始执行动画之前等待的时间量 解释清楚了延迟的作用，但问题是：首次的动画如何执行？
用CSS做动画 那么，我们如何将布局变化做成动画呢？...另一方面，浏览器可以更快地对 transform 等CSS属性进行动画处理，因为它们不影响布局。 注意，随着蓝色方框的增长，灰色方框保持原状!...所以我们先从useEffect钩子中删除依赖数组，使钩子每次渲染都能运行。 试着触发几次布局变化，检查控制台，看看显示的x和y值是什么。...有了这个见解，我们也可以通过使用中心之间的距离而不是左上角的点来解决这个问题。 纠正子元素的变形 到目前为止，我们已经能够制作一个布局动画，可以无缝过渡到大小和位置的变化。...试着移动下面的滑块，注意文字是如何保持相同大小的，而不管广场的大小如何。 现在，如何将其与我们的布局动画相结合呢？
当absolute元素覆盖另一个absolute元素，且HTML端不方便调整DOM的先后顺序时，需要设置z-index: 1。...用图片代替 协商能否改设计稿 浏览器是如何判断元素是否匹配某个 CSS 选择器？...transform使浏览器为元素创建一个 GPU 图层 translate改变位置时，元素依然会占据其原始空间 而改变绝对定位会触发重新布局，进而触发重绘和复合。 改变绝对定位会使用到 CPU。...因此translate()更高效，可以缩短平滑动画的绘制时间。 如果实现一个高性能的CSS动画效果？...高性能CSS3动画 动画中尽量少使用能触发layout和paint的CSS属性，使用更低耗的transform、opacity等属性 尽量减少或者固定层的数量，不要在动画过程中创建层 尽量减少层的更新（
css是用来对html进行修饰的一门语言。...5、Flex布局 Flex布局的容器是一个伸缩容器，首先容器本身会更具容器中的元素动态设置自身大小;然后当Flex容器被应用一个大小时(width和height)，将会自动调整容器中的元素适应新大小。...6、transition(过渡)和transform(旋转) 应用transform可以对元素进行平移(translate)、旋转(rotate)、放大缩小(scale)、倾斜(skew)等处理，而transition...7、动画Animation Animation首先需要设置一个动画函数，然后以这个动画的方式来改变元素的css属性之的变化，动画可以被设置为永久循环演示。...和transition相比，animation设置动画效果更灵活更丰富，二者还有一个区别是：transition只能通过主动改变元素的css值才能触发动画效果，而animation一旦被应用，就开始执行动画
简介： css基础动画 1.CSS3变形 CSS3变形是一些效果的集合 如平移、旋转、缩放、倾斜效果 每个效果都可以称为变形（transform），它们可以分别操控元素发生平移、旋转、缩放、倾斜等变化...()：倾斜函数，取值是一个度数值 3.2D位移 3.2D缩放 4.2D倾斜 5.2D旋转 6.小结 rotate( )函数只是旋转，而不会改变元素的形状 skew( )函数是倾斜，元素不会旋转...，会改变元素的形状 7.CSS3过渡 transition呈现的是一种过渡，是一种动画转换的过程，如渐现、渐弱、动画快慢等 CSS3 transition的过渡功能更像是一种“黄油”，通过一些CSS的简单动作触发样式平滑过渡...，表示动画无限次播放 动画的播放方向（animation-direction） normal，动画每次都是循环向前播放 alternate，动画播放为偶数次则向前播放 动画的播放状态（animation-play-state...表示会在向元素应用动画样式时迅速应用动画的初始帧 both表示元素动画同时具有forwards和backwards的效果
关注 JS 太久，会养成任何功能都用 JS 实现的习惯，而忘记了 HTML 与 CSS 也具备一定的功能特征。其实有些功能用 JS 实现吃力不讨好，我们要综合使用技术工具，而不是只依赖 JS。...，但一旦其出现在视窗时，当 top 超过 2em 后就会变为 fixed 定位并保持原位。...暗色主题 虽然直觉上暗色主题好像是一种定制业务逻辑，但其实因为暗色主题太过于普遍，以至于操作系统和浏览器都内置实现了，而 CSS 也实现了对应的方法判断当前系统的主题到底是亮色还是暗色：prefers-color-scheme...幻灯片滚动 幻灯片滚动即每次滚动有固定的步长，把子元素完整的展示在可视区域，不可能出现上下或者左右两个子元素各出现一部分的 “割裂” 情况。...，在滚轮触发、鼠标点击滚动条松手或者键盘上下按键时，scroll-snap-type: y mandatory 可以精准捕捉这一垂直滚动行为，并将子元素完全滚动到可视区域。
⽽translate改变位置时，元素依然会占据其原始空间，绝对定位就不会发⽣这种情况。 2.什么是硬件加速？ 硬件加速就是将浏览器的渲染过程交给GPU处理，而不是使用自带的比较慢的渲染器。...常见的动画效果有很多，如平移、旋转、缩放等等，复杂动画则是多个简单动画的组合。...属性值： percentage：字体显示的大小； auto：默认，字体大小会根据设备/浏览器来自动调整； none:字体大小不会自动调整 html { -webkit-text-size-adjust...CSS动画 优点 浏览器可以对动画进行优化； 代码相对简单,性能调优方向固定； 对于帧速表现不好的低版本浏览器，CSS3可以做到自然降级，而JS则需要撰写额外代码； 缺点 运行过程控制较弱,无法附加事件绑定回调函数...css3动画丰富,有些动画效果，比如曲线运动,冲击闪烁,视差滚动效果，只有js动画才能完成 CSS3有兼容性问题，而JS大多时候没有兼容性问题； 缺点 代码的复杂度高于CSS动画 JavaScript
清晰易读：对于那些结构与行为分离的写法，使用sass/less编写属性时结构会更清晰易读，减少很多无用或少用的类，保持css文件的整洁性和观赏性 确保一致：减少修改类而有可能导致样式失效的问题，有时修改类但未确保...伪元素在HTML代码里未声明却能正常显示，在页面渲染时看到这些本来不存在的元素发挥着重要作用。:before和:after是两个很重要的伪元素，早在CSS2就出现了。 起初伪元素的前缀使用单冒号语法。...提升过程可用绝对定位将遮罩层固定在底部，通过调整margin-bottom平移遮罩层。...复制代码 到此再优化一些细节，通过Chrome Devtools检查.wave得知其尺寸为134x134，每次往上平移两个伪元素只能1px那样递增。...现在想将其平移100次就能填充整个球体，那么就需按照134/100这个比例改造变量计算公式。 将--offset声明为--offset:0，取值区间在0~100而不是0px~100px。
「清晰易读」：对于那些结构与行为分离的写法，使用sass/less编写属性时结构会更清晰易读，减少很多无用或少用的类，保持css文件的整洁性和观赏性 「确保一致」：减少修改类而有可能导致样式失效的问题，...伪元素在HTML代码里未声明却能正常显示，在页面渲染时看到这些本来不存在的元素发挥着重要作用。:before和:after是两个很重要的伪元素，早在CSS2就出现了。...提升过程可用绝对定位将遮罩层固定在底部，通过调整margin-bottom平移遮罩层。...到此再优化一些细节，通过Chrome Devtools检查.wave得知其尺寸为134x134，每次往上平移两个伪元素只能1px那样递增。...现在想将其平移100次就能填充整个球体，那么就需按照134/100这个比例改造变量计算公式。 将--offset声明为--offset:0，取值区间在0~100而不是0px~100px。
-- 选择器，基本作用是用于定位网页中的元素，进行样式美化，选取的是一组元素，不是一定是单个； 标签选择器，语法：标签名{声明1：声明2...} -->/ h2{ color: #FF0000; }...； 6.3 fixed 固定定位 偏移设置： left、right、top、bottom； 类似绝对定位，不过区别在于定位的基准不是祖先元素，而是浏览器窗口； 使用场景：在窗口左右两边的固定广告...、返回顶部图标、吸顶导航栏等； 6.4 z-index属性 调整元素定位时重叠层的上下位置 ； 1.z-index属性值：整数，默认值为0 ； 2.设置了positon属性时，z-index属性可以设置各元素之间的重叠高低关系...； 3.z-index值大的层位于其值小的层上方； 7、动画 7.1 变形 transform 函数 说明 translate() 平移函数，基于X、Y坐标重新定位元素的位置 scale() 缩放函数...； 7.3 过度的触发机制 1.伪类触发 ：hover 鼠标悬停和划过时的显示效果 ：active 控制按钮被点击时的显示效果 ：focus 获得聚焦对象的元素 ：checked 选中 2.媒体查询
如，一个页面被分为两层，当进行下一帧的渲染时，前一帧可能需要实现某些变换（平移、缩放、阴影等），此时合成器只需要将两个层进行相应处理，显卡处理这些操作很容易，这样合成过程时间就非常短了。...还有一种情况，通过 CSS 实现一些变形、渐变、动画等特效，这由 CSS 触发，并且在合成线程上执行，这个过程叫合成。因为不会触发重排或重绘，而且合成操作速度很快，所以执行合成时效率最高的方式。...CSS 动画依然能继续执行 要尽量利用好 CSS 合成动画，如果能让 CSS 处理动画，就尽量交给 CSS 来操作 如果知道某个元素将来可能执行动画操作，也可以通过标记 will-change 将元素抽取单独图层...但是对于一些复杂的页面和项目，DOM 结构非常复杂，而且可能需要不断去修改 DOM 树，每次操作 DOM 渲染引擎都需要进行重排、重绘或合成等操作，由于页面和 DOM 复杂，这些操作会很耗时，带来很大的性能问题...什么是虚拟 DOM 虚拟 DOM 要解决的问题： 将页面改变的内容应用到虚拟 DOM 上，而不是直接应用到 DOM 上 变化被应用到虚拟 DOM 上时，虚拟 DOM 并不立刻去渲染页面，而仅仅是调整虚拟
HTML&CSS： 浏览器内核 盒模型、flex 布局、两/三栏布局、水平/垂直居中； BFC、清除浮动； css3 的选择器；css 的继承 css3 动画、H5 新特性。...如何设置标准模型和 IE 模型: 如果 doctype 协议缺失，会由浏览器自己界定，在 IE 浏览器中 IE9 以下（IE6.IE7.IE8）的版本触发怪异模式，其他浏览器中会默认为 W3c 标准模式...计算 BFC 的高度时，浮动元素也参与计算 只要元素满足下面任一条件即可触发 BFC 特性： body 根元素 浮动元素：float 除 none 以外的值 绝对定位元素：position (absolute...每次认证用户发起请求时，服务器需要去创建一个记录来存储信息。当越来越多的用户发请求时，内存的开销也会不断增加。...客户端每次访问都传递 token，服务端解密 token，就知道这个用户是谁了。通过 cpu 加解密，服务端就不需要存储 session 占用存储空间，就很好的解决负载均衡多服务器的问题了。
增量布局：是指对标记为 “dirty” 的渲染对象进行布局。一般是异步执行的，浏览器将增量布局的 “reflow 命令” 加入队列，而调度程序会触发这些命令的批量执行。...但是请求样式信息（例如 offsetHeight ）的脚本可同步触发增量布局。 为避免对所有细小更改都进行整体布局，浏览器采用了一种 dirty 位系统。...不一定每帧都总是会经过管道每个部分的处理，实际上，不管是使用 JavaScript、CSS 还是网络动画，在实现视觉变化时，管道针对指定帧的运行通常有三种方式: 1.JS / CSS > 样式 > 布局...只有元素提升为合成层后，transform 和 opacity 才不会触发 paint，如果不是合成层，则其依然会触发 paint。...按照渲染流水线的顺序可知，回流一定会触发重绘，而重绘不一定发生回流 如果想知道更改任何指定 CSS 属性将触发上述三个版本中的哪一个，请查看 CSS 触发器 (https://csstriggers.com
这样做的好处是，创建新的图层代价很高，而等到需要时匆忙地创建，不如一开始直接创建好。...动画层级的控制的意思是尽量让需要进行 CSS 动画的元素的 z-index 保持在页面最上方，避免浏览器创建不必要的图形层（GraphicsLayer），能够很好的提升渲染性能。...它能对动画进行加速，但同时也存在相应的加速坑！ 简单来说，浏览器为了提升动画的性能，为了在动画的每一帧的过程中不必每次都重新绘制整个页面。...而我们希望需要硬件加速的 .swiper 保持在最上方，每次动画过程中只会独立重绘这部分的区域。...GPU 硬件加速，一定要注意元素层级的关系，尽量保持让需要进行 CSS 动画的元素的 z-index 保持在页面最上方。
随着排版方向的变化而变化，而不是固定死的某一个方向。...混合模式 (Blend Modes) ，是一种 CSS 数据类型，也就是我们常说的混合模式，可以用来描述当元素重叠时，颜色应当如何呈现。...CSS 中存在两种尺寸：内在尺寸（intrinsic）和外在尺寸（extrinsic）。元素的 width、height 设置的固定属性值，就是指外部尺寸。而内部尺寸，则是由元素包含的内容决定的。...touch-action touch-action 可以用于设置触摸屏用户如何操纵元素的区域（平滑、缩放、单指平移手势、手指平移和缩放等等），一般我们会在适配移动端操作的网站上会用到，变化趋势也不大，不再多说...will-change 可以在行为触发之前告诉浏览器我们要进行一些什么样的变化操作，让浏览器好有个准备，启动 GPU 为你渲染动画。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
