/Interesting-CSS

最实用的CSS效果仓库

Primary LanguageHTML

logo

有趣的CSS和实用样式

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

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

在线预览地址

常用样式

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

选择器妙用

圆角（border-radius）

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

阴影效果（box-shadows）

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

过渡效果 (transition)

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

渐变（linear-gradient）

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

hover态效果

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

未完待续