生成CSS漸變動畫代碼

CSS3 模擬文字3D旋轉 

下面是生成需旋轉半徑的JS代碼,可以靈活的調節旋轉的半徑

<html>
<body>

<script type="text/javascript">
function indent(obj, length) {
	var temp = obj + "";
	var temp1 = temp.substr(0, length);
	return parseFloat(temp1);
}
// R 需要旋轉的半徑
function makeCSS(R) {
	for (var i = 0; i <= 360; i += 18) {
		var percent = parseInt(i / 360 * 100) + "%";
		var left = parseInt(R + -1 * Math.sin(2 * Math.PI / 360 * i) * R);
		var opacity = (R + -1 * Math.cos(2 * Math.PI / 360 * i) * R) / (R * 2) * 0.8 + 0.2;
		var fontSize = <pre name="code" class="html">(R + -1 * Math.cos(2 * Math.PI / 360 * i) * R) / (R * 2)
* 2 + 1.4;opacity = indent(opacity, 4);fontSize = indent(fontSize, 4);var html = percent + "{color:#C2C2C2;font-size:" + fontSize + "em;left:" + left + "px;opacity:" + opacity + ";}";document.write(html + "<br/>");}}makeCSS(120);</script>下面的代碼用於生成CSS動畫漸變代碼</br></body></html>



發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章