基于 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 代码中的单词变量更改为所需的文本,从而自定义文本。

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


模板目录结构如下: