多个扇形元素绕圆旋转

拿我格子衫来

发布于 2023-10-19 06:17:34

31900

代码可运行

文章被收录于专栏：TopFETopFE

运行总次数：0

代码可运行

效果图

这种效果有很多方案，最后选择了一个比较简单的方案，就是一个position: relative;的 div 。包裹5个position: absolute;的div。通过旋转，调整5个div的 top 与 left，而产生弧度，并使中心点都指向圆心。黄色扇形与文字都是在5个div内部。

当最外层的圆旋转时，内部的所有元素都跟着旋转。

有一个缺点是，因为是div模拟 72度的扇形。两两之间会有重叠。如下

如果要解决这个问题，就需要使用css3的缩放 transform: skewX(342deg); 但是一旦缩放，内部的元素也会跟着缩放，那么就需要再对其调整。应该还有其他的办法。大家多试试吧。

<template>
  <div class="container">
    <!-- <div class="horizontal-line"></div>
    <div class="vertical-line"></div> -->
    <div class="circle">
      <div class="content-item">
        <p class="item-text">金</p>
        <img :src="as" width="100" height="auto" class="image" />
      </div>
      <div class="content-item">
        <p class="item-text">木</p>
        <img :src="as" width="100" height="auto" class="image" />
      </div>
      <div class="content-item">
        <p class="item-text">水</p>
        <img :src="as" width="100" height="auto" class="image" />
      </div>
      <div class="content-item">
        <p class="item-text">火</p>
        <img :src="as" width="100" height="auto" class="image" />
      </div>
      <div class="content-item">
        <p class="item-text">土</p>
        <img :src="as" width="100" height="auto" class="image" />
      </div>
    </div>
  </div>
</template>
<script>
import as from '@/assets/images/1.png'
export default {
  data() {
    return {
      as,
    }
  },
}
</script>
<style lang="less">
@circleSize: 100px;
@itemSize: 120px;
.container {
  margin-left: 200px;
  margin-top: 100px;
  width: 500px;
  height: 500px;
  background: #fff;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.horizontal-line {
  position: absolute;
  width: 100%;
  height: 1px;
  z-index: 999;
  background-color: red;
}
.vertical-line {
  position: absolute;
  z-index: 999;
  width: 1px;
  height: 100%;
  background-color: red;
}
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.circle {
  height: @circleSize;
  width: @circleSize;
  background: #9760b6;
  border-radius: 50%;
  position: relative;
  animation: rotate 15s infinite linear;
  .content-item {
    overflow: hidden;
    width: @itemSize;
    height: @itemSize;
    position: absolute;
    bottom: 50px;
    left: 50px;
    z-index: 99;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    .item-text {
      margin-bottom: 20px;
      border-bottom: 5px solid transparent;
    }
    .image {
      visibility: hidden;
    }
    &:hover {
      .image {
        visibility: visible;
      }
    }
  }
  .content-item:nth-child(1) {
    // background: #5971c9;
    left: -10px;
    .item-text {
      border-bottom: 5px solid #5971c9;
    }
  }
  .content-item:nth-child(2) {
    // background: #97cc71;
    bottom: 8px;
    left: 50px;
    rotate: 68deg;
    .item-text {
      border-bottom: 5px solid #97cc71;
    }
  }
  .content-item:nth-child(3) {
    // background: #f5c74e;
    bottom: -62px;
    left: 34px;
    rotate: 136deg;
    .item-text {
      border-bottom: 5px solid #f5c74e;
    }
  }
  .content-item:nth-child(4) {
    // background: #e56564;
    bottom: -73px;
    left: -38px;
    rotate: 205deg;
    .item-text {
      border-bottom: 5px solid #e56564;
    }
  }
  .content-item:nth-child(5) {
    // background: #7ec0e0;
    bottom: 3px;
    left: -72px;
    rotate: 285deg;
    .item-text {
      border-bottom: 5px solid #7ec0e0;
    }
  }
}
</style>