Css3 provides animation and Transition animation properties, which can add some dynamic effects to the page and enhance the interactive experience.

We often use some ICONS on our website, such as up, down, left, right, close, play, stop, etc. We can use CSS to draw these ICONS, add dynamic effects to enhance the experience.

And I’m going to use transition to do some of these dynamic ICONS.

These ICONS are simple lines. We can draw three lines first.

Draw a line

This can be done with pseudo-elements to avoid unnecessary tags.

.line{
  width:18px;
  height:2px;
  display:inline-block;
  left:50%;
  top:50%;
  transform:translateX(-50%) translateY(-50%);
  transition:transform .3s,background-color .3s;
  &::before,&::after{
    content:' ';
    width:100%;
    height:100%;
    top:0;
    left:0;
    background-color:currentColor;
    transition:transform .3s;
  }
  &::before{
    transform:translateY(-6px);
  }
  &::after{
    transform:translateY(6px); }}Copy the code

Add the dynamic effect

Close icon ❌

Turn both sides of the line 45 degrees, hide the middle.

.close{
  background-color:rgba(255.255.255.0);
  &::before{
    transform:rotate(45deg);
  }
  &::after{
    transform:rotate(-45deg); }}Copy the code

Right point to the icon ➡️

Rotate both sides of the line 45 degrees, move it to the far right, and reduce it by half.

.right{
  &::before{
    transform:translateX(5px) translateY(-4px) rotate(45deg) scaleX(. 5);
  }
  &::after{
    transform:translateX(5px) translateY(4px) rotate(-45deg) scaleX(. 5); }}Copy the code

Point to the icon ⬇️

Rotate both sides of the line 45 degrees, move it to the far right, and reduce it by half. The middle line is rotated 90 degrees.

.bottom{
  transform:translateX(-50%) translateY(-50%) rotate(-90deg);
  &::before{
    transform:translateX(-5px) translateY(-4px) rotate(-45deg) scaleX(. 5);
  }
  &::after{
    transform:translateX(-5px) translateY(4px) rotate(45deg) scaleX(. 5); }}Copy the code

Play and stop ICONS

Play state: Rotate both sides of the line 90 degrees, the middle line hidden.

Stop: Show the middle line and move it to the left. Move and rotate the lines on both sides to form a triangle.

.play{
  transform:translateX(-50%) translateY(-50%) rotate(-90deg);
  background-color:rgba(0.0.0.0);
  &::before{
    transform-origin:0 0;
  }
  &::after{
    transform-origin:100% 100%;
  }
  &.pause{
    background-color:currentColor;
    transform:translateX(-75%) translateY(-50%) rotate(-90deg);
    &::before{
      transform:rotate(60deg);
    }
    &::after{
      transform:rotate(-60deg); }}}Copy the code