当前位置： 首页 > news >正文

使用 GreenSock（GSAP）实现 字符串动画

news 2026/5/18 1:51:50

        要使用 GreenSock（GSAP）实现 "JianMa XinXi" 这个字符串的动画，其中两个 'x' 字符自动旋转，'j' 和 'm' 字符上下跳动，并且美化这个字符串使其可以作为 logo 使用，我们可以通过以下步骤来实现：
1. 使用 CSS 给字符串添加美化样式，包括背景色和关键字符的颜色。
2. 使用 GSAP 创建动画效果。
以下是一个完整的示例代码，包括 HTML、CSS 和 JavaScript：
        
 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GSAP Animation Logo Example</title>
<style>body {margin: 0;height: 100vh;display: flex;justify-content: center;align-items: center;background: #f7f7f7;}.logo {font-family: 'Arial', sans-serif;font-size: 48px;font-weight: bold;color: #333;background: #fff;padding: 20px;border-radius: 5px;box-shadow: 0 4px 6px rgba(0,0,0,0.1);display: flex;align-items: center;justify-content: center;text-transform: uppercase;letter-spacing: 2px;}.logo span {display: inline-block;animation: bounce 1s infinite;}.logo .char-j, .logo .char-m {animation: bounce 1s infinite;}.logo .char-x {animation: rotate 2s linear infinite;}@keyframes rotate {0% { transform: rotate(0deg); }100% { transform: rotate(360deg); }}@keyframes bounce {0%, 100% {transform: translateY(0);}50% {transform: translateY(-10px);}}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/gsap.min.js"></script>
</head>
<body>
<div class="logo"><span class="char-j">J</span><span class="char-i">i</span><span class="char-a">a</span><span class="char-n">n</span><span class="char-m">m</span><span class="char-a">a</span><span class="char-x">x</span><span class="char-i">i</span><span class="char-n">n</span><span class="char-x">x</span><span class="char-i">i</span>
</div>
<script>
// GSAP animation
gsap.registerPlugin(TweenLite, TimelineLite);
const timeline = new TimelineLite();
timeline.set('.char-j', { y: '-=10px' }).set('.char-m', { y: '-=10px' }).to('.char-j', 1, { y: '+=20px', ease: Bounce.easeOut }, 0).to('.char-m', 1, { y: '+=20px', ease: Bounce.easeOut }, '-=1').to('.char-j', 1, { y: '-=20px', ease: Bounce.easeIn }, '+=1').to('.char-m', 1, { y: '-=20px', ease: Bounce.easeIn }, '+=1');
</script>
</body>
</html>

        这段代码是一个HTML页面，使用了GreenSock Animation Platform (GSAP) 来创建动画效果。页面中包含一个类名为"logo"的div元素，该元素包含文本"JianMaXinXi"，并通过CSS为其添加了动画效果。
        在CSS部分，`.logo` 类定义了文字的样式，包括字体、大小、颜色、背景、内边距、边框半径和阴影等。`.logo span` 类为每个字符添加了动画效果，使其在1秒内无限次地跳动。`.logo .char-j` 和 `.logo .char-m` 类分别为字符'j'和'm'添加了跳动效果。`.logo .char-x` 类为字符'x'添加了2秒的无限旋转效果。
        在JavaScript部分，首先使用`gsap.registerPlugin(TweenLite, TimelineLite);` 注册了GSAP的两个插件：TweenLite和TimelineLite。然后创建了一个TimelineLite实例，并使用`.set('.char-j', { y: '-=10px' })` 和 `.set('.char-m', { y: '-=10px' })` 方法将字符'j'和'm'向下移动10像素。

        接着使用`.to('.char-j', 1, { y: '+=20px', ease: Bounce.easeOut }, 0)` 和 `.to('.char-m', 1, { y: '+=20px', ease: Bounce.easeOut }, '-=1')` 方法使字符'j'和'm'在1秒内向上跳动20像素，并使用缓动函数Bounce.easeOut来实现弹跳效果。

        最后，使用`.to('.char-j', 1, { y: '-=20px', ease: Bounce.easeIn }, '+=1')` 和 `.to('.char-m', 1, { y: '-=20px', ease: Bounce.easeIn }, '+=1')` 方法使字符'j'和'm'在1秒内向下跳动20像素，并使用缓动函数Bounce.easeIn来实现弹跳效果。
        这段代码通过结合CSS和JavaScript，为"JianMaXinXi"文字中的特定字符添加了旋转和跳动的效果，使页面更具动态感。

相关文章：

使用 GreenSock（GSAP）实现 字符串动画

要使用 GreenSock&#xff08;GSAP&#xff09;实现 "JianMa XinXi" 这个字符串的动画&#xff0c;其中两个 x 字符自动旋转&#xff0c;j 和 m 字符上下跳动&#xff0c;并且美化这个字符串使其可以作为 logo 使用&#xff0c;我们可以通过以下步骤来实现&#xff1…...

编程日记 2024/2/13 5:56:27

linux系统zabbix监控服务端部署

zabbix服务端部署 zabbix服务端部署安装mysql创建初始数据库为Zabbix server配置数据库为Zabbix前端配置PHP启动Zabbix server和agent进程浏览器访问ipConfigure DB connection页面Zabbix server details页面登录账户名密码 zabbix 官网www.zabbix.com服务端部署 rpm -Uvh ht…...

编程日记 2024/2/13 5:54:25

算法----回溯（附录---剪枝）

回溯相信大家都已经了解了所以这章我将见但介绍下回溯剪枝 为什要剪枝 在《算法----回溯&#xff08;正文&#xff09;》中我提到过回溯就是暴力&#xff0c;为什么那些题能过&#xff0c;因为数据范围小 那如果数据范围大了&#xff0c;就不行了&#xff0c;这时剪枝的作用就…...

编程日记 2024/2/13 5:52:23

从Unity到Three.js（模型文件加载）

模型加载功能探索&#xff0c;用blender导出了个glb格式的cube进行的测试。 初接触js语法&#xff0c;回调注册的地方直接使用匿名函数总感觉脑子跟不上&#xff0c;反应不过来&#xff0c;就把加载后的回调简单封装了下&#xff0c; 官方文档是直接使用的匿名函数。 另外看官方…...

编程日记 2024/2/13 5:51:22

Webshell一句话木马

一、webshell介绍&#xff08;网页木马&#xff09; 分类&#xff1a; 大马&#xff1a;体积大、隐蔽性差、功能多 小马&#xff1a;体积小&#xff0c;隐蔽强&#xff0c;功能少 一句话木马&#xff1a;代码简短&#xff0c;灵活多样 二、一句话木马&#xff1a; &#xff1a;…...

编程日记 2024/2/13 5:47:17

【Web】Spring rce CVE-2022-22965漏洞复现学习笔记

目录 原理概览 漏洞简述 Tomcat AccessLogValve 和 access_log 例题: 原理概览 spring框架在传参的时候会与对应实体类自动参数绑定&#xff0c;通过“.”还可以访问对应实体类的引用类型变量。使用getClass方法&#xff0c;通过反射机制最终获取tomcat的日志配置成员属性…...

编程日记 2024/2/13 5:44:13

springboot/ssm大学生选修选课系统高校选课排课成绩管理系统Java系统

springboot/ssm大学生选修选课系统高校选课排课成绩管理系统Java系统 开发语言&#xff1a;Java 框架&#xff1a;springboot&#xff08;可改ssm&#xff09; vue JDK版本&#xff1a;JDK1.8&#xff08;或11&#xff09; 服务器&#xff1a;tomcat 数据库&#xff1a;my…...

编程日记 2024/2/13 5:40:10

【芯片设计- RTL 数字逻辑设计入门 14 -- 使用子模块实现三输入数的大小比较】

文章目录 三输入数的大小比较问题分析verilog codeTestBench Code综合图仿真波形图 三输入数的大小比较 在数字芯片设计中&#xff0c;通常把完成特定功能且相对独立的代码编写成子模块&#xff0c;在需要的时候再在主模块中例化使用&#xff0c;以提高代码的可复用性和设计的层…...

编程日记 2024/2/13 5:36:05

Xilinx FPGA——在线升级

同以前单片机在线升级的做法一样&#xff0c;本质就是通信Flash操作跳转。 一、通信驱动 我使用的是UDP有线传输&#xff0c; 二、Flash芯片驱动 规划Flash芯片的区域&#xff0c;一般bootloader放在起始位置&#xff0c;APP放在bootloader之后的空白区域。 2.1 Flash擦除 我…...

编程日记 2024/2/13 5:33:02

电商小程序02数据源设计

上一篇我们讲解了电商小程序的需求分析&#xff0c;分析了需要具备的功能并且绘制了系统原型。有了原型之后下一步的事情就是根据原型来设计数据源。 数据源就像盖房子打地基一样&#xff0c;地基打不好&#xff0c;楼可能就盖不高&#xff0c;盖起来要再想调整就比较困难。 …...

编程日记 2024/2/13 5:25:55

Leetcode 3033. Modify the Matrix

Leetcode 3033. Modify the Matrix 1. 解题思路2. 代码实现 题目链接&#xff1a;3033. Modify the Matrix 1. 解题思路 这一题是一道easy的题目&#xff0c;整体思路上没啥难度&#xff0c;就是按照题目翻译一下即可&#xff0c;先遍历一下找到每一列的最大元素&#xff0c…...

编程日记 2024/2/13 5:24:54

蓝桥杯刷题--python-4

0成绩分析 - 蓝桥云课 (lanqiao.cn) import os import sys # 请在此输入您的代码 n=int(input()) max_=float(-inf) min_=float(inf) res=0 for _ in range(n): score=int(input()) # 最高分 max_=max(max_,score) # 最低分 min_=min(min_,score) # 总分 res+=sc…...

编程日记 2024/2/13 5:23:52

openJudge | 距离排序

总时间限制: 1000ms 内存限制: 65536kB 描述 给出三维空间中的n个点&#xff08;不超过10个&#xff09;,求出n个点两两之间的距离,并按距离由大到小依次输出两个点的坐标及它们之间的距离。 输入 输入包括两行&#xff0c;第一行包含一个整数n表示点的个数&#xff0c;第二…...

编程日记 2024/2/13 5:20:49

【算法】排序详解（快速排序，堆排序，归并排序，插入排序，希尔排序，选择排序，冒泡排序）

目录 排序的概念&#xff1a; 排序算法的实现&#xff1a; 插入排序&#xff1a; 希尔排序&#xff1a; 选择排序&#xff1a; 堆排序&#xff1a; 冒泡排序&#xff1a; 快速排序&#xff1a; 快速排序的基本框架&#xff1a; 1.Hoare法 2. 挖坑法 3.前后指针法 快…...

编程日记 2024/2/13 5:16:45

LeetCode Python -8.字符串转整数

文章目录 题目答案运行结果 题目 请你来实现一个 myAtoi(string s) 函数&#xff0c;使其能将字符串转换成一个 32 位有符号整数&#xff08;类似 C/C 中的 atoi 函数&#xff09;。 函数 myAtoi(string s) 的算法如下&#xff1a; 读入字符串并丢弃无用的前导空格检查下一个…...

编程日记 2024/2/13 5:14:42

【java】笔记10：类与对象——本章练习

题目1&#xff1a; 代码如下&#xff1a; import java.util.Scanner; public class Input{public static void main(String[]args){Circle cnew Circle();PassObject yuannew PassObject();System.out.println("r""\t""times");yuan.printAreas…...

编程日记 2024/2/13 5:07:33

《UE5_C++多人TPS完整教程》学习笔记8 ——《P9 访问 Steam（Acessing Steam）》

本文为B站系列教学视频 《UE5_C多人TPS完整教程》 —— 《P9 访问 Steam&#xff08;Acessing Steam&#xff09;》 的学习笔记&#xff0c;该系列教学视频为 Udemy 课程 《Unreal Engine 5 C Multiplayer Shooter》 的中文字幕翻译版&#xff0c;UP主&#xff08;也是译者&…...

编程日记 2024/2/13 5:04:29

缓存穿透问题与解决方案

引言 在分布式系统中&#xff0c;缓存技术被广泛应用以提高系统性能和响应速度。然而&#xff0c;缓存穿透是一个常见而严重的问题&#xff0c;特别是在面对大规模请求时。本文将深入探讨缓存穿透的原因、影响以及一些有效的解决方案&#xff0c;以确保系统在面对这一问…...

编程日记 2024/2/13 5:02:27

《Git 简易速速上手小册》第1章：Git 基础（2024 最新版）

文章目录 1.1 Git 简介&#xff1a;版本控制的演变1.1.1 基础知识讲解1.1.2 重点案例&#xff1a;协作开发流程优化案例&#xff1a;功能开发与分支策略 1.1.3 拓展案例 1&#xff1a;代码审查与合并1.1.4 拓展案例 2&#xff1a;冲突解决 1.2 安装和配置 Git&#xff1a;首次设…...

编程日记 2024/2/13 5:00:24

交易中的胜率和盈亏比估算

交易中的胜率和盈亏比估算 1.定义 胜率是指交易者在一定时间内成功交易的次数占总交易次数的比例。例如&#xff0c;如果交易者在10次交易中成功了6次&#xff0c;那么他的胜率就是60%。 盈亏比是指交易者每笔成功交易的盈利与每笔失败交易的亏损之间的比例。例如&#xff0…...

编程日记 2024/2/13 4:58:20

CCPD车牌数据集预处理避坑指南：透视变换原理详解与OpenCV实战

CCPD车牌数据集预处理避坑指南&#xff1a;透视变换原理详解与OpenCV实战 车牌识别系统中&#xff0c;数据预处理的质量直接影响模型性能。CCPD作为目前最全面的中文车牌数据集&#xff0c;其四点标注特性为透视变换提供了基础&#xff0c;但也暗藏诸多陷阱。本文将手把手带您穿…...

编程新知 2026/5/17 10:59:41

Kubernetes部署Valheim游戏服务器：云原生架构实践指南

1. 项目概述&#xff1a;当维京英灵殿遇上Kubernetes如果你和我一样&#xff0c;既沉迷于《英灵神殿》&#xff08;Valheim&#xff09;里那种与三五好友一起伐木、采矿、建造长屋&#xff0c;然后被巨魔追得满地图跑的原始乐趣&#xff0c;又恰好是一名整天和容器、编排系统打…...

编程新知 2026/5/17 10:35:00

LLM Notebooks：从零构建RAG问答系统的实践指南

1. 项目概述&#xff1a;一个面向大语言模型实践的“笔记本”仓库最近在GitHub上闲逛&#xff0c;发现了一个挺有意思的仓库&#xff0c;叫qianniuspace/llm_notebooks。光看名字&#xff0c;llm_notebooks&#xff0c;大语言模型笔记本&#xff0c;这指向性就非常明确了。这大…...

编程新知 2026/5/17 10:24:22

Zotero插件市场：三步快速上手的插件管理神器

Zotero插件市场&#xff1a;三步快速上手的插件管理神器 【免费下载链接】zotero-addons Zotero Add-on Market | Zotero插件市场 | Browsing, installing, and reviewing plugins within Zotero 项目地址: https://gitcode.com/gh_mirrors/zo/zotero-addons 想象一下&a…...

编程新知 2026/5/17 10:01:30

解锁GitHub极速体验：智能加速插件深度解析

解锁GitHub极速体验&#xff1a;智能加速插件深度解析 【免费下载链接】Fast-GitHub 国内Github下载很慢&#xff0c;用上了这个插件后&#xff0c;下载速度嗖嗖嗖的~&#xff01; 项目地址: https://gitcode.com/gh_mirrors/fa/Fast-GitHub GitHub加速插件&#xff08;…...

编程新知 2026/5/17 9:44:50

MemPrivacy：面向端云智能体的隐私保护个性化记忆管理框架

之前文章介绍过&#xff1a;89.2%攻击成功率&#xff01;腾讯、字节研究发现 OpenClaw Agent 存在可利用结构性漏洞 今天介绍一个 MemPrivacy 项目&#xff0c;来自 MemTensor、荣耀和同济大学的联合团队。 他们的研究让云端智能体能正常"记住你"&#xff0c;但永远看…...

编程新知 2026/5/17 9:42:46

深度解析：Performance-Fish如何通过四级缓存架构实现《环世界》400%性能优化

深度解析&#xff1a;Performance-Fish如何通过四级缓存架构实现《环世界》400%性能优化 【免费下载链接】Performance-Fish Performance Mod for RimWorld 项目地址: https://gitcode.com/gh_mirrors/pe/Performance-Fish Performance-Fish是《环世界》&#xff08;Rim…...

编程新知 2026/5/17 9:35:59

告别混乱信号！用CANdb++ Editor从零搭建汽车CAN网络DBC文件（保姆级图文教程）

告别混乱信号&#xff01;用CANdb Editor从零搭建汽车CAN网络DBC文件&#xff08;保姆级图文教程&#xff09; 在汽车电子开发领域&#xff0c;CAN总线如同神经脉络般贯穿整车系统。我曾参与过一个新能源整车项目&#xff0c;由于早期缺乏规范的DBC文件&#xff0c;不同ECU厂商…...

编程新知 2026/5/17 9:20:45

3个高效方法：免费获取百度网盘高速下载直链的完整指南

3个高效方法&#xff1a;免费获取百度网盘高速下载直链的完整指南 【免费下载链接】baidu-wangpan-parse 获取百度网盘分享文件的下载地址 项目地址: https://gitcode.com/gh_mirrors/ba/baidu-wangpan-parse 当我们面对百度网盘缓慢的下载速度时&#xff0c;常常感到无…...

编程新知 2026/5/17 8:30:28

Gitclaw：封装复杂Git操作，提升开发效率的命令行工具

1. 项目概述&#xff1a;一个为Git操作注入“爪牙”的命令行工具如果你和我一样&#xff0c;日常开发工作重度依赖Git&#xff0c;那你肯定也经历过这样的时刻&#xff1a;面对一个需要多步操作才能完成的复杂Git任务&#xff0c;比如清理多个已合并的分支、批量重写提交历史中…...

编程新知 2026/5/17 7:45:20