Vanessa

精选常见交互，帮助您拥有简洁酷炫的站点

布局

• 清除浮动
• 重置 box-sizing
• 宽高保持一致
• table 居中显示
• 平均分配子元素
• 盒子模型居中
• 垂直小技巧
• 网格居中
• 最后一个元素占满剩余可用高度
• 使用 transform 进行居中
• 多行文本截断
• 文本截断

视觉

• 圆
• 自定义滚动条
• 自定义文本选中样式
• 渐变阴影
• 文本风化效果
• 图片适配
• 全屏
• 文本渐变
• 细而明显的边框
• :not 选择器
• 逃离屏幕
• 对溢出的内容进行渐变
• 漂亮的下划线
• 重置所有样式
• 带形状的分割线
• 系统字体栈
• 三角形
• 斑马条纹列表
• :is/:matches/:any 选择器

动画

• 弹跳加载
• 按钮边框动画
• 🍩式的旋转
• 简单的变量
• 高度变化时的过渡效果
• 阴影盒子的动画效果
• 下划线动画

交互

• 选不中我
• 子元素选中后改变父元素的样式
• 跟踪光标的渐变效果
• 当鼠标移上或聚焦时弹出菜单
• 相邻兄弟视觉弱化
• 可切换的开关
• 信息提示

其他

• Cacl()
• 计数器
• 自定义变量
• :hover 样式在移动端的兼容处理

返回总目录

每天 30 秒系列

部分译自

30 Seconds of CSS

---

欢迎注册黑客派社区，开启你的博客之旅。让学习和分享成为一种习惯！