<div class="shapes-container">
  <div class="circle circle-01"></div>
  <div class="rectangle rectangle-01"></div>
  <div class="circle circle-02"></div>
  <div class="rectangle rectangle-02"></div>
</div>
/* Basic layout */
body {
  background: #283866;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.shapes-container {
  width: 600px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.circle {
  width: 200px;
  height: 200px;
  background: #C0F20C;
  border-radius: 50%;
}

.circle-02 {
  background: #DC366E;
}

.rectangle {
  width: 65px;
  height: 280px;
  background: #0CEAF2;
}

.rectangle-02 {
  background: #00A1FF;
}

/* Tweak positions */

.circle-01 {
   transform: translate(-9px, -15px);
}

.rectangle-01 {
   transform: translate(0, 10px) rotate(15deg);
}

.circle-02 {
   transform: translate(-3px, 3px);
}

.rectangle-02 {
   transform: translate(-4px, 15px) rotate(-8deg);
}

/* Animate on hover */

@keyframes shake-circle-01 {
  0% { transform: translate(-8px, -14px); }
  33% { transform: translate(-10px, -14px); }
  66% { transform: translate(-10px, -16px); }
  100% { transform: translate(-8px, -16px); }
}

.circle-01:hover {
  animation: shake-circle-01 .1s infinite alternate;
}

@keyframes shake-circle-02 {
  0% { transform: translate(-2px, 2px); }
  33% { transform: translate(-2px, 4px); }
  66% { transform: translate(-4px, 4px); }
  100% { transform: translate(-4px, 2px); }
}

.circle-02:hover {
  animation: shake-circle-02 .1s infinite alternate;
}

@keyframes shake-rectangle-01 {
  0% { transform: translate(-1px, 9px) rotate(14deg); }
  33% { transform: translate(-1px, 11px) rotate(16deg); }
  66% { transform: translate(1px, 11px) rotate(14deg); }
  100% { transform: translate(1px, 9px) rotate(16deg); }
}

.rectangle-01:hover {
  animation: shake-rectangle-01 .16s infinite alternate;
}

@keyframes shake-rectangle-02 {
  0% { transform: translate(-3px, 14px) rotate(-7deg); }
  33% { transform: translate(-3px, 16px) rotate(-9deg); }
  66% { transform: translate(-5px, 16px) rotate(-7deg); }
  100% { transform: translate(-5px, 14px) rotate(-9deg); }
}

.rectangle-02:hover {
  animation: shake-rectangle-02 .16s infinite alternate;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.