项目当中小实例，小球围绕大球旋转

最新推荐文章于 2024-10-11 17:39:47 发布

柒刖

最新推荐文章于 2024-10-11 17:39:47 发布

阅读量394

点赞数 2

文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/lzz20010903/article/details/138115874

版权

本文介绍了一个使用Vue3编写的前端页面，展示了如何通过CSS动画实现一个内层正方形旋转带动内部圆形小球定位的效果，并提到了响应式设计的潜力，鼓励读者交流和改进。

摘要由CSDN通过智能技术生成

完整代码

<template>
  <div id="box">

      <div
        class="min_ball"
        v-for="(item, index) in list"
        :key="item"
        :style="{ rotate: index * (360 / list.length) + 'deg' }"
      >
    <div class="min_ball_cld"></div>
    </div>
      <div id="ball">
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  ref,
  reactive,
  toRefs,
  toRef,
  computed,
  watch,
  watchEffect,
} from "vue";

let list = ref([1, 2, 4, 5, 6]);
</script>

<style lang="scss" scoped>
* {
  padding: 0px;
  margin: 0px;
}
#box {
  height: 98vh;
  width: 100%;
  background: url("https://hbimg.b0.upaiyun.com/b2ecec033c1aa8ffaffa419da50986250792d68417a5d-5Izx2T_fw658");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  overflow-y: hidden;
  overflow-x: hidden;
}
/* 大球样式*/
#ball {
  width: 20vw;
  height: 20vw;
  background: rgba(21, 0, 94, 0.5);
  border-radius: 50%;
  border: 1px solid #70ff1d;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/*小球样式*/
.min_ball {
    position: absolute;
    width: 15vw;
    height: 15vw;
    /*background: rgba(72, 26, 238, 0.5);
    border: 1px solid red;*/
    top: 50%;
    left: 50%;
    transform-origin: left top;
    animation: min_balls 12s infinite linear;
    .min_ball_cld{
        width: 50%;
        height: 50%;
        background: rgba(255, 255, 255, 0.5);
        border-radius: 50%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-20%, -20%);
    }
  }
  @keyframes min_balls {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
</style>

解析：主要是通过在内层定义一个正方体旋转，然后在里面设置一个圆，来实现小球的定位