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

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

news 2026/2/8 7:12:24

        要使用 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

业务系统对接大模型的基础方案：架构设计与关键步骤

业务系统对接大模型&#xff1a;架构设计与关键步骤 在当今数字化转型的浪潮中&#xff0c;大语言模型&#xff08;LLM&#xff09;已成为企业提升业务效率和创新能力的关键技术之一。将大模型集成到业务系统中&#xff0c;不仅可以优化用户体验&#xff0c;还能为业务决策提供…...

编程新知 2026/2/8 4:53:03

Java-41 深入浅出 Spring - 声明式事务的支持 事务配置 XML模式 XML+注解模式

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; &#x1f680; AI篇持续更新中&#xff01;&#xff08;长期更新&#xff09; 目前2025年06月05日更新到&#xff1a; AI炼丹日志-28 - Aud…...

编程新知 2026/2/6 11:05:22

现代密码学 | 椭圆曲线密码学—附py代码

Elliptic Curve Cryptography 椭圆曲线密码学&#xff08;ECC&#xff09;是一种基于有限域上椭圆曲线数学特性的公钥加密技术。其核心原理涉及椭圆曲线的代数性质、离散对数问题以及有限域上的运算。 椭圆曲线密码学是多种数字签名算法的基础&#xff0c;例如椭圆曲线数字签…...

编程新知 2026/2/6 7:30:33

图表类系列各种样式PPT模版分享

图标图表系列PPT模版&#xff0c;柱状图PPT模版&#xff0c;线状图PPT模版&#xff0c;折线图PPT模版&#xff0c;饼状图PPT模版&#xff0c;雷达图PPT模版&#xff0c;树状图PPT模版 图表类系列各种样式PPT模版分享&#xff1a;图表系列PPT模板https://pan.quark.cn/s/20d40aa…...

编程新知 2026/2/4 18:07:02

MySQL用户和授权

开放MySQL白名单 可以通过iptables-save命令确认对应客户端ip是否可以访问MySQL服务&#xff1a; test: # iptables-save | grep 3306 -A mp_srv_whitelist -s 172.16.14.102/32 -p tcp -m tcp --dport 3306 -j ACCEPT -A mp_srv_whitelist -s 172.16.4.16/32 -p tcp -m tcp -…...

编程新知 2025/8/25 19:12:45

.Net Framework 4/C# 关键字（非常用，持续更新...）

一、is 关键字 is 关键字用于检查对象是否于给定类型兼容，如果兼容将返回 true，如果不兼容则返回 false，在进行类型转换前，可以先使用 is 关键字判断对象是否与指定类型兼容，如果兼容才进行转换，这样的转换是安全的。 例如有：首先创建一个字符串对象，然后将字符串对象隐…...

编程新知 2025/9/25 18:41:38

安宝特方案丨船舶智造的“AR+AI+作业标准化管理解决方案”（装配）

船舶制造装配管理现状&#xff1a;装配工作依赖人工经验&#xff0c;装配工人凭借长期实践积累的操作技巧完成零部件组装。企业通常制定了装配作业指导书&#xff0c;但在实际执行中&#xff0c;工人对指导书的理解和遵循程度参差不齐。 船舶装配过程中的挑战与需求 挑战 (1…...

编程新知 2026/2/6 2:16:18

Python Ovito统计金刚石结构数量

大家好，我是小马老师。 本文介绍python ovito方法统计金刚石结构的方法。 Ovito Identify diamond structure命令可以识别和统计金刚石结构，但是无法直接输出结构的变化情况。 本文使用python调用ovito包的方法，可以持续统计各步的金刚石结构，具体代码如下： from ovito…...

编程新知 2026/1/26 5:39:08

【从零学习JVM|第三篇】类的生命周期(高频面试题)

前言&#xff1a; 在Java编程中&#xff0c;类的生命周期是指类从被加载到内存中开始&#xff0c;到被卸载出内存为止的整个过程。了解类的生命周期对于理解Java程序的运行机制以及性能优化非常重要。本文会深入探寻类的生命周期&#xff0c;让读者对此有深刻印象。 目录 ​…...

编程新知 2026/1/26 8:42:13

AI语音助手的Python实现

引言 语音助手（如小爱同学、Siri）通过语音识别、自然语言处理（NLP）和语音合成技术，为用户提供直观、高效的交互体验。随着人工智能的普及，Python开发者可以利用开源库和AI模型，快速构建自定义语音助手。本文由浅入深，详细介绍如何使用Python开发AI语音助手，涵盖基础功…...

编程新知 2026/2/3 13:01:10