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

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

使用方法

在页面中引入cssans.min.css和cssans.min.js文件。

<link rel="stylesheet" href="bootstrap.min.css">
<script src="cssans.min.js"></script>
                
CSS版本

直接通过下面的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>
                
JS版本

需要在页面中引入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

在线预览    源码下载

爱编程-编程爱好者经验分享平台
版权所有 爱编程 © Copyright 2012. All Rights Reserved.
闽ICP备12017094号-3