css 扬声器项目 - （演示）

Posted 2021-05-13

/// Create Button Arrows and Animations \\\\


.buttons {
  // this sets the default styling for both buttons 
  
  
  background-color: transparent;
  /// try changing to grey 
  //try adding opacity:.5
  
  border: solid red;
  border-width: 0 6px 6px 0;
  // change the border width to make the arrows thicker
  
  display: inline-block;
  padding: 3px;
  animation-name: button-anim;
  // this controls the animation 
  
  animation-duration: 3s; 
  // this sets the animation duration
  
  animation-fill-mode: forwards;
  // this sets animation directions
  
  width: 50px;
  //button width
  
  height: 50px;
  //button height 
}

.buttons:hover {
  // this sets the hover state of buttons 
  
  background-color: transparent;
  border: solid red;
  border-width: 0 6px 6px 0;
  display: inline-block;
  padding: 3px;
}

.buttons:active {
  // this sets the active state of buttons 
  
  background-color: transparent;
  border: solid black;
  // the border here is black instead of green 
  
  border-width: 0 10px 10px 0;
  // the border width is also thicker
  
  display: inline-block;
  padding: 3px;
}


.buttons:visited {
  //this sets the visisted or pressed state of the buttons 
  
  background-color: transparent;
  border: solid black;
  border-width: 0 10px 10px 0;
  display: inline-block;
  padding: 3px;
}



.right_elements {
  // this class rotates right side elements and sets their animation 
  
  transform: rotate(-45deg);
  //rotation 
  
  -webkit-transform: rotate(-45deg);
   animation-name: right-anim;
  //animation name 
  
  
  animation-duration: 3s; 
  //duration 
  
  animation-fill-mode: forwards; 
  //direction 
  
  postition: absolute;
  //sets position style to absolute 
  
  animation-delay: 2s;
  //sets a load delay 
  
  right: -100px;
  //sets initial position off screen 
  
}

.left_elements {
  //sets the rotationa and animation of left side elements 
  
  transform: rotate(135deg);
  //sets rotation 
  
  
   -webkit-transform: rotate(135deg);
  
   animation-name: left-anim;
  // sets animation name 
  
  animation-duration: 3s; 
  //duration 
  
  animation-fill-mode: forwards; 
  //direction 
  
  postition: absolute;
  //position 
  
  animation-delay: 2s;
  //delay 
  
  left: -100px;
  //sets initial position off screen 
}




@keyframes button-anim {
  from{
      opacity:0;
    //sets initial fade state 
     
  }
  to{
    //transform: rotate(45deg) translate(7.3em) rotate(-45deg);
    opacity:.75;
    //end state 
  }
};



@keyframes left-anim {
    100% { left: 0; }
  //slide into position 0
}



@keyframes right-anim {
    100% { right: 0; }
  //slide into position 0
}





/* --------------------------------------------- */