svg实现六个天气动画效果代码-html代码-BFW代码库

svg实现六个天气动画效果代码

代码语言：html

所属分类：动画

代码描述：svg实现六个天气动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<html>
<head>
    <style>
        body {
            background: #121212;
        }

        .stage {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 600px;
            height: 96px;
            margin-left: -300px;
            margin-top: -30px;
        }

        svg {
            width: 48px;
            height: 48px;
            margin: 24px 0 0 40px;
            fill: #fff;
        }

        /* Thunder Bolt Animation */
        .thunder-cloud .bolt {
            animation: flash 2s infinite;
        }

@keyframes flash {
            0% {
                transform: translateY(-25px) translateX(25px) scaleY(0.95);
                opacity: 0;
            }
            5%, 25% {
                opacity: 1;
            }
            15%, 20% {
                opacity: 0;
            }
            50% {
                transform: translateY(8px) translateX(-10px);
                opacity: 1;
            }
            80% {
                transform: translateY(8px) translateX(-10px);
                opacity: 0;
            }
            100% {
                transform: translateY(-25px) translateX(25px) scaleY(0.95);
                opacity: 0;
            }
        }

        /* Raindrops Animation */
        .rain-cloud .raindrop-one,
        .rain-cloud .raindrop-two,
        .rain-cloud .raindrop-three {
            opacity: 0;
            animation-timing-function: cubic-bezier(1, 0, 1, 1);
        }

        .rain-cloud .raindrop-one {
            animation: falling-drop-one 2s infinite;
        }

        .rain-cloud .raindrop-two {
            animation: falling-drop-two 1.90s infinite;
            animation-delay: 0.8s;
        }

        .rain-cloud .raindrop-three {
            animation: falling-drop-three 1.80s infinite;
            animation-delay: 0.5s;
        }

@keyframes falling-drop-one {
            0% {
                transform: translateY(-35px);
                opacity: 0;
            }
            10% {
                transform: translateY(-15px);
                opacity: 1;
            }
            30% {
                opacity: 1;
            }
            60% {
                transform: translateY(100px);
                opacity: 0;
            }
            100% {
                transform: translateY(-35px);
                opacity: 0;
            }
        }

@keyframes falling-drop-two {
            0% {
                transform: translateY(-105px);
                opacity: 0;
            }
            10% {
                transform: translateY(-85px);
                opacity: 1;
            }
            30% {
                opacity: 1;
            }
            60% {
                transform: translateY(5px);
                opacity: 0;
            }
            100% {
                transform: translateY(-105px);
                opacity: 0;
            }
        }

@keyframes falling-drop-three {
            0% {
                transform: translateY(-105px);
                opacity: 0;
            }
            10% {
                transform: translateY(-85px);
                opacity: 1;
            }
            30% {
                opacity: 1;
            }
            60% {
                transform: translateY(35px);
                opacity: 0;
            }
            100% {
                transform: translateY(-105px);
                opacity: 0;
            }
        }

        /* Snowflake Animations */
        .snow-cloud .snowflake-one,
        .snow-cloud .snowflake-two,
        .snow-cloud .snowflake-three {
            opacity: 0;
            transform-origin: center center;
            animation-timing-function: ease-in;
        }

        .snow-cloud .snowflake-one {
            animation: falling-snow-one 4s infinite;
        }

        .snow-cloud .snowflake-two {
            animation: falling-snow-two 3.8s infinite;
            animation-delay: 2.5s;
        }

        .snow-cloud .snowflake-three {
            animation: falling-snow-three 3.9s infinite;
            animation-delay: 1.5s;
        }

@keyframes falling-snow-one {
            0% {
                transform: translateY(-65px) rotate(0);.........完整代码请登录后点击上方下载按钮下载查看