前端JS特效第44集:JS动态波浪文字动画显示特效

JS动态波浪文字动画显示特效,先来看看效果:

部分核心的代码如下(全部代码在文章末尾):

复制代码
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS动态波浪文字动画显示特效</title>

<link rel="stylesheet" type="text/css" href="css/zzsc.css">
<link rel="stylesheet" type="text/css" href="dist/css/txt.wav.css">

</head>
<body>
<div class="zzsc">
	<h1>txt.wav Examples</h1>
		<h2>slow</h2>

		<div class="txtwav slow">
		  Lorem ipsum dolor sit amet, consectetur adipiscing elit
		</div>

		<h2>vibe</h2>

		<div class="txtwav vibe">
		  Lorem ipsum dolor sit amet, consectetur adipiscing elit
		</div>

		<h2>bounce</h2>

		<div class="txtwav bounce">
		  Lorem ipsum dolor sit amet, consectetur adipiscing elit
		</div>

		<h2>flip</h2>

		<div class="txtwav flip">
		  Lorem ipsum dolor sit amet, consectetur adipiscing elit
		</div>
</div>

<script src="dist/js/txt.wav.min.js"></script>


</body>
</html>

全部代码:JS动态波浪文字动画显示特效

相关推荐
brzhang几秒前
告别『上线裸奔』!一文带你配齐生产级 Web 应用的 10 大核心组件
前端·后端·架构
程序员Bears几秒前
深入理解CSS3:Flex/Grid布局、动画与媒体查询实战指南
前端·css3·媒体·visual studio code
工呈士7 分钟前
CSS in JS:机遇与挑战的思考
javascript·css
至尊童9 分钟前
五个JavaScript 应用技巧
javascript
anqi2710 分钟前
如何在 IntelliJ IDEA 中编写 Speak 程序
java·大数据·开发语言·spark·intellij-idea
David凉宸12 分钟前
凉宸推荐给大家的一些开源项目
前端
举个栗子dhy14 分钟前
编辑器、代码块、大模型AI对话中代码复制功能实现
javascript
XuX0314 分钟前
MATLAB小试牛刀系列(1)
开发语言·matlab
袋鱼不重14 分钟前
Cursor 最简易上手体验:谷歌浏览器插件开发3s搞定!
前端·后端·cursor
hyyyyy!14 分钟前
《从分遗产说起:JS 原型与继承详解》
前端·javascript·原型模式