CSS特效

clip-path

应用场景

• 眨眼睛
• 移入移出方形
• 推入
• 文字落下

示例代码

参考资料

• clip-path MDN

css变量

应用场景

• 改变svg局部颜色

示例代码

参考资料

• Using_CSS_custom_properties MDN

黏性定位

应用场景

• 吸顶效果

示例代码

参考资料

• position MDN

滤镜

应用场景

• 阴影效果
• 磨砂玻璃
• 手机快充效果
• 页面模糊效果

示例代码

参考资料

• filter MDN

transition

应用场景

• 动画

示例代码

参考资料

• transition MDN

houdini api

应用场景

• 阴影背景图旋转

示例代码

参考资料

• Houdini_APIs MDN

css选择器 ::first-letter

应用场景

• 改变段落文案首个字母单词样式

示例代码

参考资料

• ::first-letter MDN

css选择器 :has

应用场景

• 表单条目添加星号

示例代码

参考资料

• :has() MDN

css选择器 :focus-within

应用场景

• 表单输入框获取焦点后，改变父级div背景色

示例代码

参考资料

• :focus-within MDN

css选择器 ::selection

应用场景

• 改选中后文本的样式

示例代码

参考资料

• ::selection MDN

flex + margin

应用场景

示例代码

参考资料

• ::selection MDN