HTML + CSS 环形文字人物介绍

电玩女神 2024-05-24 04:21 56阅读 0赞

### 环形文字人物介绍 ###

先看效果（[?完整代码在这里?][Link 1]）  
![在这里插入图片描述][137f20f2acc8472ea7050912b9c00720.png_pic_center]

#### HTML ####

#### CSS ####

1.  初始化全局样式, 设置背景色, 并设置子元素水平垂直居中

body {
        
      margin: 0;
      padding: 0;
      min-height: 100vh;
      background-color: #34495e;
      display: flex;
      justify-content: center;
      align-items: center;
    }

1.  设置卡片容器样式

.info {
        
      height: 400px;
      width: 400px;
      border: 1px solid #eee;
      position: relative;
      border-radius: 50%;
    }

1.  设置卡片图片垂直水平居中

.info .info-avatar {
        
      position: absolute;
      height: 80%;
      width: 80%;
      object-fit: cover;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      border-radius: 50%;
    }

1.  设置周围人物介绍
    
     *  ?关键思路在于: 将每个字所在的 `span` 设置 `absolute` 布局, 并以 `left center` 为中心转动相对应的角度
     *      .info span {
                    
              position: absolute;
              height: 100%;
              left: 50%;
              top: 0;
              font-size: 2rem;
              color: #eee;
              transform-origin: left;
              transform: rotate(calc(var(--i) * 40deg));
            }
     *  一共 `9` 个字, 平分 `360`度, 故每个字依次转动 `40deg`
     *  ?`transform-origin` 必须为 `left`, 如果只写一个属性值 `left`, 另一个默认为 `center`. 因为每个字母的宽度不一样, 如果省略了 `transform-origin` 变换中心变成 `center center`, 就会造成文字不在一个圈上, 如下图
     *  ![在这里插入图片描述][750ec7e804904a2eb01d8f02b0808b1b.png_pic_center]
     *  ?另外值得注意的地方是, `span` 的位置是 `left: 50%`, 此时转动形成的⚪的半径是 `info` 的边长, 但如果 `left: 0;` 而且 `transform-origin` 为默认值的话, 形成的⚪的半径就是 `info` 的边长的`根号 2`.

[Link 1]: https://code.juejin.cn/pen/7103149267388203022
[137f20f2acc8472ea7050912b9c00720.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/499065bc52c840e4afa5db85181b1ed3.png
[750ec7e804904a2eb01d8f02b0808b1b.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/2c14e5db74734b2e95dfa360a709fc47.png