CSS图片环形运动效果

图片环形运动效果

<template>
  <div class="tube">
    <img src="https://tse1-mm.cn.bing.net/th/id/R-C.a23d99ae05cb5a0a352f70989c1b82e1?rik=Cv3Ss1AYVu6mVw&riu=http%3a%2f%2fscimg.jianbihuadq.com%2f202006%2f2020062019313122.jpg&ehk=W5Jfx3f%2ffHh60PbV7xtevhkgqa0MGDh2%2fdfV%2fdkX3hE%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1" class="ball1" />
    <img src="https://pic3.zhimg.com/v2-9c601bbb96891ee1105780da6a3b72b1_r.jpg" class="ball2" />
    <img src="https://photo.tuchong.com/17060916/f/647351782.jpg" class="ball3" />
    <img src="https://pic3.zhimg.com/v2-0c87802281374228ba1ba6cd7753c6ba_r.jpg" class="ball4" />
  </div>
</template>

<script>
export default {
  mounted() {},
  methods: {},
};
</script>

<style>
body {
  background: none;
  font: bold 100% Helvetica, sans-serif;
}

@keyframes move1 {
  from {
    transform: rotate(0) translateY(-200px) translateY(50%) rotate(1turn);
  }
  to {
    transform: rotate(1turn) translateY(-200px) translateY(50%) rotate(0);
  }
}

@keyframes move2 {
  from {
    transform: rotate(0) translateY(200px) translateY(-50%) rotate(1turn);
  }
  to {
    transform: rotate(1turn) translateY(200px) translateY(-50%) rotate(0);
  }
}

@keyframes move3 {
  from {
    transform: rotate(0) translateX(-200px) translateX(50%) rotate(1turn);
  }
  to {
    transform: rotate(1turn) translateX(-200px) translateX(50%) rotate(0);
  }
}

@keyframes move4 {
  from {
    transform: rotate(0) translateX(200px) translateX(-50%) rotate(1turn);
  }
  to {
    transform: rotate(1turn) translateX(200px) translateX(-50%) rotate(0);
  }
}

.tube {
  position: relative;
  left: 10%;
  top: 10%;
  width: 400px;
  height: 400px;
  padding: 20px;
  border-radius: 50%;
  background: #c6c309;
}

.ball1 {
  position: absolute;
  display: block;
	width: 100px;
  height: 100px;
	left: calc(50% - 50px);
  top: calc(50% - 50px);
	border-radius: 50%;
	overflow: hidden;
  animation: 3s move1 linear;
  animation-fill-mode: forwards;
}

.ball2 {
  position: absolute;
  display: block;
	width: 100px;
  height: 100px;
	left: calc(50% - 50px);
  top: calc(50% - 50px);
	border-radius: 50%;
	overflow: hidden;
  animation: 3s move2 linear;
  animation-fill-mode: forwards;
}

.ball3 {
  position: absolute;
  display: block;
	width: 100px;
  height: 100px;
	left: calc(50% - 50px);
  top: calc(50% - 50px);
	border-radius: 50%;
	overflow: hidden;
  animation: 3s move3 linear;
  animation-fill-mode: forwards;
}

.ball4 {
  position: absolute;
  display: block;
	width: 100px;
  height: 100px;
	left: calc(50% - 50px);
  top: calc(50% - 50px);
	border-radius: 50%;
	overflow: hidden;
  animation: 3s move4 linear;
  animation-fill-mode: forwards;
}




</style>