搜尋
  • estherjan

Squiggle with Primary Colors


The final view of my half transparent primary colors :P

This exercise is to practice basic animations with CSS and HTML. I started the squiggle with a simple red circle dot.

The original red dot

Since I had just completed the previous exercise, with the Ode to Mondrian, I was so into the wonderful image created with just red, yellow, and blue. I wanted to create a simple animation to showcase the three primary colors.

/* CSS */

red {
  position:absolute;
  height: 100px;
  width: 100px;
  border-radius: 50%;
  background-color: red;
  left: 100px;
  top: 60px;
  box-shadow: 5px 5px 5px grey;
  animation-name: example;
  animation-duration:5s;
  animation-iteration-count: infinite;
}

@keyframes example {
  0% {background-color: red;}
  50% {opacity: 0.8; left: 130px; top: 40px;}
  100% {background-color: red; opacity: 0.6; left: 150px; top: 60px; box-shadow: none;}
}

blue {
  position:absolute;
  height: 100px;
  width: 100px;
  border-radius: 50%;
  background-color: blue;
  left: 270px;
  top: 60px;
  box-shadow: 5px 5px 5px grey;
  animation-name: example2;
  animation-duration:5s;
  animation-iteration-count: infinite;
}

@keyframes example2 {
  0% {background-color: blue;}
  50% {opacity: 0.8; left: 240px; top: 140px;}
  100% {background-color: blue; opacity: 0.6; left: 190px; top: 120px; box-shadow: none;}
}

yellow {
  position:absolute;
  height: 100px;
  width: 100px;
  border-radius: 50%;
  background-color: yellow;
  left: 180px;
  top: 200px;
  box-shadow: 5px 5px 5px grey;
  animation-name: example3;
  animation-duration:5s;
  animation-iteration-count: infinite;
}

@keyframes example3 {
  0% {background-color: yellow;}
  50% {opacity: 0.8; left: 50px; top: 140px;}
  100% { opacity: 0.6; left: 120px; top: 120px; box-shadow: none;}
}

I learned about keyframes through w3schools and the tutorials in SkillShare.

Having all the properties added in the CSS code, my HTML is very simple:

/* HTML */

<red>
</red>
<blue>
</blue>
<yellow>
</yellow>

The following is the final production.


I added a pale shadow beneath each dots, and try to make the animation as smooth as possible. However, because I'm using absolute positioning, the x and y coordinates are quite hard for me to plan out the routes of the dots.


Will want to look into more sophisticated ways to calculate out the routes for the dots to go through a swirl, and meet in the middle of the canvas.


site logo_new-03.png