CSS Painting #4

css-painting-4.markdown

CSS Painting #4

A Pen by Philip H on CodePen.

License.

index.html

<div class="frame">
  <div id="lines">
    <div class="rect no-animation" id="rect1"></div>
    <div class="rect no-animation" id="rect2"></div>
    <div class="rect no-animation" id="rect3"></div>
    <div class="rect no-animation" id="rect4"></div>
  </div>
  <div class="circle no-animation" id="circle1"></div>
  <div class="circle no-animation" id="circle2"></div>
  <div class="circle no-animation" id="circle3"></div>
  <div class="container">
    <div class="rect no-animation" id="rect5"></div>
    <div class="rect no-animation" id="rect6"></div>
    <div class="rect no-animation" id="rect7"></div>
    <div class="rect no-animation" id="rect8"></div>
    <div class="rect no-animation" id="rect9"></div>
    <div class="rect no-animation" id="rect10"></div>
  </div>
</div>

script.js

$('.frame').bind('click', function() {
  $(this).toggleClass('active');
  $(this).find('div').removeClass('no-animation');
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

style.scss

$baseColor: rgb(125, 10, 5);
$green: hsl(140, 50, 75);
$red: rgba(200, 5, 25, .2);
$blue: rgb(0, 0, 256);

.no-animation {
  -webkit-animation: none !important;
  animation: none !important; 
}

.rect,
.circle {
  position: absolute;
}
.circle {
  border-radius: 50%;
}
.frame {
  width: 300px;
  height: 375px;
  margin: 50px auto;
  // background-color: $baseColor;
  box-shadow: 3px 3px 10px 0 rgba(0, 0, 0, .3);
  background: linear-gradient(burlywood, bisque);
  
  &:active {
    transform: translate(2px, 2px);
  }
  &.active {
    #lines .rect {
      animation: rotate-blue-lines 3s infinite;
    }
    .circle#circle1 {
      animation: change-color 6s infinite;
    }
    .circle#circle2 {
      animation: change-color 4s infinite;
    }
    .circle#circle3 {
      animation: change-color-2 10s infinite;
    }
    .rect#rect5 {
      animation: rotate 10s infinite;
    }
  }
  #lines {
    .rect {
      width: 7px;
      height: 300px;
      background: gainsboro;
    }
  }
  .rect#rect1 {
    margin-top: -20px;
    margin-left: 140px;
    transform: rotate(-45deg);
  }
  .rect#rect2 {
    margin-top: 100px;
    margin-left: 140px;
    transform: rotate(45deg);
  }
  .rect#rect3 {
    margin-top: -20px;
    margin-left: 140px;
    transform: rotate(-135deg);
  }
  .rect#rect4 {
    margin-top: 100px;
    margin-left: 140px;
    transform: rotate(135deg);
  }
  .circle#circle1 {
    width: 175px;
    height: 175px;
    margin-top: 150px;
    margin-left: 100px;
    background-color: $green;
    opacity: .3;
    transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  }
  .circle#circle2 {
    width: 175px;
    height: 175px;
    margin-top: 52px;
    margin-left: 25px;
    background-color: $green;
    opacity: .3;
    transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  }
  .circle#circle3 {
    width: 300px;
    height: 300px;
    margin-top: 38px;
    background-color: $red;
    transition: 5s;
  }
  .container {
    transition: 1.5s;
  }
  .rect#rect5 {
    width: 300px;
    height: 5px;
    margin-top: 185px;
    background-color: rgba(256, 0, 0, .8);
  }
  
  @for $i from 5 through 10 {
    .rect#rect#{$i} {
      margin-top: 185px + #{$i} * 2;
    }
  }
}

@keyframes change-color {
  0% {
    background-color: $green;
  }
  50% {
    background-color: $blue;
    transform: translate(100px);
  }
  75% {
    background-color: $blue;
    transform: translate(-100px);
  }
  100% {
    background-color: $green;
    transform: translate(0);
  }
}
@keyframes change-color-2 {
  0% {
    background-color: $red;
  }
  50% {
    background-color: rgba(250, 10, 10, .9);
  }
  100% {
    background-color: $red;
  }
}
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rotate-blue-lines {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}