我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！

最近在复盘css的时候，突然脑海中迸发出一个实现智能阴影效果的想法，试了很多种方法但都无法实现，最后使用过滤（filter)的方法得以实现。

至于什么是智能阴影效果，有什么用；那大家就欣赏一下具体效果：大家可以发现随着颜色的变化，旁边的阴影区域也会变化；从而实现智能阴影的效果。由于本人不知如何让图片代码片段在掘金上显示真实效果是这样的

动画.gif

下面是一些必备重点知识

filter相关知识

filter基础知识点

filter CSS属性将模糊或颜色偏移等图形效果应用于元素。共有十个效果blur、opacity、grayscale、sepia、saturate、hue-rotate、invert、brightness、contrast、drop-shadow。

blur:这是一个模糊效果，单位为px
opacity:这是一个透明度的效果值在0~1之间 0是完全透明，而1是不透明无效果，例如filter:opacity(0.5).
grayscale:这是一个是一个是图片变灰的效果，值在0~1，
sepia这是褐色效果，值也在0~1之间， 0无效果，1完全变褐
saturate这是饱和度属性，取值大于等于0
invert这是颜色反转属性，值在0 ~ 1或者0 ~ 100%之间
brightness这是亮度，取值为数字或百分数
ontrast这是对比度，取值为大于或等于0的数字或百分数
drop-shadow这是阴影效果
hue-rotate这是色彩旋转，取值是角度，单位是deg

我们的使用

我们就定义了两个滤镜值：drop-shadow 和 blur 我们的 drop-shadow 滤镜设置了一个50%的阴影效果。blur 滤镜为为元素设置 20px 的模糊效果。这两个滤镜的结合即可完成第一步

 filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.50)) blur(20px);

动画效果的知识点

@keyframes 规定动画是什么内容。
animation 所有动画属性的简写属性。
animation-name 规定@keyframes动画的名称。
animation-duration 规定动画完成一个周期所花费的秒或毫秒
animation-timing-function 规定动画的速度曲线，默认是“ease”。
animation-delay 规定动画何时开始，默认是0。
animation-iteration-count 规定动画被播放的次数，默认是1，还有infinite（循环）无数次
animation-direction 规定动画是否在下一周期逆向播放
animation-play-state 规定动画是否正在运行或暂停。默认是"running",还有"paused"
animation-fill-mode 规定动画结束后状态，保持forwards回到起始backwards

简写效果：animation：动画名称持续时间运动曲线何时开始播放次数是否反方向动画起始或者结束的状态

animation: scale 1s  infinite alternate;

相关代码解读

文章主体

*{
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
    body{
        background-color: black;
    }
    @keyframes img{
        0%{
            background:linear-gradient(45deg,rgba(213, 224, 92, 0.525),rgba(88, 170, 55, 0.525));
        }
        25%{
            background:linear-gradient(135deg,rgba(51, 208, 74, 0.525),rgba(90, 193, 211, 0.525));
        }
        50%{
            background:linear-gradient(45deg,rgba(210, 135, 55, 0.525),rgba(214, 55, 52, 0.525));
        }
        75%{
            background:linear-gradient(135deg,rgba(122, 55, 154, 0.525),rgba(183, 178, 31, 0.525));
        }
        100%{
            background:linear-gradient(45deg,rgba(145, 37, 96, 0.525),rgba(26, 121, 203, 0.525));
        }
    }
    .box{
        width: 300px;
        height: 200px;
       margin: 100px auto;
        background:linear-gradient(45deg,rgba(213, 224, 92, 0.525),rgba(88, 170, 55, 0.525));
        background-size: 100% 100%;
        background-repeat: no-repeat;
        border-radius: 50%;
        animation: img 5s infinite;
    }
    .show{
     position: relative;
    }

background:linear-gradient(45deg,rgba(213, 224, 92, 0.525),rgba(88, 170, 55, 0.525)); 这是背景的颜色渐变方法为background:linear-gradient(方向，颜色，颜色）
position: relative; 注意这个一定不能写在.box中，不然阴影效果将体现不出。

阴影效果的实现

.show::after{
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    background: inherit;
    border-radius: 50%;
    background-position: center center;
    filter: drop-shadow(0px 0px 100px rgba(0, 0, 0, 1)) blur(100px);
    z-index: -1;
    animation: oscillate 1s  infinite alternate;
}
 
@keyframes oscillate {
  from {
    transform: scale(1, 1);
  }
  to {
    transform: scale(1.3, 1.3);
  }
}

background: inherit; 这是伪元素对父元素的背景属性的继承
filter: drop-shadow(0px 0px 100px rgba(0, 0, 0, 1)) blur(100px); 用过滤属性实现阴影
z-index: -1；这是类似于图层排列顺序值越小排的越前，
transform: scale(1, 1);这是图片放大效果

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能阴影</title>
</head>
<style>
    *{
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
    body{
        background-color: black;
    }
    @keyframes img{
        0%{
            background:linear-gradient(45deg,rgba(213, 224, 92, 0.525),rgba(88, 170, 55, 0.525));
        }
        25%{
            background:linear-gradient(135deg,rgba(51, 208, 74, 0.525),rgba(90, 193, 211, 0.525));
        }
        50%{
            background:linear-gradient(45deg,rgba(210, 135, 55, 0.525),rgba(214, 55, 52, 0.525));
        }
        75%{
            background:linear-gradient(135deg,rgba(122, 55, 154, 0.525),rgba(183, 178, 31, 0.525));
        }
        100%{
            background:linear-gradient(45deg,rgba(145, 37, 96, 0.525),rgba(26, 121, 203, 0.525));
        }
    }
    .box{
        width: 300px;
        height: 200px;
       margin: 100px auto;
        background:linear-gradient(45deg,rgba(213, 224, 92, 0.525),rgba(88, 170, 55, 0.525));
        background-size: 100% 100%;
        background-repeat: no-repeat;
        border-radius: 50%;
        animation: img 5s infinite;
    }
    .show{
     position: relative;
    }
    .show::after{
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    background: inherit;
    border-radius: 50%;
    background-position: center center;
    filter: drop-shadow(0px 0px 100px rgba(0, 0, 0, 1)) blur(100px);
    z-index: -1;
    animation: oscillate 1s  infinite alternate;
}
 
@keyframes oscillate {
  from {
    transform: scale(1, 1);
  }
  to {
    transform: scale(1.3, 1.3);
  }
}
</style>
<body>
    <div class="box show">
    </div>
</body>
</html>

结语

初次在掘金写文章有诸多不足之处

用html+css实现智能阴影效果