[JavaScript知识库] HTML + CSS 环形文字人物介绍

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> HTML + CSS 环形文字人物介绍 -> 正文阅读

[JavaScript知识库]HTML + CSS 环形文字人物介绍

环形文字人物介绍

先看效果（👉完整代码在这里👈）
在这里插入图片描述

HTML

<body>
  <div class="info">
    <img class="info-avatar" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic4.zhimg.com%2Fv2-2f08406908e855f14ca14b0149505bef_r.jpg&refer=http%3A%2F%2Fpic4.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1656419577&t=f9209b4ea663d012282662ba3f9404be" alt="">
    <span style="--i: 1">T</span> 
    <span style="--i: 2">O</span> 
    <span style="--i: 3">M</span> 
    <span style="--i: 4">&</span> 
    <span style="--i: 5">J</span> 
    <span style="--i: 6">E</span> 
    <span style="--i: 7">R</span> 
    <span style="--i: 8">R</span> 
    <span style="--i: 9">Y</span> 
  </div>
</body>

CSS

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

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

设置卡片容器样式

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

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

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

设置周围人物介绍
- 📕关键思路在于: 将每个字所在的 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, 就会造成文字不在一个圈上, 如下图
- 📕另外值得注意的地方是, span 的位置是 left: 50%, 此时转动形成的?的半径是 info 的边长, 但如果 left: 0; 而且 transform-origin 为默认值的话, 形成的?的半径就是 info 的边长的根号 2.