效果展示

动画圆圈文字标志效果.png

CSS 知识点

实现圆圈文字
animation 属性回顾

实现思路

从效果的实现思路很简单，其实就是两个圆圈就可以实现。外层大圆（灰色）用于圆圈文字的展示，而内圆（藏青色）主要用于存放 Logo 图片。布局采用绝对定位。具体层次结构如下图。

动画圆圈文字标志效果实现思路.png

实现整体页面布局

<div class="circle">
  <div class="logo"></div>
  <div class="text">
    <!-- &nbsp; 主要是用于单词之间的间距 -->
    <p>
      Muhammad&nbsp;Isshad&nbsp;-&nbsp;Creative&nbsp;UX/UI&nbsp;Designer&nbsp;-&nbsp;-
    </p>
  </div>
</div>

实现外部大圆和 Login 样式

.circle {
  position: relative;
  height: 400px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  /* 用于测试文字时的样式 */
  /* width: 400px; */
  /* background: #ccc; */
}

.logo {
  position: absolute;
  width: 310px;
  height: 310px;
  background: url(./user-3.png) no-repeat center;
  background-color: aqua;
  background-size: cover;
  border-radius: 50%;
}

圆圈文字拆分为多个 span 标签

const text = document.querySelector(".text p");
text.innerHTML = text.innerText
  .split("")
  .map((char, i) => {
    // 进行角度旋转，从而实现圆圈文字，旋转角度影响字符之间的间距（8.7是本案例中最适合的间距大小），
    return `<span style="transform: rotate(${i * 8.7}deg)">${char}</span>`;
  })
  .join("");

编写圆圈文字的样式和动画

.text {
  position: absolute;
  width: 100%;
  height: 100%;
  animation: rotateText 10s linear infinite;
}

@keyframes rotateText {
  0% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0);
  }
}

.text span {
  position: absolute;
  left: 50%;
  font-size: 1.2em;
  /* 文字圆圈大小 = 外层大圈 / 2*/
  transform-origin: 0 200px;
}