CSS3 box-shadow实现背景动画

2019-09-04 16:12:04 浏览数 (3)

前言

语法： 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，基础知识了解完毕，完成背景动画效果，先来预览一下。

第一步（添加多个阴影）

代码语言：javascript复制
<div class="shadow"></div>

添加样式

代码语言：javascript复制
.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的正方形。

第二步（平移动画）

代码语言：javascript复制
.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);
    }
}

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

代码语言：javascript复制
@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行回到原来位置。

最终效果预览

blur border shadow 动画

1 人点赞