动画圆圈文字标志效果

效果展示

CSS 知识点

• 实现圆圈文字
• animation 属性回顾

实现思路

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

实现整体页面布局

<div class="circle">
  <div class="logo">div>
  <div class="text">
    
    <p>
      Muhammad Isshad - Creative UX/UI Designer - -
    p>
  div>
div>
1
2
3
4
5
6
7
8
9

实现外部大圆和 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%;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

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

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

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

.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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

完整代码下载

完整代码下载