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跟踪


未完待续

© All Rights Reserved            updated 2019-11-20 11:17:00

results matching ""

    No results matching ""