安全下载,经人工审核 精选优质前端模板 支持定制开发咨询 持续更新资源
基于 JS + CSS 实现的类似于DNA序列的螺旋旋转炫酷动画文本
编号:酷炫文字

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

大小 9 KB
总文件 5 个
发布 2024-04-07
更新 2025-04-14
架构 CSS + JavaScript
分类 前端资源 - 文字特效
目录 结构详情
童哲网
童哲网
 ·  专注前端模板资源分享
人工审核 安全可信

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

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


模板目录结构

    最新资源

    JS横向波浪相册,拖拽惯性与键盘滚动展示特效

    起伏相册

    JS横向波浪相册,拖拽惯性与键盘滚动展示特效
    Canvas 像素飞车 HTML 小游戏,推进躲避与道具反馈源码

    火箭小跑车

    Canvas 像素飞车 HTML 小游戏,推进躲避与道具反馈源码
    汽车维修与养护服务 HTML 响应式网站模板

    驰修

    汽车维修与养护服务 HTML 响应式网站模板
    产品管理与团队协作 Tailwind CSS 后台模板

    产研智台

    产品管理与团队协作 Tailwind CSS 后台模板
    语音创作与音频工具 Tailwind CSS 响应式后台模板

    声域

    语音创作与音频工具 Tailwind CSS 响应式后台模板
    纹身穿刺与创意工作室 HTML 响应式网站模板

    墨匠

    纹身穿刺与创意工作室 HTML 响应式网站模板