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

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

代码语言：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;
        .........完整代码请登录后点击上方下载按钮下载查看