使用hbulid 5,最好用css+jq写

多的就不说了直接上代码

<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
  body {
    font: bold 100% Helvetica, sans-serif;
}

.circular {
    width: 30em;
    height: 30em;
    margin: 15em auto 0;
}

.circular svg {
    display: block;
    overflow: visible;
    xtransition: 10s linear transform;
}

.circular svg:hover { transform: rotate(-2turn); }

.circular text { fill: currentColor }
.circular path { fill: none; }
</style>
<body>
<div class="circular">
   满80元使用满80元使用满80元使用. 满8ZCz
</div>
</body>
<script type="text/javascript">
  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);
});
</script>
</html>

这样的弧形文字怎么做

使用hbulid 5,最好用css+jq写