html 文字环形显示,JS/CSS3 环状字符串+文本浸润渗透特效+彩虹变换

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

$(function() {

var el = $(".circle-in"),

elText = $(".circle .text");

parcala(".circle .text", "span");

$(el).html(elText.html());

var elem = $(".circle-in span");

contentl = elem.length;

for (var i = 0; i < contentl; i++) {

elem.eq(i).css({

"width": elem.eq(i).width() + "px",

"height": elem.eq(i).height() + "px",

"margin-top": "-" + elem.eq(i).height() / 2 + "px",

"margin-left": "-" + elem.eq(i).width() / 2 + "px",

"-ms-transform": "rotate(" + ((i + 2) * (360 / contentl)) + "deg) translate(0px," + (el.width() / 2) + "px) rotateX(180deg)",

"-webkit-transform": "rotate(" + ((i + 2) * (360 / contentl)) + "deg) translate(0px," + ((el.width() / 2) + (elem.eq(i).width())) + "px) rotateX(180deg) rotateY(180deg)",

"transform": "rotate(" + ((i + 2) * (360 / contentl)) + "deg) translate(0px," + ((el.width() / 2) + (elem.eq(i).width())) + "px) rotateX(180deg) rotateY(180deg)"

})

}

function parcala(e, tag) {

$(e).each(function(index) {

var char = $(this).text().split("");

$this = $(this);

$this.empty();

$.each(char, function(i, el) {

$this.append("" + el + "" + tag + ">");

});

});

}

var color = 0;

function BGchange() {

color += 1;

$("html,body").css({

"background": "hsla(" + color + ",64%, 50%,1)"

})

$(".circle-in span").css({

"color": "hsla(" + color + ",64%, 50%,1)",

"text-shadow": "0 " + -color / 3 + "px " + color / 8 + "px hsla(" + color + ",64%, 50%,1),0 " + color / 3 + "px " + color / 8 + "px hsla(" + color + ",64%, 50%,1)," + color / 3 + "px 0 " + color / 8 + "px hsla(" + color + ",64%, 50%,1)," + -color / 3 + "px 0 " + color / 8 + "px hsla(" + color + ",64%, 50%,1)"

})

$(".circle-in").css({

"background": "hsla(" + color + ",64%, 50%,1)"

})

if (color >= 360) {

color = 0;

}

}

setInterval(BGchange, 30);

});