js CSS彩色扇形文字特效插件

js CSS彩色扇形文字特效插件

这是一款js和CSS彩色扇形文字特效插件。该插件分为CSS和js两个版本,可以生成漂亮的彩色扇形字母效果。

使用方法
在页面中引入cssans.min.css和cssans.min.js文件。

1
2
<link rel="stylesheet" href="bootstrap.min.css">
<script src="cssans.min.js"></script>

CSS版本
直接通过下面的CSS类可以实现彩色扇形字母效果。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<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>

JS版本
需要在页面中引入cssans.min.js文件。

1
2
3
4
<div id="foo">CSSans Pro</div>
var element = document.getElementById('foo');
var text = element.innerText;
CSSans(element, text);
当前内容只有登录了才能查看,如果您已经注册,请登录
3

发表评论