CSS3 动态生成文字旋转动画样式

接上

下面的代码可以通过修改循环的步长修改动画精细度，增加动画的连贯性

center: 中心的left百分比坐标

R:文字圆周半径 百分比

最小透明度

startOpacity

最大的透明度

endOPacity

最小的字号

startFontSize

最大的字号

endFontSize

function makeCSSByRange(center,R,startOpacity,endOpacity,startFontSize,endFontSize) {
for (var i = 0; i <= 360; i += 9) {
var percent = parseInt(i / 360 * 100) + "%";

var left = parseInt((center + -1 * Math.sin(2 * Math.PI / 360 * i) * R)*100)+ "%";
var opacity = (R + -1 * Math.cos(2 * Math.PI / 360 * i) * R) / (R * 2)*(endOpacity-startOpacity)+<span style="font-family: Arial, Helvetica, sans-serif;">startOpacity</span><span style="font-family: Arial, Helvetica, sans-serif;">;</span>
var fontSize = <pre name="code" class="html"> (R + -1 * Math.cos(2 * Math.PI / 360 * i) * R) / (R * 2)*

* (endFontSize-startFontSize) + startFontSize;opacity = indent(opacity, 4);fontSize = indent(fontSize, 4);var html = percent + "{left:" + left + ";opacity:" + opacity + ";font-size:" + fontSize + "px;}";document.write(html + "<br/>");}}makeCSSByRange(0.39,0.1,0.8,1.0,18,32);