css实现各种天气情景动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：css实现各种天气情景动画效果代码

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

<html>
<head>
    <style>
        .sunny {
            animation: sunny 15s linear infinite;
            background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);
            height: 140px;
            width: 20px;
            margin-left: -15px;
            position: absolute;
            left: 90px;
            top: 20px;
        }
        .sunny:before {
            background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);
            content: '';
            height: 140px;
            width: 20px;
            opacity: 1;
            position: absolute;
            bottom: 0px;
            left: 0px;
            transform: rotate(90deg);
        }
        .sunny:after {
            background: #FFEE44;
            border-radius: 50%;
            box-shadow: rgba(255,255,0,0.2) 0 0 0 15px;
            content: '';
            height: 80px;
            width: 80px;
            position: absolute;
            left: -30px;
            top: 30px;
        }
@keyframes sunny {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }

        /* CLOUDY */
        .cloudy {
            animation: cloudy 5s ease-in-out infinite;
            background: #FFFFFF;
            border-radius: 50%;
            box-shadow:
            #FFFFFF 65px -15px 0 -5px,
            #FFFFFF 25px -25px,
            #FFFFFF 30px 10px,
            #FFFFFF 60px 15px 0 -10px,
            #FFFFFF 85px 5px 0 -5px;
            height: 50px;
            width: 50px;
            margin-left: -60px;
            position: absolute;
            left: 255px;
            top: 70px;
        }
        .cloudy:after {
            animation: cloudy_shadow 5s ease-in-out infinite;
            background: #000000;
            border-radius: 50%;
            content: '';
            height: 15px;
            width: 120px;
            opacity: 0.2;
            position: absolute;
            left: 5px;
            bottom: -60px;
            transform: scale(1);
        }
@keyframes cloudy {
            50% {
                transform: translateY(-20px);
            }
        }
@keyframes cloudy_shadow {
            50% {
                transform: translateY(20px) scale(.7);
                opacity: .05;
            }
        }

        /* RAINY */
        .rainy {
            animation: rainy 5s ease-in-out infinite 1s;
            background: #CCCCCC;
            border-radius: 50%;
            box-shadow:
            #CCCCCC 65px -15px 0 -5px,
            #CCCCCC 25px -25px,
            #CCCCCC 30px 10px,
            #CCCCCC 60px 15px 0 -10px,
            #CCCCCC 85px 5px 0 -5px;
            display: block;
            height: 50px;
            width: 50px;
            margin-left: -60px;
            position: absolute;
            left: 427px;
            top: 70px;
        }
        .rainy:after {
            animation: rainy_shadow 5s ease-in-out infinite 1s;
            background: #000000;
            border-radius: 50%;
            content: '';
            height: 15px;
            width: 120px;
            opacity: 0.2;
            position: absolute;
            left: 5px;
            bottom: -60px;
            transform: scale(1);
        }
        .rainy:before {
            animation: rainy_rain .7s infinite linear;
            content: '';
            background: #CCCCCC;
            border-radius: 50%;
            display: block;
            height: 6px;
            width: 3px;
            opacity: 0.3;
            transform: scale(.9);
        }
@keyframes rainy {
            50% {
                transform: translateY(-20px);
            }
        }
@keyframes rainy_shadow {
            50% {
                transform: translateY(20px) scale(.7);
                opacity: 0.05;
            }
        }
@keyframes rainy_rain {
            0% {
                box-shadow:
                rgba(0,0,0,0) 30px 30px,
                rgba(0,0,0,0) 40px 40px,
                #000 50px 75px,
                #000 55px 50px,
                #000 70px 100px,
                #000 80px 95px,
                #000 110px 45px,
                #000 90px 35px;
            }
            25% {
                box-shadow:
                #000 30px 45px,
                #000 40px 60px,
                #000 50px 90px,
                #000 55px 65px,
                rgba(0,0,0,0) 70px 120px,
                rgba(0,0,0,0) 80px 120px,
                #000 110px 70px,
                #000 90px 60px;
            }
            26% {
                box-shadow:
                #000 30px 45px,
                #000 40px 60px,
                #000 50px 90px,
                #000 55px 65px,
                rgba(0,0,0,0) 70px 40px,
                rgba(0,0,0,0) 80px 20px,
                #000 110px 70px,
                #000 90px 60px;
            }
            50% {
                box-shadow:
                #000 30px 70px,
                #000 40px 80px,
                rgba(0,0,0,0) 50px 100px,
                #000 55px 80px,
                #000 70px 60px,
                #000 80px 45px,
                #000 110px 95px,
                #000 90px 85px;
            }
            51% {
                box-shadow:
                #000 30px 70px,
                #000 40px 80px,
                rgba(0,0,0,0) 50px 45px,
                #000 55px 80px,
                #000 70px 60px,
                #000 80px 45px,
                #000 110px 95px,
                #000 90px 85px;
            }
            75% {
                box-shadow:
                #000 30px 95px,
                #000 40px 100px,
                #000 50px 60px,
                rgba(0,0,0,0) 55px 95px,
                #000 70px 80px,
                #000 80px 70px,
                rgba(0,0,0,0) 110px 120px,
                rgba(0,0,0,0) 90px 110px;
            }
            76% {
                box-shadow:
                #000 30px 95px,
                #000 40px 100px,
                #000 50px 60px,
                rgba(0,0,0,0) 55px 35px,
                #000 70px 80px,
                #000 80px 70px,
                rgba(0,0,0,0) 110px 25px,
                rgba(0,0,0,0) 90px 15px;
            }
            100% {
                box-shadow:
                rgba(0,0,0,0) 30px 120px,
                rgba(0,0,0,0) 40px 120p.........完整代码请登录后点击上方下载按钮下载查看