2025年css3新特性visibility（2025年css3新特性flex）

交互动效大师:小程序流畅动画实现指南

1、进阶技巧：复杂交互动效实现手势驱动动画通过onTouchMove事件获取触摸位移，动态更新动画状态。

2、点击区域：按钮和交互元素的点击区域应足够大（至少 44 px x 44 px），以提高点击的准确性和舒适性。小程序交互设计规范 动效和过渡动效使用：使用动效提升用户体验，但避免过度使用。常见的动效包括加载动画、页面切换动画和按钮点击反馈。

3、第一步：在AE中用预设效果制作出自己满意的礼物特效。第二步：将制作的特效动画导出为序列帧，然后将序列帧重新导入AE中，新建预合成将每一帧拼接起来。第三步：将制作好的序列帧预合成放置到礼物特效合成中，打开SVGA插件输出SVGA礼物特效动画。

4、小程序UI设计的重要性 小程序作为一种轻量级的应用，其用户体验直接决定了用户的留存率和活跃度。优秀的UI设计能够显著提升用户的操作效率，降低学习成本，使用户在使用小程序时感受到流畅、便捷和舒适。同时，美观的界面也能增加用户的视觉享受，提升品牌形象，从而增强用户黏性。

重排与重绘

1、性能影响与关系 性能影响：重排：由于需要重新构造渲染树，因此性能开销较大，特别是在复杂页面中，频繁的重排会导致性能问题。重绘：虽然只涉及元素的外观变化，不需要重新构造渲染树，但频繁的重绘也会消耗一定的性能，尤其是在大量元素需要重绘时。

2、完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程称为重绘。重绘是指当渲染树中的一些元素需要更新属性，而这些属性只是影响元素的外观、风格，而不会影响布局时发生的过程。比如，当元素的背景颜色（background-color）发生改变时，就会触发重绘。

3、回流 （Reflow）定义：会引起DOM树结构变化，页面布局变化的行为叫回流，且回流一定伴随重绘。

CSS“隐藏”元素的几种方法的对比

display： none和visibility： hidden是最常用的隐藏元素方法，分别适用于需要完全移除元素和保留元素空间但不显示的场景。opacity： 0适用于需要保留元素空间并通过透明度实现渐变效果的场景。设置height、width等盒模型属性为0和设置position与left、top等属性将元素移出屏幕外等方法适用于需要灵活控制元素显示状态的场景。

CSS 隐藏元素的10种实用方法如下：使用 display： none；说明：使元素彻底消失，不占据页面空间。特点：触发回流重绘。设置 opacity： 0；说明：元素透明度变为0，保留结构，不触发回流，仅重绘。特点：元素仍占据页面空间，但不可见。使用 visibility： hidden；说明：元素不可见，但保留占据的空间。

csshover显示隐藏visib使用css设置div隐藏（display：none），并且设置div内的文字颜色为红色（color：red）。使用css设置li的hover属性，实现当鼠标放在li标签内的a链接上面时，通过把div的display属性设置为block，把div显示出来。

覆盖隐藏：通过在元素上方放置相同背景色的元素，视觉上隐藏，代码复杂度增加。 缩小尺寸：调整尺寸如width、height等，可能需要配合overflow：hidden，便于动画且性能优于transform。 使用伪元素或display属性：使用：after伪元素或调整display属性（如absolute）实现，但代码量会增加。

CSS隐藏显示元素的方法主要有以下几种：使用display属性：display： none； 可以隐藏元素，此时元素会从文档流中移除，不占用任何空间。display： block； 或 display： inline； 等可以显示元素，根据指定的display值以块级元素或内联元素等形式显示。

使用rgba（）。注意对图像背景元素可能不适用。 Clip-pathclip-path定义剪切区域，如circle（0）可完全隐藏元素，但兼容性可能受限。 Absolute Positioning元素绝对定位到屏幕外，隐藏但保持原始尺寸，但可能影响布局和交互。总之，根据实际需求，灵活运用这些CSS隐藏元素方法，确保页面的优化和用户体验。