生成CSS渐变动画代码

最新推荐文章于 2023-07-28 20:10:49 发布

iovexorg

最新推荐文章于 2023-07-28 20:10:49 发布

阅读量401

点赞数

分类专栏： WEB前端文章标签： CSS3 文字旋转 3D 调节半径

本文链接：https://blog.csdn.net/github_15094005/article/details/40047871

版权

WEB前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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>