css3的一个小动画-----声音跳动

做视频的时候感觉每集在播放的时候有一个小动画在跳动感觉挺好看的，就觉得自己也要做一个，以前做的那个不是在同一个底线上的，他是来回跳动的，看着有点乱1，这星期我就把他的高度调了一下，后来发现我做的和爱奇艺上的是上下颠倒的，试试translateY的正负，发现越试越离谱，最后就想到了转他1890度，终于达到了想要的效果。

	<div class='bounc'>        
		<ul>                                                         							
	       <li></li>
	       <li></li>
	       <li></li>
	 </ul>
 </div>

  // 音量跳动
       .bounce{
      	 position: absolute;
         top: 19px;
         left: -16px;
        ul{
         position: relative;
         display: flex;
         height:10px ;
         transform: rotate(180deg); 
         -o-transform: rotate(180deg); 
         -webkit-transform: rotate(180deg); 
         -moz-transform: rotate(180deg); 
            li{
              list-style: none;
              width: 2px;
              height: 5px;
              margin-right: 1px;
              background-color: #00cc4c;
                &:nth-child(1){
                  animation: love1 2s 0.4s infinite;
                }
                &:nth-child(2){
                   animation: love2 2s 0.2s infinite;
                }
                &:nth-child(3){
                  animation: love3 2s 0s infinite;
            	}
        }
      / 下面开始定义动画
       @keyframes love1 {
         30%,50%{
            height: 7px;
            transform: translateY(0);                                 
         }
         70%,100%{
           height: 2px;
           transform: translateY(0);
        }
	}
    @keyframes love2 {
        30%,50%{
           height: 5px;
           transform: translateY(0);
        }
        70%,100%{
          height: 2px;
          transform: translateY(0);
        }
   }
   @keyframes love3 {
      30%,50%{
          height: 3px;
          transform: translateY(0);
 		}
        70%,100%{
           height: 2px;
           transform: translateY(0);
       }
     }
	}
}

这周还是在写评论，以前写的评论自己想的太容易了，就id什么的都传的是一个死值，现在每一条评论都要实现功能，导致之前写的就有点乱。有些id明明在上边就可以获取到，在下边的.then里面就获取不到，后来用了一个数组push，先把他们存到数组里面，再去用就可以了。
下周计划：我们组写的有点慢了，要抓紧时间写项目了，下周就要考核了，加油。

标签：css3,180deg,rotate,translateY,2px,transform,height,-----,小动画
来源： https://blog.csdn.net/qq_53280805/article/details/121449263