CSS3 box-shadow实现背景动画

Javanx

发布于 2019-09-04 16:12:04

9850

发布于 2019-09-04 16:12:04

文章被收录于专栏：web秀web秀

前言

语法： box-shadow: h-shadow v-shadow blur spread color inset;

box-shadow，向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。

参数说明：

值	描述
h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊距离。
spread	可选。阴影的尺寸。
color	可选。阴影的颜色。请参阅 CSS 颜色值。
inset	可选。将外部阴影 (outset) 改为内部阴影。

ok，基础知识了解完毕，完成背景动画效果，先来预览一下。

第一步（添加多个阴影）

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

添加样式

.shadow {
    position: relative;
    width: 250px;
    height: 250px;
    border: 1px solid rgb(26, 18, 18);
    box-sizing: border-box;
    margin: 0 auto;
    float: left;
    overflow: hidden;
}
.shadow::before {
    content: "";
    position: absolute;
    width: 50px;
    height: 50px;
    top: -50px;
    left: -50px;
    box-shadow: 50px 50px blue,  150px 50px red,  250px 50px pink, 
                50px 100px,  150px 100px, 250px 100px, 
                50px 150px, 150px 150px, 250px 150px, 
                50px 200px, 150px 200px, 250px 200px, 
                50px 250px, 150px 250px, 250px 250px;
}

这里box-shadow，第一行添加3个阴影，分别用不同颜色区分，和效果图一比较你应该就懂了，用3x5个阴影块，完成250px的正方形。

第二步（平移动画）

.shadow::before{
    ...
    ...
    animation: move 3s infinite linear;
}
@keyframes move {
    25% {
        transform: translate(50px);
    }
    50% {
        transform: translate(0px);
    }
    75% {
        transform: translate(0px);
    }
    100% {
        transform: translate(0px);
    }
}

第三步（结合阴影平移动画）

@keyframes move {
    25% {
        transform: translate(50px);
        color: coral;
        box-shadow: 50px 50px blue, 150px 50px red, 250px 50px pink, 
                    50px 100px, 150px 100px, 250px 100px, 
                    50px 150px, 150px 150px, 250px 150px, 
                    50px 200px, 150px 200px, 250px 200px, 
                    50px 250px, 150px 250px, 250px 250px;
    }
    50% {
        transform: translate(0px);
        color: brown;
        border-radius: 0;
        box-shadow: 50px 50px, 150px 50px, 250px 50px, 
                    100px 100px, 200px 100px, 300px 100px, 
                    50px 150px, 150px 150px, 250px 150px, 
                    100px 200px, 200px 200px, 300px 200px, 
                    50px 250px, 150px 250px, 250px 250px;
    }
    75% {
        transform: translate(0px);
        color: teal;
        border-radius: 50%;
        box-shadow: 50px 50px, 150px 50px, 250px 50px, 
                    100px 100px, 200px 100px, 300px 100px, 
                    50px 150px, 150px 150px, 250px 150px, 
                    100px 200px, 200px 200px, 300px 200px, 
                    50px 250px, 150px 250px, 250px 250px;
    }
    100% {
        border-radius: 0%;
        box-shadow: 50px 50px, 150px 50px, 250px 50px, 
                    50px 100px, 150px 100px, 250px 100px, 
                    50px 150px, 150px 150px, 250px 150px, 
                    50px 200px, 150px 200px, 250px 200px, 
                    50px 250px, 150px 250px, 250px 250px;
    }
}

动画解析： 1、 3s内动画分成4步（3000/4=750ms完成一个步骤） 2、第一步：整体向右平移50px 3、第二步：1,3,5行阴影回到原来的位置，2,4行位置保持不变 3、第三步：所有阴影边框变成圆角border-radius: 50%; 4、第四步：2,4行回到原来位置。

最终效果预览

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2019年1月15日，如有侵权请联系 cloudcommunity@tencent.com 删除

blur