少啰嗦，先看效果图：

（注意文字和太极图均可旋转，太极图使用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