CSS

在实现小模块的tab标签页切换时，可以添加内容翻转动效，增加趣味性及视觉效果。这种点击翻转动画通常用于卡片类的展示，以下为卡片翻转示例。 通过css的一些属性：perspective、backface

场景：用水球展示数据百分占比，并添加动态水波纹效果。 实现 原理：将父元素设置为圆形，隐藏多余部分；根据波纹数添加子元素，并设置为圆形添然后加背景色；把子元素定位在父元素下方，并添加旋转动画，呈现效果

SVG 意为可缩放矢量图形，使用 XML 格式定义图像。SVG 代码写在根元素 <svg>标签中，表示图形容器的大小和属性。其中，width 和 height 属性指定画布的宽度和高度，viewBox

1. linear-gradient基础 2. 重复线性渐变：repeating-linear-gradient 3. 记事本效果 4. 叠加效果 5. 进度条效果

1. 边距折叠 根据 BFC 布局规则，“box 在垂直方向上的间距由 margin 属性决定，但是同一个 BFC 的两个相邻 box 的 margin 会出现边距折叠现象”。 (1) 现象：.div

1. height: 100% 和 height: 100vh 重点：当元素没有内容的时候，设置height:100%，该元素不会被撑开，此时高度为0; 但是设置height:100vh，该元素会被撑

样式分析：1）实现该效果需要通过鼠标触发，可以用 :hover 实现 2）运用 transform 实现放大缩小效果 3）利用 transition 增加动画自然过渡效果……