架子上的一个时钟、三本书和一棵仙人掌

            
            
@function makelongshadow($color) {
  $val: 0px 0px $color;
  @for $i from 1 through 20 {
    $val: #{$val}, #{-$i}px #{$i}px #{$color};
  }
  @return $val;
}

@mixin longshadow($color) {
  box-shadow: makelongshadow($color);
}
$green:#5AA668;
$brown: #47321A;
$red: #9d374f;
$background: #ECD590;
$orange: #e86830;
$white:#E9E6C9;

html {
  background: $background;
  background-size: cover;
  text-align: center;
  font-size: 10px;
}
body {
  margin: 0;
  font-size: 2rem;
  display: flex;
  flex: 1;
  width:100vw;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
}
.shelf {
  position: relative;
  width:520px;
  height:20px;
  border-radius: 1px;
  background-color: lighten($brown, 5%);
  margin-top:70px;
  @include longshadow(darken($background, 10% ));
}
.clock {
  width: 110px;
  height: 110px;
  border: 10px solid $green;
  background-color: $white;
  border-radius: 50%;
  position: absolute;
  box-shadow: inset 0 0 3px #6a5757;
  left:30px;
  top:-135px;
}
.clock-face {
  position: relative;
  width: 100%;
  height: 100%;
}
.knot {
  position: absolute;
  background-color: $red;
  width:10px;
  height: 10px;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 99;
}
.hand {
  width: 4px;
  background: $brown;
  position: absolute;
  left: 50%;
    top: 50%;
    transform-origin: 50% 0;
    transform: translate(-50%, -100%);
}
.hour-hand {
  height: 30px;
}
.min-hand {
  height: 40px;
}
.second-hand {
  height: 47px;
  width:2px;
}
.clock-ear-right, .clock-ear-left {
  background-color: $green;
  position: absolute;
  border-top-left-radius: 90px;
  border-top-right-radius: 90px;
  left:-38px;
  top:-12px;
  height:30px;
  width:60px;
  transform:rotate(-50deg);
  &:after {
    content:'';
    position: absolute;
    background-color: $red;
    width:15px;
    height: 8px;
    border-top-left-radius: 90px;
    border-top-right-radius: 90px;
    top:-9px;
    left:23px;
  }
}
.clock-ear-right {
  left:auto;
  right:-38px;
  transform:rotate(50deg);
}  
.clock-foot-right, .clock-foot-left {
  background-color: $brown;
  position: absolute;
  border-radius:50px;
  left:20px;
  bottom:-25px;
  height:50px;
  width:12px;
  transform:rotate(30deg);
  z-index:-1;
}
.clock-foot-right {
  left:auto;
  right:20px;
  transform:rotate(-30deg);
}
.book {
  position: absolute;
  background-color:$red;
  width:40px;
  height:170px;
  left:210px;
  top:-170px;
  border-radius:1px;
  &:before {
    content:'';
    background-color: $white;
    position: absolute;
    width: 100%;
    height: 20px;
    top:20px;
    left:0;
  }
  &:after {
    content:'';
    position: absolute;
    background-color: transparentize(darken($red, 8%), 0.7) ;
    height: 100%;
    width: 50%;
    right:0;
    border-radius:0 2px 2px 0;
  }
}
.book:nth-of-type(2) {
    background-color:$orange;
    left:250px;
    height:195px;
    top:-195px;
  &:after {
    background-color: transparentize(darken($orange, 8%), 0.7)
  }
}
.book:nth-of-type(3) {
    background-color:$green;
    left:290px;
  height:180px;
    top:-180px;
    &:after {
    background-color: transparentize(darken($green, 8%), 0.7)
  }
}
.cactus {
  left:380px;
  position: absolute;
  width: 120px;
  height: 200px;
  top:-120px;
}
.pot {
  position: absolute;
  perspective: 200px;
  width:100px;
  height:105px;
  top:28px;
  z-index: 3;
}
.pot-bottom {
  transform: rotateX(-30deg);
  background-color: darken($orange, 10%);
  width: 100%;
  height: 100%;
  top:0px;
}
.pot-top {
  position: absolute;
  background-color: darken($orange, 20%);
  width: 130%;
  height: 30px;
  left:-15%;
  top:0px;
  border-radius: 2px;
}
.plant-left, .plant-right {
  background-color: $green;
  position: absolute;
  width: 50px;
  height: 100px;
  border-radius: 50px;
  top:-20px;
  left:0;
}
.plant-right {
  right:20px;
  left:auto;
  height: 130px;
  top:-40px;
  
}

.spike{
  position: absolute;
  width:5px;
  height: 1px;
  background-color: $background;
}
@for $i from 1 through (100) {
    $top: random(80)+px;
    $left: random(50)+px;
    $deg:random(360)+deg;
    .spike:nth-of-type(#{$i}) {
      top: $top;
      left: $left;
      transform:rotate($deg)
    }
}

    
  

        

            
            
 // grab clock hands
  const secondHand = document.querySelector('.second-hand');
  const minsHand = document.querySelector('.min-hand');
  const hourHand = document.querySelector('.hour-hand');

 function setDate() {
    const now = new Date(); //get time
    
   // get current second, minute and hour
    const seconds = now.getSeconds();
    const mins = now.getMinutes();
    const hours = now.getHours();
    
   // calculate the degree for one second, minute and hour
    const secondsDeg = ((seconds / 60) * 360) + 180;
    const minsDeg = ((mins / 60) * 360) + ((seconds/60)*6) +180;
    const hoursDegrees = ((hours / 12) * 360) + ((mins/60)*30) + 180;
   
   // rotate hands 
    secondHand.style.transform = `rotate(${secondsDeg}deg)`;
    minsHand.style.transform = `rotate(${minsDeg}deg)`;
    hourHand.style.transform = `rotate(${hoursDegrees}deg)`;
  }

  setInterval(setDate, 1000);

  setDate();