Ring text + CSS3 make graphics + animation A small demo of infinite positive and negative rotation

Less verbose, look first:

(Note the text and Taiji figure can be rotated, Taiji figure use CSS written!) ）

Css:

/* Taiji Figure 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; /* Infinite rotation */
}
. 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;
}

/* Taiji Figure css--end*/

/* Ring Text 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; /* Infinite rotation */
}
. Circular path {fill:none;}
. Circular svg {display:block; overflow:visible;}

/* Ring Text css--end*/

/* Rotate animation css--animation*/
@-webkit-keyframes circle{/* The parent element reverses rotation so the first thing to offset the rotation is 360 degrees */
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" > In order to be unable to have the law &nbsp;&nbsp;&nbsp;&nbsp; Unlimited for limited &nbsp;&nbsp;&nbsp; &nbsp; the only way to fight &nbsp;&nbsp;&nbsp;&nbsp; is to compete with the world </div>
</div>

Javascript:

/* Package function, if you need circular text in the document just write a container with the class name of circular (write a few in a few). For a chestnut: <div class= "Circular" > to be unable to have a French </div>*/

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

$$ ('. Circular '). ForEach (The 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 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);
});

Reference:

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

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

Ring text + CSS3 make graphics + animation A small demo of infinite positive and negative rotation