css实现左右摆动

最新推荐文章于 2024-06-11 22:32:41 发布

文i

最新推荐文章于 2024-06-11 22:32:41 发布

阅读量1.7k

点赞数

本文链接：https://blog.csdn.net/weixin_44955769/article/details/111595736

版权

话不多说，看图

会根据顶角反复左右摇摆自己想象
在这里插入图片描述
1、HTML

<template>
  <div>
    <div class="swing"></div>
  </div>
</template>

2、css

<style lang="less" scoped>
.swing {
  margin: 0 auto;
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
  animation: move 3s 0s initial;
  -webkit-animation: move 3s 0s infinite;
  transform-origin: top;
  -webkit-transform-origin: top;
}

@keyframes move {
  0%,
  65% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  70% {
    -webkit-transform: rotate(20deg);
    transform: rotate(20deg);
  }
  75% {
    -webkit-transform: rotate(-20deg);
    transform: rotate(-20deg);
  }
  80% {
    -webkit-transform: rotate(20deg);
    transform: rotate(20deg);
  }
  85% {
    -webkit-transform: rotate(-20deg);
    transform: rotate(-20deg);
  }
  90% {
    -webkit-transform: rotate(20deg);
    transform: rotate(20deg);
  }
  95% {
    -webkit-transform: rotate(-20deg);
    transform: rotate(-20deg);
  }
  100% {
    -webkit-transform: rotate(20deg);
    transform: rotate(20deg);
  }
}
</style>