环形旋转文字特效

最新推荐文章于 2023-12-14 11:23:56 发布

xuanyao1988

最新推荐文章于 2023-12-14 11:23:56 发布

阅读量634

点赞数

文章标签： xhtml javascript html function 图形文档

本文链接：https://blog.csdn.net/xuanyao1988/article/details/4952259

版权

某次偶然在一本JS书的前言部分看到的特效介绍，现在已经知道如何实现了，又加入了波形文字效果。某日突然想到，如果我能搞到心形图形的数学函数就好了：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script language="javascript">
  var st="HelloTheWorld";
  var lon = st.length;
  function change(){
   var htm="";
   for(var i=1;i<=lon;i++){
    var char=st.substr(i-1,1);
    var lef=450+120*Math.cos(i/lon*2*3.14);
    var tp=300+60*Math.sin(i/lon*2*3.14);
    var mount=30*Math.abs(Math.sin(i/lon*2*3.14));
    htm+="<div id=" + i+" style='position:absolute;left:"+lef+"px;top:"+tp+"px;font-size:"+mount+"pt'>"+char+ "</div>";
   }
   return htm;
  }
  function display(){
   st=st.substr(1,lon-1)+st.substr(0,1);
   document.getElementById("dv").innerHTML=change();
  }
  setInterval("display();",1000);
</script>
<style type="text/css">

</style>
</head>
<body>
<div id="dv"></div>
</body>

</html>

xuanyao1988

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
环形旋转文字特效

某次偶然在一本JS书的前言部分看到的特效介绍，现在已经知道如何实现了，又加入了波形文字效果。某日突然想到，如果我能搞到心形图形的数学函数就好了： http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">无标题文档 var st="HelloTheWorld"; var
复制链接

扫一扫