CSS技巧：实现背景动画

最新推荐文章于 2024-08-23 10:02:01 发布

enter键上的妹妹

最新推荐文章于 2024-08-23 10:02:01 发布

阅读量1.1k

点赞数

分类专栏： enter妹妹写CSS

本文链接：https://blog.csdn.net/m0_47883103/article/details/108628890

版权

enter妹妹写CSS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

关键点

当 box-shadow 的模糊半径和扩张半径都为 0 的时候，我们可以得到一个和元素大小一样的阴影
box-shadow 是可以设置多层的，也就是多层阴影，而且可以进行过渡变换动画（补间动画）
background-image: linear-gradient()，也就是渐变背景是不能进行补间动画的

在这里插入图片描述

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

.shadow {
    position: relative;
    width: 250px;
    height: 250px;
    border: 1px solid #333;
    box-sizing: border-box;
    margin: 50px;
    float: left;
    overflow: hidden;
    
    &::before {
        content: "";
        position: absolute;
        width: 50px;
        height: 50px;
        top: -50px;
        left: -50px;
        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;
        animation: move 3s infinite linear;
    }
}

@keyframes move {
    25% {
        transform: translate(50px);
        color: coral;
        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;
    }
    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;
    }
}

.gradient {
    position: relative;
    width: 250px;
    height: 250px;
    border: 1px solid #333;
    box-sizing: border-box;
    margin: 50px;
    float: left;
    background-image: linear-gradient(90deg, #000 0%, #000 50%, #fff 50%, #fff 100%);
    background-size:  100px 100px;
}