Assignment CSS Calc and CSS Var (Branch 13599) (Copy 13754)

Assignment CSS Calc and CSS Var (Branch 13599) (Co..

✨ CHAWANWIT KUANPHIPATKUL

<html>
  <head>
    <title>Everyday Sky with the Birb</title>
    <style>
      body{
        background-image: linear-gradient(to top, #a9e3ff 15%, #38abe1 40%, #0651c1 80%, #002855 100%);
        overflow-y: hidden;
        display: flex;
        position:relative;
      }
      .bird{
		background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/174479/bird-cells.svg);
      background-size: auto 100%;
      width: 170px;
      height: 250px;
      will-change: background-position;
      transform: rotateZ(10deg);
      
      animation-name: fly-cycle;
      animation-duration: 1s;
      animation-delay: -0.1s;
      animation-timing-function: steps(10);
      animation-iteration-count: infinite;
    }
    .bird_container{
		position: absolute;
  		top: 50%;
  		left: 50%;
  		transform: translate(-50%, -50%);
      will-change: transform;
      z-index:2;
    }
    @keyframes fly-cycle{
      100%{
			background-position: -3600px 0;
      }
      }
      .color{
      display: flex;
      width: 60px;
      height: 60px;
      margin: 9px;
      cursor: pointer;
      border: 7px solid white;
      border-radius: 50px;
    }
    .clr1{
      --c1: #a9e3ff;
      --c2: #38abe1;
      --c3: #0651c1;
      --c4: #002855;
		background-image: linear-gradient(to top, var(--c1) 15%, var(--c2) 40%, var(--c3) 80%, var(--c4) 100%);
    }
    .clr2{
      --c1: #bca970;
      --c2: #d4c8a5;
      --c3: #bfc6d2;
      --c4: #57777b;
		background-image: linear-gradient(20deg, var(--c1) 10%, var(--c2) 35%, var(--c3) 70%, var(--c4) 100%);
    }
    .clr3{
      --c1: #c483a6;
      --c2: #fec4ae;
      --c3: #ffdb91;
      --c4: #a9d5e3;
		background-image: linear-gradient(-20deg, var(--c1) 0%, var(--c2) 15%, var(--c3) 60%, var(--c4) 100%);
    }
    .clr4{
      --c1: #ffc1a0;
      --c2: #f09f9c;
      --c3: #c86b98;
      --c4: #632b6c;
      --c5: #271034;
		background-image: linear-gradient(20deg, var(--c1) 0%, var(--c2) 20%, var(--c3) 50%, var(--c4) 80%, var(--c5) 100%);
      }
    </style>
  </head>
  <body>
     <span id='1' onclick="color(this)" class='color clr1'></span>
       <span id='2' onclick="color(this)" class='color clr2'></span>
       <span onclick="color(this)" class='color clr3'></span>
       <span onclick="color(this)" class='color clr4'></span>
     <div class="bird_container">
       <div class="bird"></div>
  </div>
      
</body>
  <script>
    function color(z){
		var a = getComputedStyle(z);
      var b = a.backgroundImage;
      document.getElementsByTagName("BODY")[0].style.backgroundImage=b;
    }
  </script>
</html>