用html写文本变形动画

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>文本变形动画</title><link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- 两个文本部分 -->
<div id="container"><span id="text1"></span><span id="text2"></span>
</div><!-- 用于创建合并效果的 svg 过滤器 -->
<svg id="filter"><defs><filter id="threshold"><!-- 这里只是一个阈值效果--像素足够高的地方不透明度设置为完全不透明,其他地方像素设置为完全透明。 --><feColorMatrix in="SourceGraphic"type="matrix"values="1 0 0 0 00 1 0 0 00 0 1 0 00 0 0 255 -140" /></filter></defs>
</svg><!-- partial --><script src="./script.js"></script>
</body>
</html>
/* 引用文字 */
@import url('https://fonts.googleapis.com/css?family=Raleway:900&display=swap');body {margin: 0px;
}#container {/* 将文本在视口里居中 */position: absolute;margin: auto;width: 100vw;height: 80pt;top: 0;bottom: 0;/* 这个过滤器很神奇哦~可以试着注释一下,看变形是如何工作的~ */filter: url(#threshold) blur(0.6px);
}#text1, #text2 {position: absolute;width: 100%;display: inline-block;font-family: 'Raleway', sans-serif;font-size: 80pt;text-align: center;user-select: none;
}
/*巧妙地利用SVG过滤器来创建“变形文本”效果。从本质上讲,它将两个文本元素层叠在一起,并根据哪个文本应该更突出来模糊它们。一旦应用了模糊,两个文本一起通过一个阈值过滤器,产生“胶粘”效果。
*/const elts = {text1: document.getElementById("text1"),text2: document.getElementById("text2") };/* 要在其中变形的字符串。你可以把这些换成你想要的任何东西! */
const texts = [
"Can",
"I",
"have",
"one",
"click",
"triple?"
];/* 控制变形的速度。 */
const morphTime = 1;
const cooldownTime = 0.25;let textIndex = texts.length - 1;
let time = new Date();
let morph = 0;
let cooldown = cooldownTime;elts.text1.textContent = texts[textIndex % texts.length];
elts.text2.textContent = texts[(textIndex + 1) % texts.length];function doMorph() {morph -= cooldown;cooldown = 0;let fraction = morph / morphTime;if (fraction > 1) {cooldown = cooldownTime;fraction = 1;}setMorph(fraction);
}/* 将模糊过滤器应用于文本 */
function setMorph(fraction) {// fraction = Math.cos(fraction * Math.PI) / -2 + .5;elts.text2.style.filter = `blur(${Math.min(8 / fraction - 8, 100)}px)`;elts.text2.style.opacity = `${Math.pow(fraction, 0.4) * 100}%`;fraction = 1 - fraction;elts.text1.style.filter = `blur(${Math.min(8 / fraction - 8, 100)}px)`;elts.text1.style.opacity = `${Math.pow(fraction, 0.4) * 100}%`;elts.text1.textContent = texts[textIndex % texts.length];elts.text2.textContent = texts[(textIndex + 1) % texts.length];
}function doCooldown() {morph = 0;elts.text2.style.filter = "";elts.text2.style.opacity = "100%";elts.text1.style.filter = "";elts.text1.style.opacity = "0%";
}/* 动画循环 */
function animate() {requestAnimationFrame(animate);let newTime = new Date();let shouldIncrementIndex = cooldown > 0;let dt = (newTime - time) / 1000;time = newTime;cooldown -= dt;if (cooldown <= 0) {if (shouldIncrementIndex) {textIndex++;}doMorph();} else {doCooldown();}
}/* 启动动画。 */
animate(); 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/819199.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

广东莱斯广告,6.8米UV喷印推动粤东喷绘产业升级

广东莱斯广告作为汕头市大型的广告服务运营商,近日迎来了一件值得庆祝的事情:彩神6.8米UV喷印机运行一周年,销售服务商深圳嘉豪总经理李伟特地前来回访。该设备是深圳润天智数字设备股份有限公司开发的全球首台搭载XTRA6800H柯尼卡喷头的设备,设备特点是:1.色彩艳丽;2.超宽喷印…

记录flume运行时报NullPointerException异常

【背景说明】 我要起一个将kafka上的topic_log主题中的数据上传到hdfs上的flume进程。 这是我的flume配置文件脚本&#xff1a; #定义组件 a1.sourcesr1 a1.channelsc1 a1.sinksk1#配置source1 a1.sources.r1.type org.apache.flume.source.kafka.KafkaSource a1.sources.r…

《Kubernets证书篇:基于Kylin V10+ARM架构CPU修改K8S 1.26.15版本证书时间限制》

一、背景 Kubernetes 默认的证书有效期只有1年&#xff0c;因此需要每年手动更新一次节点上面的证书&#xff0c;特别麻烦而且更新过程中可能会出现问题&#xff0c;因此我们要对 Kubernetes 的 SSL 证书有效期进行修改&#xff0c;这里将证书的时间限制修改为100年。 环境信息…

112 arcpy 发布 mxd地图文件 到 arcgis服务器 为 地图服务

前言 此文档主要是记录一下 最近的一次机遇 arcpy 来发布 地图文件到 arcgis服务器 上面 arcpy 主要是来自于 ArcGIS_Desktop_105_154030.zip 安装之后会在 python 的安装目录 安装另外的一份带 arcgis 的 python 环境, 然后 本文相关类库 也是基于 这个 arcpy 的 python 环境…

web实战项目环境部署(LNMP)

环境搭建准备 1、在本机安装VMware虚拟机&#xff0c;实际工作中&#xff0c;使用的是云服务器 2、在虚拟机上安装并运行Linux系统 3、在本机上安装好远程连接工具&#xff08;xshell/FinalShell&#xff09;&#xff0c;通过远程连接工具连接到虚拟机 4、关闭linux上的防火…

深度学习之PyTorch实现卷积神经网络(CNN)

在深度学习领域&#xff0c;卷积神经网络&#xff08;Convolutional Neural Networks&#xff0c;CNN&#xff09;是一种非常强大的模型&#xff0c;专门用于处理图像数据。CNN通过卷积操作和池化操作来提取图像中的特征&#xff0c;具有较好的特征学习能力&#xff0c;特别适用…

云原生:企业数字化转型的引擎与未来

一&#xff0c;引言 随着信息技术的飞速发展&#xff0c;企业数字化转型已成为时代的必然趋势。在这场深刻的变革中&#xff0c;云原生技术以其独特的优势&#xff0c;逐渐成为推动企业数字化转型的核心动力。本文将详细探讨云原生技术的内涵、发展历程&#xff0c;以及在企业数…

【Java开发指南 | 第八篇】Java变量、构造方法、创建对象

专栏&#xff1a;Java开发指南 CSDN秋说 文章目录 Java变量构造方法创建对象 Java变量 局部变量&#xff1a;在方法、构造方法或者语句块中定义的变量被称为局部变量。变量声明和初始化都是在方法中&#xff0c;方法结束后&#xff0c;变量就会自动销毁。成员变量&#xff08;…

研究生,该学单片机还是plc。?

PLC门槛相对较低&#xff0c;但是在深入学习和应用时&#xff0c;仍然有很高的技术要求。我这里有一套单片机入门教程&#xff0c;不仅包含了详细的视频 讲解&#xff0c;项目实战。如果你渴望学习单片机&#xff0c;不妨点个关注&#xff0c;给个评论222&#xff0c;私信22&am…

OpenHarmony实战开发-图片选择和下载保存案例。

介绍 本示例介绍图片相关场景的使用&#xff1a;包含访问手机相册图片、选择预览图片并显示选择的图片到当前页面&#xff0c;下载并保存网络图片到手机相册或到指定用户目录两个场景。 效果图预览 使用说明 从主页通用场景集里选择图片选择和下载保存进入首页。分两个场景点…

Linux UDP通信系统

目录 一、socket编程接口 1、socket 常见API socket()&#xff1a;创建套接字 bind()&#xff1a;将用户设置的ip和port在内核中和我们的当前进程关联 listen() accept() 2、sockaddr结构 3、inet系列函数 二、UDP网络程序—发送消息 1、服务器udp_server.hpp initS…

stm32开发之threadx整合letter-shell 组件记录

前言 使用过rt-thread的shell 命令交互的方式&#xff0c;觉得比较方便,所以在threadx中也移植个shell的组件。这里使用的是letter-shellletter-shell 核心的逻辑在于组件通过链接文件自动初始化或自动添加的两种方式&#xff0c;方便开发源码仓库 实验(核心代码) shell 线程…

rhce day1

一 . 在系统中设定延迟任务要求如下 在系统中建立 easylee 用户&#xff0c;设定其密码为 easylee 延迟任务由 root 用户建立 要求在 5 小时后备份系统中的用户信息文件到 /backup 中 确保延迟任务是使用非交互模式建立 确保系统中只有 root 用户和 easylee 用户可以执行延…

✌粤嵌—2024/3/11—跳跃游戏

代码实现&#xff1a; 方法一&#xff1a;递归记忆化 int path; int used[10000];bool dfs(int *nums, int numsSize) {if (path numsSize - 1) {return true;}for (int i 1; i < nums[path]; i) {if (used[path i]) {continue;}path i;used[path] 1;if (dfs(nums, num…

“华为杯“华南理工大学程序设计竞赛 L-再一道好题

题目 #include<bits/stdc.h> using namespace std; #define int long long #define pb push_back #define fi first #define se second const int maxn 1e6 5; const int inf 1e9 5;using namespace std;int n, m;void solve(){int res 0;int q;string s;int k;cin …

北京市为例的空气质量分析报告分析【免费送】

原始数据&#xff1a; 日期名称类型所属区拥挤指数速度客流指数20240405世界之花假日广场购物;购物中心大兴区2.46621.369.4920240405华润五彩城购物;购物中心海淀区2.01329.7111.1720240405北京市百货大楼购物;购物中心东城区1.85615.938.2320240405apm购物;购物中心东城区1.…

Grok-1.5 Vision:X AI发布突破性的多模态AI模型,超越GPT 4V

在人工智能领域&#xff0c;多模态模型的发展一直是科技巨头们竞争的焦点。 近日&#xff0c;马斯克旗下的X AI公司发布了其最新的多模态模型——Grok-1.5 Vision&#xff08;简称Grok-1.5V&#xff09;&#xff0c;这一模型在处理文本和视觉信息方面展现出了卓越的能力&#x…

即席查询笔记

文章目录 一、Kylin4.x1、Kylin概述1.1 定义1.2 Kylin 架构1.3 Kylin 特点1.4 Kylin4.0 升级 2、Kylin 环境搭建2.1 简介2.2 Spark 安装和部署2.3 Kylin 安装和部署2.4 Kylin 启动环境准备2.5 Kylin 启动和关闭 3、快速入门3.1 数据准备3.2 Kylin项目创建入门3.3 Hive 和 Kylin…

【个人博客搭建】(3)添加SqlSugar ORM

1、安装sqlsugar。在models下的依赖项那右击选择管理Nuget程序包&#xff0c;输入sqlsugarcore&#xff08;因为我们用的是netcore&#xff0c;而不是net famework所以也对应sqlsugarcore&#xff09;&#xff0c;出来的第一个就是了&#xff0c;然后点击选择版本&#xff0c;一…