css小动画抖动呼吸

最新推荐文章于 2023-11-09 14:53:54 发布

千璃夫人

最新推荐文章于 2023-11-09 14:53:54 发布

阅读量255

点赞数

文章标签： css css3 html5

本文链接：https://blog.csdn.net/qq_39363987/article/details/105616232

版权

按钮呼吸灯效果

.next-btn {
  width: 2.2rem;
  height: 0.66rem;
  position: fixed;
  bottom: 1rem;
  background-image: url(../assets/images/game_next.png);
  background-size: 100% 100%;
  z-index: 10;
  animation-name: breathing;
  animation-duration: 1.2s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes breathing {
  20% {
   
    transform: scale(1);
  }
  40% {
    transform: scale(1.05);
  }
  60% {
    transform: scale(1.1);
  }
   80% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

抖动效果
@keyframes dou1 {
0% {
-webkit-transform: translate(0, 0px);
}
50% {
-webkit-transform: translate(-0.1rem, 0.1rem);
}
100% {
-webkit-transform: translate(0, 0px);
}
}
.dou1 {
animation: dou1 0.5s infinite;
animation-fill-mode: both;
}