纯css实现阴影跳动

Posted 2022-11-12 前端e站

前言：能否使用 web 开发技术创建一个五颜六色的，并且足够聪明可以模拟前景颜色的阴影呢？事实证明，在只使用 CSS 的情况下，完全可以实现这种效果。在本文中，我们将研究如何实现。

图片实现

用于展示原图的 html 如下所示并没有什么特别（后台回复小站，获取原图）：

<div class="parent">
    <div class="shadow logo"></div>
</div>

有一个父级 div 元素 .parent，它包含一个子级元素 .logo 用于展示图片。我们通过使用一张背景图片的形式来实例化，.logo 元素的具体样式如下：

.logo
    margin: 100px auto;
    width: 300px;
    height: 300px;
    background-image: url("./kayako.svg");
    background-repeat: no-repeat;
    background-size: contain;

在上面样式规则中，我们将 div 设置为 300 * 300 宽高像素，并且设置了 background-image 及相关属性，展示一下我们现在所实现的结果。

阴影效果

现在我们已经展示出了我们的图片，剩下更加有趣的部分就是来定义阴影。我们将使用指定一个子伪元素 ::after 来定义阴影，它将做 3 件事情：

• 直接位于图片所在 div 的后面；

• 继承与父元素相同的背景图像；

• 通过滤镜产生出多彩的 drop-shadow 阴影效果。

上述3个功能由以下2个样式规则实现：

.shadow 
    position: relative;

.shadow::after 
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    background: inherit;
    background-position: center center;
    filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.50)) blur(20px);
    z-index: -1;

background 属性和 filter 属性

background 的值是 inherit，这意味着它将继承父级元素的背景值

filter 属性定义了两个滤镜值：drop-shadow 和 blur

我们的 drop-shadow 滤镜设置了一个 50% 透明度的黑色阴影。blur 滤镜为为元素设置 20px 的模糊效果。这两个滤镜的结合最终就可以创造出多彩的阴影，当这两个样式生效时，我们就可以看到如下图出现在图像后面彩色的阴影：

如果你想要多彩的阴影具有放大缩小的动画效果，额外的 CSS 可以帮你实现：

.shadow 
     position: relative;

.shadow::after 
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    background: inherit;
    background-position: center center;
    filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.50)) blur(20px);
    z-index: -1;
    /* animation time! */
    animation: oscillate 1s cubic-bezier(.17, .67, .45, 1.32) infinite alternate;
    
    @keyframes oscillate   from 
        transform: scale(1, 1);
    
    to 
        transform: scale(1.3, 1.3);
    

如果你想在不使用循环动画效果的情况下增强交互性，也可以使用 CSS transition 来改变阴影的行为，如在 hover 操作情况下。需要强调的难点是对待伪元素只需要像对待用 HTML 创建的或 javascript 动态创建的元素一样，唯一的不同是这个元素完全是仅使用 CSS 创建的！

总结

伪元素允许我们使用 CSS 来创建通常在 HTML 和 JavaScript 领域内完成的元素创建任务。对于我们多彩的智能阴影来说，我们依赖于父元素有一个背景图像集，这使得我们定义一个既可以继承父级背景细节又可以设置模糊效果和投影效果的子元素变得容易。虽然这一切都很好，减少了我们大量的复制粘贴工作，但是这种方法也不是很灵活。

纯css实现阴影跳动，你学会了吗？