从浅到深的学习 CSS3阴影(box-shadow)

前言

前面两篇文章都有提到过box-shadow,里面也有很多的基础知识,有看过的小伙伴应该都有或多或少的收获吧,今天我们再从基础入手,希望能让大家更熟悉它。

没有看过之前文章的小伙伴请点击:

CSS3 box-shadow实现背景动画

CSS3动画解析抖音 LOGO制作

下面我们从最基础的开始演示。

单侧投影

关键点: 1、外 box-shadow 前四个参数:x 偏移值、y 偏移值 、模糊半径、扩张半径。 2、单侧投影的核心是第四个参数:扩张半径。这个参数会根据你指定的值去扩大或缩小投影尺寸,如果我们用一个负的扩张半径,而他的值刚好等于模糊半径,那么投影的尺寸就会与投影所属的元素尺寸完全一致,除非使用偏移量来移动他,否则我们将看不到任何投影。

从浅到深的学习 CSS3阴影(box-shadow)

立体文字阴影

知识点

1、立体文字阴影的关键点在于多层 text-shadow 的叠加

2、合理运用了 SASS 函数来自动计算多层 text-shadow 的 css 代码

3、运用了 Sass 的颜色函数,渐进实现层级阴影颜色 – fade-out: 改变颜色的透明度,让颜色更加透明 – desaturate: 改变颜色的饱和度值,让颜色更少的饱和

4、HSL(颜色值)

  • H:Hue(色调)。0(或360)表示红色,120表示绿色,240表示蓝色,也可取其他数值来指定颜色。取值为:0 – 360
  • S:Saturation(饱和度)。取值为:0.0% – 100.0%
  • L:Lightness(亮度)。取值为:0.0% – 100.0%

编译后的css(推荐scss在线编译为css工具) https://www.sassmeister.com/

从浅到深的学习 CSS3阴影(box-shadow)从浅到深的学习 CSS3阴影(box-shadow)

从浅到深的学习 CSS3阴影(box-shadow)

线性渐变模拟长阴影

知识点

1、借用了元素的两个伪元素

2、通过渐变色填充两个伪元素,再通过位移、变换放置在合适的位置

从浅到深的学习 CSS3阴影(box-shadow)

从浅到深的学习 CSS3阴影(box-shadow)

渐变实现内切角

知识点

1、阴影实现的关键点在于使用伪元素绝对定位在容器的一角,元素本身透明,阴影扩散开形成内切圆角效果

2、阴影实现缺点,单个标签最多只能是2个内切圆角

3、径向渐变实现内切圆角可以是4边

从浅到深的学习 CSS3阴影(box-shadow)

从浅到深的学习 CSS3阴影(box-shadow)

圆环进度条动画

知识点 :圆环进度条的移动本质上是阴影顺序延时移动的结果。

从浅到深的学习 CSS3阴影(box-shadow)

从浅到深的学习 CSS3阴影(box-shadow)

未经允许不得转载:一点博客-青梅煮码-共享博客 » 从浅到深的学习 CSS3阴影(box-shadow)
分享到:
赞(1) 打赏

评论抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏