最全CSS效果总结(持续更新)

CSS基础进阶 专栏收录该内容
20 篇文章 2 订阅

有趣的CSS

在线地址

github传送门

如果觉得对您有所启发,期待您的star
在这里插入图片描述

有趣的CSS和实用样式

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

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

常用样式

选择器妙用

圆角(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
  • 2
    点赞
  • 0
    评论
  • 4
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 博客之星2020 设计师:CY__ 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值