前端页面实现云层特效

使用css实现天空云层移动的特效，如过像使用本地路径需要下载附件将图片url可替换成animate1.png和animate2.png即可，此云层效果不依赖外部资源，可以根据自己需要部署使用。
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>天空云层特效</title>
    <style>
        /* 基础设置确保全屏显示 */
        * {
            margin: 0;
            padding: 0;
        }
        
        html, body {
            width: 100vw;
            height: 100vh;
            overflow: hidden;
        }
        
        /* 天空背景容器 */
        .sky-container {
            position: relative;
            width: 100%%;
            height: 100%%;
            background-color: #4DA6FF; /* 蓝色的天空背景 */
        }
        
        /* 云层通用样式 */
        .cloud-layer {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%%;
            height: 100%%;
            background-repeat: repeat-x;
            background-position: 0 0;
        }
        
        /* 第一层云层 */
        .cloud-layer-1 {
            background-image: url('https://p3-flow-imagex-download-sign.byteimg.com/tos-cn-i-a9rns2rl98/21e240c670374658979a8f6356d4a14a.png~tplv-a9rns2rl98-24-95-exif:1080:1080.png?rcl=202510011038569A934C655704B6EF3EB3&rk3s=8e244e95&rrcfp=8a172a1a&x-expires=1759891136&x-signature=l2MSnRVAw01pxgRd8bgTRIuubPU%%3D');
            background-size: cover;
            opacity: 0.7;
            animation: cloudMove1 400s linear infinite;
        }
        
        /* 第二层云层 */
        .cloud-layer-2 {
            background-image: url('https://p3-flow-imagex-download-sign.byteimg.com/tos-cn-i-a9rns2rl98/93921631637242d8b314be734de2bf3f.png~tplv-a9rns2rl98-24-95-exif:1080:1080.png?rcl=202510011038569A934C655704B6EF3EB3&rk3s=8e244e95&rrcfp=8a172a1a&x-expires=1759891136&x-signature=oLNzzqy%%2B17Xl0okbgh4tFUVv%%2FSc%%3D');
            background-size: cover;
            opacity: 0.5;
            animation: cloudMove2 600s linear infinite;
        }
        
        /* 第一层云层动画 */
        @keyframes cloudMove1 {
            0%% {
                background-position: 0 0;
            }
            100%% {
                background-position: -20000px 0;
            }
        }
        
        /* 第二层云层动画 */
        @keyframes cloudMove2 {
            0%% {
                background-position: -10000px 0;
            }
            100%% {
                background-position: -30000px 0;
            }
        }
        
        /* 响应式调整，确保在各种屏幕尺寸下都能全屏显示 */
        @media (max-width: 768px) {
            .cloud-layer {
                background-size: auto 100%%;
            }
        }
    </style>
</head>
<body>
    <div>
        <div class="cloud-layer cloud-layer-1"></div>
        <div class="cloud-layer cloud-layer-2"></div>
    </div>

    <!-- 简单的JavaScript确保窗口大小变化时保持全屏 -->
    <script>
        // 确保云层在窗口大小改变时仍然覆盖全屏
        function adjustCloudLayers() {
            const windowHeight = window.innerHeight;
            const cloudLayers = document.querySelectorAll('.cloud-layer');
            
            cloudLayers.forEach(layer => {
                layer.style.height = `${windowHeight}px`;
            });
        }
        
        // 初始化时调整
        adjustCloudLayers();
        
        // 窗口大小改变时调整
        window.addEventListener('resize', adjustCloudLayers);
    </script>
</body>
</html>
本文最后更新时间 2025-10-01
文章链接地址：https://xzlo.blog/index.php/archives/80/
本站文章除注明[转载|引用|原文]出处外,均为本站原生内容,转载前请注明出处
留言
