实例演示_纯CSS实现环形文字效果

<!DOCTYPE html>
<html lang="en" >

<head>

body {
  margin: 0;
  background: #000;
  text-align: center;
}

svg {
  width: 33%;
}

rect {
  fill: #FE0304;
}

text {
  font-size: 63px;
  font-family: FranklinGothic-Heavy, Frankin Gothic, sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 21px;
  fill: white;
}
</style>

</head>

<body translate="no" >
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 500">
<defs>
	<path d="M50,250c0-110.5,89.5-200,200-200s200,89.5,200,200s-89.5,200-200,200S50,360.5,50,250" id="textcircle">
		<animateTransform
            attributeName="transform"
            begin="0s"
            dur="30s"
            type="rotate"
            from="0 250 250"
            to="360 250 250"
            repeatCount="indefinite" 
			/>
	</path>
	<symbol>
	    <rect x="225" y="135" width="50" height="230" id="redstripe"/>
	</symbol>
</defs>
	<use xlink:href="#redstripe" />
	<use xlink:href="#redstripe" transform="rotate(90 250 250)" />
	<use xlink:href="#redstripe" transform="rotate(45 250 250)" />
	<use xlink:href="#redstripe" transform="rotate(-45 250 250)" />
	<text dy="70" textLength="1220">
        <textPath xlink:href="#textcircle">这是一个环形文字效果</textPath>
	</text>
</svg>
  
  

<style type="text/css">
* {
    margin: 0px;
    padding: 0px;
}
.codrops-bottom {
        margin-top:0px;
        width:100%;
        height:30px;
        text-align:center;
        font-size:16px
}
.codrops-bottom  a {
        color:#ffffff;
        text-decoration: underline;
}
.codrops-bottom  a:hover {
        color: #d1d1d1;
        text-decoration: underline;
}
</style>
<div class="codrops-bottom">
    <a href="http://www.webkaka.com/tutorial/html/2021/0721136/css-circular-text-effect.html">
      <strong>文字不转动？ </strong>点击看效果
    </a>
</div>

</body>

</html>

卡卡测速网> html技术> 纯CSS实现环形文字效果

添加收藏下载源代码|

运行结果

demo.html

运行代码

110
//-->
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX