圆形环绕排列

12 篇文章 0 订阅
11 篇文章 0 订阅

需求:有多个圆形环绕中间的圆形排列

代码:

<template>
  <div class="demo">
    <ul>
      <li v-for="(item,index) in transform" :key="item" :style="{transform: item}">{{index+1}}</li>
    </ul>
  </div>
</template>

 

export default {
  computed: {
    transform() {
      let num = 11
      let angle = 360/num
      let arr = []
      for (let index = 0; index < num; index++) {
        arr.push(index*angle)
      }
      arr = arr.map(d => this.getAxis(d) )
      return arr
    }
  },
  methods: {
    getAxis(angle) {
      // 公式,r-半径,angle-角度
      // x: r+r*Math.sin(angle*Math.PI/180)
      // y: r-r*Math.cos(angle*Math.PI/180)
      return `translate(${200*Math.sin(angle*Math.PI/180)+200}px, ${200-200*Math.cos(angle*Math.PI/180)}px)`
    }
  }
}
.demo {
  width: 600px;
  height: 600px;
  background-color: rgb(255, 195, 195);
  padding: 100px;
  box-sizing: border-box;
}
ul,
li {
  margin: 0;
  list-style-type: none;
  padding: 0;
}
ul {
  width: 400px;
  height: 400px;
  background-color: #fff;
  border-radius: 50%;
  position: relative;
}
li {
  width: 80px;
  height: 80px;
  position: absolute;
  background-color: rgb(97, 153, 74);
  color: white;
  font-size: 25px;
  border-radius: 50%;
  line-height: 80px;
  text-align: center;
  /* left: 50%; */
  margin-left: -40px;
  margin-top: -40px;
  transform-origin: 0px 0px;
}
  • 5
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
要将CSS文字排列圆形,我们可以使用CSS的transform属性和伪类来实现。下面是一个简单的示例: 首先,我们创建一个包含文字的div,并为其添加一个类名。 ```html <div class="circle-text">CSS</div> ``` 然后,我们使用CSS样式来定义该类名的样式。 ```css .circle-text { width: 200px; height: 200px; border-radius: 50%; /* 将div变成圆形 */ text-align: center; /* 让文字居中 */ line-height: 200px; /* 设置行高等于div的高度,使文字在垂直方向上居中 */ background-color: gray; /* 添加背景颜色 */ color: white; /* 设置字体颜色为白色 */ font-size: 24px; /* 设置字体大小 */ transform: rotate(180deg); /* 将文字沿着圆心旋转180度,以便文字在圆形中水平排列 */ } .circle-text::before { content: ''; /* 使用伪类添加一个空的内容 */ width: 50%; /* 将伪类的宽度设置为50%,刚好是文字宽度的一半 */ height: 100%; /* 伪类的高度和div相同 */ position: absolute; /* 绝对定位 */ top: 0; /* 将伪类上边距设置为0 */ left: 50%; /* 将伪类的左边距设置为50% */ background-color: gray; /* 使用与div相同的背景颜色 */ transform-origin: bottom; /* 设置旋转的起始点为底部,使其旋转到div的上方 */ transform: rotate(180deg); /* 将伪类沿着圆心旋转180度,以便呈现圆形 */ } ``` 通过以上CSS代码,我们可以实现将文字排列圆形。我们使用div的border-radius属性将其变成圆形,然后使用transform属性和伪类来旋转文字和伪类,以实现文字在圆形中水平排列。通过调整div的宽度、高度、字体大小、背景颜色等属性,我们可以进一步自定义圆形文字的样式。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值