css 常用动画效果
文章目录
1.上下运动动画
            
            
              html
              
              
            
          
           <div class="box">
  <div class="item"></div>
</div>- css
            
            
              css
              
              
            
          
          .box {
  position: relative;
}
.item {
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: red;
  top: 18px;
  animation: move-up-and-down 2s linear infinite;
}
@keyframes move-up-and-down {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(5px);
  }
}2.宽度变化动画
            
            
              css
              
              
            
          
          div {
  width: 50px; 
  height: 20px; 
  background-color: #ccc; 
  transition: width 1s; /* 宽度变化效果,过渡时间为1秒 */
}
div:hover {
  width: 200px; /* 鼠标悬停时的宽度 */
}