最全CSS效果总结（持续更新）

有趣的CSS

在线地址

github传送门

如果觉得对您有所启发，期待您的star

有趣的CSS和实用样式

CSS可以配合标签完成许多酷炫、神奇的效果，如果深入的研究，甚至可以成为前端开发进阶的一个主要方向。

所以我们从基础开始，逐渐去了解接触一些有趣的CSS效果，总结下来，共勉！

常用样式

• 竖直水平居中（利用translate）
• 一个顶部带有三角形的文本容器
• 文字过长截断并显示省略号

选择器妙用

• 伪元素选择器
  • ::first-letter(块级元素第一行的第一个字母) 首字母大写
  • ::not（设置一组样式最后一个元素除外） 最后不带通用样式
  • ::selection (文本选中的样式) 改变文本选中的样式

圆角（border-radius）

基础border-radius：常见的圆角
基础border-radius：纯CSS画圆
进阶border-radius：波浪效果
进阶border-radius：旋转的radius

阴影效果（box-shadows）

动态的阴影(不用box-shadow实现的阴影)
嵌入背景的字体
立体阴影
字体光效

过渡效果 (transition)

bouncing-loader

渐变（linear-gradient）

内容溢出-滚动渐变
grandient-text
最后的文字渐变过渡

hover态效果

hover态滑动出遮罩层
鼠标hover跟踪

---

未完待续，如果对您有帮助希望您能star一下，也欢迎您留言互相交流

• WX ： j565017805