HTML+CSS左右摇动效果代码分享

最新推荐文章于 2022-10-22 12:05:19 发布

于飞SEO

最新推荐文章于 2022-10-22 12:05:19 发布

阅读量286

点赞数

分类专栏：站长技术交流

本文链接：https://blog.csdn.net/q906270629/article/details/118084125

版权

站长技术交流专栏收录该内容

235 篇文章 10 订阅

订阅专栏

演示

代码

HTML

<span class="go">立即咨询</span>

CSS

.go {
  position: absolute;
  top: 50px;
  right: 100px;
  display: inline-block;
  width: 220px;
  height: 52px;
  background-color: #E84B4B;
  box-shadow: 6px 5px 3px 1px rgba(11, 27, 36, 0.12);
  border-radius: 6px;
  text-align: center;
  color: #fff;
  font-size: 28px;
  line-height: 49px;
  animation: go 3s linear infinite;
}

@keyframes go {
  0% {
    transform: rotate(0deg);
  }
  5% {
    transform: rotate(5deg);
  }
  10% {
    transform: rotate(0deg);
  }
  15% {
    transform: rotate(-5deg);
  }
  20% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(5deg);
  }
  30% {
    transform: rotate(0deg);
  }
  35% {
    transform: rotate(-5deg);
  }
  40% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(0deg);
  }
}