基于 JS + CSS 实现的类似于DNA序列的螺旋旋转炫酷动画文本

基于 JavaScript 创建的炫酷的动画文本,文字以类似于DNA序列的螺旋状运动,支持自定义修改文本内容、文字旋转速度等属性,它具有视觉吸引力和动态效果,您可以使用此代码为网站添加醒目的动画文本。

下面展示如何在 Javascript 中创建炫酷的动画文本

1.首先创建一个新的 HTML 文件,或在文本编辑器中打开一个现有文件。在 <body> 标签中,创建您希望动画文本出现的容器元素。例如

<div id="DNA序列1" class="spiral"></div>
<div id="DNA序列2" class="spiral"></div>

2.接下来,设置容器元素的样式并定义动画属性。下面是一个基本的 CSS 设置:

/*这里仅展示部分示例代码,下载后查看完整版代码*/
.character{
  font-size: 2.8rem;
  color: white;
  text-transform: uppercase;
  transform: translateY(calc(sin(var(--angle)) * 100px)) scale(calc(cos(var(--angle)) * 0.5 + 0.5));
  animation: spiral 4s linear infinite;
}

@media (max-width: 490px){
  .character{
    font-size: 2.2rem
  }
}

3.现在,让我们添加 JavaScript 代码来创建动画效果。复制以下 JavaScript 代码并将其粘贴到 HTML 文件中,最好是在结尾的 </body> 标记之前。

let isFirefox = typeof InstallTrigger !== 'undefined';
const words = "lucasfernandodev";

let ANGLE = 360;
const ANIMATION_DURATION = 4000;
/*这里仅展示部分示例代码,下载后查看完整版代码*/

保存 HTML 文件并在网络浏览器中打开。现在您应该可以在网站上看到炫酷的动画文本效果。您可以将 JavaScript 代码中的单词变量更改为所需的文本,从而自定义文本。

同时您也可以尝试使用不同的样式和文本选项来创建适合您网站设计的独特效果。


模板目录结构如下:
  • 如非特殊说明,本站对本文提供的代码或者素材不拥有任何权利,其版权归原著者拥有。
  • 以上提供的代码或者素材均为作者提供和网友推荐收集整理而来,仅供学习和研究使用。
  • 如有侵犯你版权的,请来信(邮箱:tongzhewangluo@163.com)指出,核实后,本站将立即改正。
  • 如有链接无法下载、失效或广告,请通过网站提供的微信联系作者!
  • 以上资源售价只是赞助,不代表代码或者素材本身价格。收取费用仅维持本站的服务器开销!
  • 所有代码素材效果均为演示打包,最终效果请参考演示效果,本站不提供任何技术支持和服务。
  • 代码素材均为虚拟物品,演示和描述无错的情况下,无法进行退换服务。