logo

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

所以我们从基础开始,逐渐去了解接触一些有趣的CSS效果(如果对您有帮助,不妨点下star〜^〜)

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

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

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

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

bouncing-loader
border-loading 按钮边框动效果
Auto-Height

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

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

未完待续