效果展示
动画圆圈文字标志效果.png
CSS 知识点
- 实现圆圈文字
- animation 属性回顾
实现思路
从效果的实现思路很简单，其实就是两个圆圈就可以实现。外层大圆（灰色）用于圆圈文字的展示，而内圆（藏青色）主要用于存放 Logo 图片。布局采用绝对定位。具体层次结构如下图。
动画圆圈文字标志效果实现思路.png
实现整体页面布局
<div class="circle">
<div class="logo"></div>
<div class="text">
<!-- 主要是用于单词之间的间距 -->
<p>
Muhammad Isshad - Creative UX/UI Designer - -
</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;
}
