请问为什么我的天空渐变没有作用？？

        *{
            margin:0;
            padding:0;
        }
        /*定义css变量接受渐变时间*/
        :root{
            --k1:10s;
            --k2:8s;
        }
         body{
            overflow: hidden;
        }
        /*天空区域*/
        .sky,.law{
            position: relative;
        }
        .sky{
            height: 60vh;
            background-image: -webkit-linear-gradient(180deg.rgb(197,228,253),rgba(197,228,253,0));
            background-image: -o-linear-gradient(180deg.rgb(197,228,253),rgba(197,228,253,0));
            background-image: -ms-linear-gradient(180deg.rgb(197,228,253),rgba(197,228,253,0));
            background-image: linear-gradient(180deg.rgb(197,228,253),rgba(197,228,253,0));
        }
        /*草地区域*/
        .law{
            height: 40vh;
            background-image: -webkit-linear-gradient(bottom, rgb(148, 190, 89), rgba(148, 190, 89,0) );
            background-image: -o-linear-gradient(bottom, rgb(148, 190, 89), rgba(148, 190, 89,0) );
            background-image: -ms-linear-gradient(bottom, rgb(148, 190, 89), rgba(148, 190, 89,0) );
            background-image: linear-gradient(to top, rgb(148, 190, 89), rgba(148, 190, 89,0) );
        }
        .law::before{
            content: "";
            position: absolute;
            width: 200px;
            height: 200px;
            background: url("../图片素材/rabbit.png") no-repeat;
            background-size: 200px;
            bottom: 50px;
            right: 200px;
        }
        /*云朵样式*/
        .cloud{
            width: 140px;
            height: 50px;
            border-radius: 30px;
            position: absolute;
            background-color: #fff;
        }
        .cloud::after,.cloud::before{
            content: "";
            position: absolute;
            background-color: #fff;
        }
        .cloud::before{
            width: 80px;
            height: 80px;
            border-radius: 50%;
            top: -25px;
            left: 48px;
        }
        .cloud::after{
            width: 70px;
            height: 60px;
            position: absolute;
            transform:rotate(70deg);
            border-radius: 50%;
            top: -9px;
            left: 8px;
        }
        /*定义不同云朵透明度和动画*/
        .one{
            opacity: 0.6;
            -webkit-transform: scale(0.8);
            -ms-transform: scale(0.8);
            -o-transform: scale(0.8);
            transform: scale(0.8);
            top:30px;
            right: 140px;
            -webkit-animation:one var(--k1) linear infinite;
           -o-animation:one var(--k1) linear infinite;
           -moz-animation:one var(--k1) linear infinite;
           -ms-animation:one var(--k1) linear infinite;
            animation:one var(--k1) linear infinite;
        }
        .two{
            top:80px;
            right: -40px;
            -webkit-animation:two var(--k2) linear infinite;
           -o-animation: var(--k2) linear infinite;
           -moz-animation:two var(--k2) linear infinite;
           -ms-animation:two var(--k2) linear infinite;
            animation:two var(--k2) linear infinite; 
        }
        .three{
            opacity: 0.6;
            -webkit-transform: scale(0.8);
            -ms-transform: scale(0.8);
            -o-transform:scale(0.8) ;
            transform: scale(0.8);
            top:150px;
            right: -140px;
            -webkit-animation:three var(--k1) linear infinite;
           -o-animation:three var(--k1) linear infinite;
           -moz-animation:three var(--k1) linear infinite;
           -ms-animation:three var(--k1) linear infinite;
           animation:three var(--k1) linear infinite;
        }
        .four{
           opacity: 0.6;
           top:80px;
           right:-140px;
           -webkit-animation:one var(--k1) 2s linear infinite;
           -o-animation:one var(--k1) 2s linear infinite;
           -moz-animation:one var(--k1) 2s linear infinite;
           -ms-animation:one var(--k1) 2s linear infinite;
           animation:one var(--k1) 2s linear infinite;
        }
        .five{
           -webkit-transform: : scale(0.8);
           -ms-transform:: scale(0.8); 
           -o-transform: : scale(0.8);
           transform: : scale(0.8);
           opacity: 0.6;
           top:30px;
           right: -140px;
           -webkit-animation:one var(--k1) 2.5s linear infinite;
           -o-animation:one var(--k1) 2.5s linear infinite;
           -moz-animation:one var(--k1) 2.5s linear infinite;
           -ms-animation:one var(--k1) 2.5s linear infinite;
           animation: one var(--k1) 2.5s linear infinite;
        }
        @keyframes one{
            form {right:140px;}
            to  {right:100%;}
        }
        @keyframes two{
            form {right:-40px;}
            to   {right:100%;}
        }
        @keyframes three{
            form {right:-100px;}
            to   {right:100%;}
        }

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/sky.css">
</head>

<body>
   <!-- 天空 -->
   <div class="sky">
    <!-- 五个云朵 -->
       <div class="cloud one"></div>
       <div class="cloud two"></div>
       <div class="cloud three"></div>
       <div class="cloud four"></div>
       <div class="cloud five"></div>
   </div>
   <!-- 草地 -->
   <div class="law"></div>
</body>
</html>

请问为什么我的天空渐变没有作用？？？