动画圆圈文字标志效果

效果展示

CSS 知识点

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

实现思路

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

实现整体页面布局

<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;
}

完整代码下载

完整代码下载