这是一款js和CSS彩色扇形文字特效插件。该插件分为CSS和js两个版本,可以生成漂亮的彩色扇形字母效果。
在页面中引入cssans.min.css和cssans.min.js文件。
<link rel="stylesheet" href="bootstrap.min.css"> <script src="cssans.min.js"></script>
直接通过下面的CSS类可以实现彩色扇形字母效果。
<div class="cssans cssans--center"> <div class="cssans__accessible">CSSans Pro</div> <div class="cssans__word"> <b class="cssans:C"></b> <b class="cssans:S"></b> <b class="cssans:S"></b> <b class="cssans:a"></b> <b class="cssans:n"></b> <b class="cssans:s"></b> </div> <div class="cssans__word"> <b class="cssans:P"></b> <b class="cssans:r"></b> <b class="cssans:o"></b> </div> </div>
需要在页面中引入cssans.min.js文件。
<div id="foo">CSSans Pro</div>
var element = document.getElementById('foo'); var text = element.innerText; CSSans(element, text);
该js和CSS彩色扇形文字特效插件的github网址为:https://github.com/ZeroSpree/CSSans.Pro