- 博客(11)
- 收藏
- 关注
原创 滚动触发的视频和文本动画效果
利用滚动触发器 ScrollTrigger 来控制页面元素的动画和状态变化,通过动态调整CSS属性来实现缩放、透明度变化和平移动画
2024-06-18 14:58:21
76
原创 数字滚动效果
在当前模块到达指定的可视区域,则会进行数字滚动效果。如只需初始化的时候执行一遍,只需添加observer.unobserve(entry.target);即可
2024-06-18 14:26:41
96
原创 理解CSS选择器的计算顺序:从右到左
在Web开发中,CSS(层叠样式表)是关键的技术之一,用于为网页添加样式和布局。要有效地使用CSS,了解CSS选择器的计算顺序至关重要。接下来将深入探讨CSS选择器的计算顺序,解释为什么CSS选择器从右到左计算。
2023-09-26 17:34:02
169
1
原创 gsap实现滚动切换图片
创建一个滚动动画,随着用户滚动页面,它会根据滚动位置动态更改显示的图像。动画在指定的具有ID 'yourElementId'的元素进入视口时触发。GSAP用于控制动画,使图像在用户滚动时平滑过渡。
2023-09-21 13:48:19
443
原创 css权重
这些位数的值会根据选择器的数量相应增加。如果有多个选择器,它们的权重值将通过相应位数的累加来计算。所以,如果有多个Id选择器,它们的权重值会增加到。权重值用于确定哪些样式规则应该应用到元素上,当多个规则具有相同的权重时,后面的规则会覆盖前面的规则,除非其中某个规则带有。具有最高的优先级,无法被其他权重值覆盖。这些权重值都是浏览器内核里面真实存在的。而权重值 是256进制,比如下面有四位。Class|属性|伪类 权重值:10。标签选择器|伪元素 权重值:1。行间样式 权重值:1000。Id 权重值:100。
2023-09-15 14:50:15
41
原创 浏览器的渲染流程
导致reflow的代码,把reflow的时间点延迟到结束后进行,但在此过程中,如果遇到了获取尺寸和位置的代码,浏览器会迫不得已立即reflow。将CSS写到页面开头,是为了让浏览器尽快读取并解析样式,避免给用户看到丑陋的页面,也是为了避免页面闪烁。浏览器一边reflow,一边进行生成对应的图形绘制到页面,绘制的过程称之为repaint。完成后,页面中的所有元素的位置和尺寸就确定下来了,即将被渲染到页面。绘制的过程是靠GPU完成的,速度非常快,因此,这个步骤会在页面之后的运行过程中不断的重复,
2023-09-10 11:56:20
52
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人