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

最新推荐文章于 2024-08-14 18:07:55 发布

iovexorg

最新推荐文章于 2024-08-14 18:07:55 发布

阅读量2k

点赞数

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

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

版权

本文介绍了如何利用CSS3实现动态的文字旋转动画效果，通过调整循环步长以提升动画的连贯性和精细度，同时涉及到文字在圆周上的半径设置、透明度变化以及字号的动态调整。

摘要由CSDN通过智能技术生成

接上

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

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&l