这样的弧形文字怎么做,使用hbulid 5,最好用css+jq写

html-css095

这样的弧形文字怎么做,使用hbulid 5,最好用css+jq写,第1张

<!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>

在实现页面五花八门的有特色的ui时，我们有时会遇到要用实现一个弧形，而这样的弧形要怎么实现呢？用图片？不太优雅，这样就要无故多加载一张图片了，这里来说说怎么用css的after伪类来实现弧形。

写一个主元素，并给该元素添加伪类来设置成圆，取该圆的一部分来作为我们看到的圆弧。

第一种（正圆弧）：

实现效果：

参照上面的 要点 ，大概也能知道个原理了吧。 看到的圆弧高度等于主元素高度，伪元素绝对于主元素定位，左右居中，上移100%；圆弧弧度取决于伪类的宽度 ，这点放到这里来说，是怕放在上面说反而让人觉得复杂了。

如果还不理解的话，可以把上面不必要的样式注释掉，辅助理解:

效果：

可以多调调高度宽度来帮助理解。

第二种（有角度的弧）：

效果图：

实现角度弧的思路与正圆弧差不多，不同地方是：

不同点1. 伪元素大小与主元素一样，覆盖在主元素上；

不同点2. 设置伪元素的单个角度；