少啰嗦，先看效果圖：

（註意文字和太極圖均可旋轉，太極圖使用css寫成的！）

css：

/*太極圖css--*/

.Taiji { margin: 100px;
width: 192px;
height: 96px;
background-color: #eee;
border-color: #333;
border-style: solid;
border-width: 4px 4px 100px 4px;
border-radius: 100%;
position: relative;
-webkit-animation: circleReverse 32s infinite linear; /*無限旋轉*/
}
.Taiji:before {
content: "";
width: 24px;
height: 24px;
border: 36px solid #333;
background-color: #eee;
border-radius: 100%;
position: absolute;
top: 50%;
left: 0;
}
.Taiji:after {
content: "";
width: 24px;
height: 24px;
border: 36px solid #eee;
background-color: #333;
border-radius: 100%;
position: absolute;
top: 50%;
right: 0;
}

/*太極圖 css--end*/

/*環形文字css--*/
.circular{
width: 232px;
height: 232px;
position: absolute;
left: -20px;
top: -20px;
font-size: 11px;
font-family: "microsoft yahei";
color: #333;
-webkit-animation: circle 16s infinite linear; /*無限旋轉*/
}
.circular path { fill: none; }
.circular svg { display: block; overflow: visible; }

/*環形文字css--end*/

/*旋轉動畫css--animation*/
@-webkit-keyframes circle{ /*其父元素逆向旋轉所以首先要抵消掉旋轉的360度*/
0%{ transform:rotate(0deg); }
100%{ transform:rotate(-720deg); }
}
@-webkit-keyframes circleReverse{
0%{ transform:rotate(0deg); }
100%{ transform:rotate(360deg); }
}

/*css--end*/

html：

<div class="Taiji">
　　<div class="circular">以無法為有法&nbsp;&nbsp;&nbsp;&nbsp;以無限為有限&nbsp;&nbsp;&nbsp;&nbsp;夫唯不爭&nbsp;&nbsp;&nbsp;&nbsp;天下莫能與之爭</div>
</div>

javascript：

/*封裝函數，文檔中如果需要環形文字只需寫帶有circular的class名的容器就行了（用幾個就寫幾個）。舉個栗子：<div class="circular">以無法為有法</div>*/

function $$(selector, context) {
context = context || document;
var elements = context.querySelectorAll(selector);
return Array.prototype.slice.call(elements);
}

$$(‘.circular‘).forEach(function(el) {
var NS = "http://www.w3.org/2000/svg";

var svg = document.createElementNS(NS, "svg");
svg.setAttribute("viewBox", "0 0 100 100");

var circle = document.createElementNS(NS, "path");
circle.setAttribute("d", "M0,50 a50,50 0 1,1 0,1z");
circle.setAttribute("id", "circle");

var text = document.createElementNS(NS, "text");
var textPath = document.createElementNS(NS, "textPath");
textPath.setAttributeNS("http://www.w3.org/1999/xlink", ‘xlink:href‘, ‘#circle‘);
textPath.textContent = el.textContent;
text.appendChild(textPath);

svg.appendChild(circle);
svg.appendChild(text);

el.textContent = ‘‘;
el.appendChild(svg);
});

參考：

http://www.jqhtml.com/8045.html

https://www.w3cplus.com/css3/css-secrets/circular-text.html

環形文字 + css3制作圖形 + animation無限正反旋轉的一個小demo