欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

css3钟摆效果

程序员文章站 2022-03-05 09:29:05
...

css3钟摆效果

.pendulum-styl {
  -webkit-animation: run 1s ease-in-out alternate infinite;
  -moz-animation: run 1s ease-in-out alternate infinite;
  animation: run 1s ease-in-out alternate infinite;

  @keyframes run {
    0% {
      -webkit-transform: rotate(10deg);
      -webkit-transform-origin: top center;
      -moz-transform: rotate(10deg);
      -moz-transform-origin: top center;
      transform: rotate(10deg);
      transform-origin: top center;
    }
    100% {
      -webkit-transform: rotate(-10deg);
      -webkit-transform-origin: top center;
      -moz-transform: rotate(-10deg);
      -moz-transform-origin: top center;
      transform: rotate(-10deg);
      transform-origin: top center;
    }
  }
}

相关标签: style