大海波浪

最新推荐文章于 2025-01-21 16:13:32 发布

gh323093

最新推荐文章于 2025-01-21 16:13:32 发布

阅读量299

点赞数

分类专栏： Web前端

本文链接：https://blog.csdn.net/gh323093/article/details/78434446

版权

Web前端专栏收录该内容

56 篇文章

订阅专栏

本文介绍了一个使用纯CSS实现的动画示例，通过不同背景图片的切换配合关键帧动画，营造出一种动态效果。同时，还展示了一个太阳元素的缩放渐隐动画。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html, body {
            height: 100%;
        }
        body {
            margin: 0;
            padding: 0;
            background-color: #0EA9B1;
        }
        section {
            height: 100%;
            position: relative;
            overflow: hidden;
        }
        .bg1, .bg2 {
            position: absolute;
            left: 0;
            width: 100%;
        }
        .bg1 {
            bottom: 20px;
            height: 200px;
            background-image: url(./1.png);
            /*调用*/
            animation: move 1.5s linear infinite;
        }
        .bg2 {
            bottom: 0;
            height: 235px;
            background-image: url(./2.png);
            animation: move 1.5s linear infinite;
        }
        .sun{
            width: 50px;
            height: 50px;
            background-color: #fff;
            border-radius: 25px;
            position: absolute;
            left: 200px;
            top: 100px;
        }
        .sun::before, .sun::after{
            content: '';
            display: block;
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: #fff;
            border-radius: 25px;
        }
        .sun::before{
            animation: scale 1s infinite linear;
        }
        .sun::after{
            animation: scale 1s 0.5s infinite linear;
        }
        @keyframes scale {
            0%{
            }
            100%{
                transform: scale(2);
                opacity: 0;
            }
        }
        @keyframes move {
            0%{
            }
            50%{
                bottom: -20px;
            }
            100%{
            }
        }
    </style>
</head>
<body>
<section>
    <div class="sun"></div>
    <div class="bg1"></div>
    <div class="bg2"></div>
</section>
</body>
</html>