助力高考,一组彩色的文字

1、获取文本内容

首先,获取每个<div>元素的文本内容,并清空其内部HTML(innerHTML = "")。

2、创建<span>元素

然后,它遍历文本的每个字符,为每个字符创建一个新的<span>元素,并将该字符设置为<span>元素的文本内容。

3、设置样式

为每个<span>元素设置外边距(marginRight),这样字符之间会有一定的间隔。

4、打乱顺序

使用shuffle函数随机打乱<span>元素的顺序。这个函数通过Fisher-Yates算法实现随机置换。

5、应用随机变换

applyRandomTransform函数为每个<span>元素随机生成位移(xOffset和yOffset)和旋转角度(rotation),并应用CSS的transform属性来改变每个字符的位置和方向。

6、随机颜色变化

changeColorSequentially函数逐个改变<span>元素的颜色,每次只改变一个字符的颜色,并在颜色变化时保持顺序感。它使用getRandomColor函数生成随机颜色代码。

7、定时器

通过setInterval函数,changeColorSequentially和applyRandomTransform函数被定期调用,使得颜色和变换效果持续发生,创建动态变化的效果。

8、文本描边和阴影

在CSS中,使用-webkit-text-stroke-width和-webkit-text-stroke-color为文本添加描边效果,使用text-shadow添加阴影效果,增强文本的视觉效果。

<template><div><!-- <img alt="Vue logo" src="./assets/logo.png"> --><HelloWorld msg="Welcome to Your Vue.js App" /><!-- <router-view /> --><div class="bodys"><div class="rugrats">高考加油!</div><div class="rugrats">榜上有名!</div><div class="rugrats">繁花似锦!</div></div></div>
</template><script>
import HelloWorld from "./components/HelloWorld.vue";export default {name: "App",components: {HelloWorld,},mounted() {this.init();},methods: {init() {const divs = document.querySelectorAll(".rugrats");divs.forEach(function (div) {const text = div.textContent;div.innerHTML = "";for (let i = 0; i < text.length; i++) {const span = document.createElement("span");span.textContent = text[i];span.style.marginRight = "1vw";div.appendChild(span);}let spans = div.querySelectorAll("span");function shuffle(array) {for (let i = array.length - 1; i > 0; i--) {const j = Math.floor(Math.random() * (i + 1));const temp = array[i];array[i] = array[j];array[j] = temp;}return array;}spans = shuffle(Array.from(spans));function getRandomValue() {return Math.random() * 0.4 - 0.24;}function applyRandomTransform() {spans.forEach(function (span) {const xOffset = getRandomValue() * 10;const yOffset = getRandomValue() * 15;const rotation = getRandomValue() * 6;span.style.transform ="translate(" +xOffset +"px, " +yOffset +"px) rotate(" +rotation +"deg)";span.style.textIndent = xOffset + "px";});}function getRandomColor() {const letters = "0123456789ABCDEF";let color = "#";for (var i = 0; i < 6; i++) {color += letters[Math.floor(Math.random() * 16)];}return color;}let currentIndex = 0;function changeColorSequentially() {spans.forEach(function (span, index) {let colorIndex = (index + currentIndex) % spans.length;span.style.color =colorIndex === 0? getRandomColor(): spans[colorIndex - 1].style.color;});currentIndex = (currentIndex + 1) % spans.length;}setInterval(changeColorSequentially, 250);setInterval(applyRandomTransform, 100);});},},
};
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
.bodys {margin: 10vh;text-align: center;font-size: calc(5vw + 4vh);background: #314d79;color: #fff;font-family: sans-serif;letter-spacing: -0.3vw;overflow: hidden;font-family: "Lacquer", system-ui;
}.rugrats {margin: 0 auto;text-align: center;
}
.rugrats span {display: inline-block;transition: color linear 0.5s forwards;-webkit-text-stroke-width: 0.32vw;-webkit-text-stroke-color: black;text-shadow: 0.4vw 0.5vw #000;
}.rugrats span {text-transform: capitalize;text-transform: lowercase;
}
</style>

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

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

相关文章

通过python操作redis(windows)

注意在连接之前要确保 redis 服务已经安装。 更多的安装信息请查看&#xff1a;https://blog.csdn.net/sinat_20471177/article/details/132042779?spm1001.2014.3001.5501 redis 模块 Python 要使用 redis&#xff0c;需要先安装 redis 模块。如果要做数据导入/导出操作的…

34、matlab输入命令汇总

1、ans:最近计算的答案 代码示例1 12ans 3 代码示例2 Brand(7)B 列 1 至 60.7060 0.3171 0.1869 0.6797 0.5853 0.95930.0318 0.9502 0.4898 0.6551 0.2238 0.54720.2769 0.0344 0.4456 0.1626 0.7513 0.13860.0462 0.4387…

java程序100道01—20

1&#xff0e;用循环的嵌套&#xff0c;输出输出如下图形 * * * * * * * * * * * * * * * * * * * * * * * * * package Exercises.One_Hundred; ​ public class Demo01 {public static void main(String[] args) {for(int i1;i<5;i){for(int j1;j<2*i-1;j){Sys…

数字IC必备知识点:【0】文章汇总

碎碎念&#xff1a;时隔几个月&#xff0c;终于想起了账号密码终于意识到不应该再继续摸鱼了&#xff0c;打算整理一些数字IC相关的知识点供大家参考&#xff0c;也希望我们的数字IC产业越来越好~(ง •_•)ง 文章目录&#xff1a; 这就是本期的全部内容啦&#xff0c;整理不易…

[Vue3:组件通信)子组件props接收和watch监听,emit发送父组件 (添加修改设置成绩,添加、删除选课记录)

文章目录 一&#xff1a;系统功能&#xff1a;设置成绩&#xff08;添加或修改&#xff09;交互逻辑&#xff1a;涉及页面 Page02.vue&#xff0c;ModalEdit.vue主页面Page.vue注入子页面&#xff0c;使用子页面标签属性主页面对子页面做通信&#xff0c;子页面ModalEdit接收参…

【安装笔记-20240610-Linux-免费域名服务之eu.org】

安装笔记-系列文章目录 安装笔记-20240610-Linux-免费域名服务之eu.org 文章目录 安装笔记-系列文章目录安装笔记-20240610-Linux-免费域名服务之eu.org 前言一、软件介绍名称&#xff1a;eu.org主页官方介绍 二、安装步骤测试版本&#xff1a;openwrt-23.05.3-x86-64注册填写…

【笔记】从零开始大模型开发与微调:基于PyTorch与ChatGLM

从零开始大模型开发与微调&#xff1a;基于PyTorch与ChatGLM 2023.11.1版 介绍DL应用、大模型&#xff0c;ChatGLM 由清华大学自主研发&#xff0c;基于 General Language Model (GLM) 架构的一种最新型、最为强大的深度学习大模型。 1、经过约 1T 标识符的中英双语训练&#…

微信小程序轮播

1. 基本用法 在微信小程序中使用轮播组件通常需要以下几个步骤&#xff1a; 引入组件&#xff1a;在小程序页面的 WXML 文件中引入轮播组件&#xff0c;例如&#xff1a; htmlCopy Code <swiper indicator-dots"{{indicatorDots}}" autoplay"{{autoplay}}&q…

基于机器学习和深度学习的NASA涡扇发动机剩余使用寿命预测(C-MAPSS数据集,Python代码,ipynb 文件)

以美国航空航天局提供的航空涡扇发动机退化数据集为研究对象&#xff0c;该数据集包含多台发动机从启动到失效期间多个运行周期的多源传感器时序状态监测数据&#xff0c;它们共同表征了发动机的性能退化情况。为减小计算成本&#xff0c;需要对原始多源传感器监测数据进行数据…

Java——方法详细介绍

一、方法调用机制 1、方法调用机制详细介绍 下面对方法调用在内存中的情况进行分析&#xff0c;以下面的代码为例&#xff1a; public class Test {public static void main(String[] args) {Person person new Person();person.name "张三";person.age 18;int…

前端杂谈-警惕仅引入一行代码言论

插入一行 JavaScript 代码似乎是一种无受害者犯罪。这只是一个小脚本&#xff0c;对吧&#xff1f;但 JavaScript 可以导入更多 JavaScript。-杰里米基思 “这只是一行代码”是我们经常听到的宣传语。这也可能是我们对自己和他人说的最大的谎言。 “仅用一行添加样式”&#x…

【Linux文件篇】优化文件读写,加速数据处理策略——缓冲区

W...Y的主页 &#x1f60a; 代码仓库分享 &#x1f495; 前言&#xff1a;我们已经复习了C语言中的接口&#xff0c;并且学习了许多文件系统调用&#xff0c;了解了文件描述符以及重定向。今天我们继续学习文件缓冲区的相关内容。 缓冲区 在学习C语言时&#xff0c;我们经常…

LabVIEW电池测试系统

1. 背景 随着电动汽车、可再生能源等领域的迅速发展&#xff0c;电池作为能源储存和释放的核心组件&#xff0c;其性能评估变得尤为重要。电池的充放电性能、容量、循环寿命等参数直接影响着设备的工作性能和使用寿命。因此&#xff0c;设计一套全面、准确的电池测试系统对于提…

技术前沿 |【大模型BLIP-2的多模态训练】

大模型BLIP-2的多模态训练 一、引言二、BLIP-2模型概述三、多模态训练成本问题四、冻结预训练好的视觉语言模型参数的优势五、冻结预训练好的视觉语言模型参数的方法 一、引言 随着人工智能技术的飞速发展&#xff0c;大型多模态模型如BLIP-2在多个领域取得了显著的成果。然而…

学生信息管理(C语言)

学生信息管理 &#xff08;1&#xff09;问题描述 学生信息包括&#xff1a;学号&#xff0c;姓名&#xff0c;年龄&#xff0c;性别&#xff0c;出生年月&#xff0c;地址&#xff0c;电话&#xff0c;E-mail等。试设计一学生信息管理系统&#xff0c;使之能提供以下功能&am…

[图解]建模相关的基础知识-07

1 00:00:04,710 --> 00:00:08,900 这是划分&#xff0c;下一个是有序对的概念 2 00:00:11,720 --> 00:00:13,800 我们知道集合是不分顺序的 3 00:00:15,090 --> 00:00:18,200 我们花括号来代表集合的话 4 00:00:18,210 --> 00:00:21,000 AB花括号等于BA花括号 …

2_1 Linux基础操作

2_1 Linux基础操作 文章目录 2_1 Linux基础操作0. 参考1. 装机后的一些小命令查看系统的信息2. 基础命令2.1 初识基本命令2.2 日期和时间 3. 帮助命令4. 关机、重启5. 设置主机名6. rm删除7. 软件包的管理RPM、 YUM8. IP知识9. 查看一些linux的信息10. 命令行快捷键11. 光盘挂载…

如何解决ArrayList缺陷

解决ArrayList中的缺陷&#xff1a;提高Java集合框架的性能和灵活性 在Java编程中&#xff0c;ArrayList是最常用的集合类之一。它提供了动态数组的实现&#xff0c;允许我们方便地存储和访问元素。然而&#xff0c;ArrayList也存在一些缺陷和局限性&#xff0c;这些问题在某些…

银河麒麟V10_安装Qt并配置Qmake命令

环境 虚拟机X86_64Qt 5.12.12Desktop-V10-SP1-2303-update2-Release-20231023 步骤 这个版本可以从Qt官网下载到run包&#xff0c;双击安装。因为我登录的并不是root账号&#xff0c;安装后在命令行终端并没有qmake命令直接使用。 需要在~/.bashrc文件中添加qmake的路径&am…

机器学习-13-基于决策树算法构建北京市空气质量预测模型(实战)

参考机器学习数据建模与分析—Numpy和Pandas综合应用案例:北京空气质量 参考数据挖掘实战-基于决策树算法构建北京市空气质量预测模型 1 数据采集 北京市空气质量数据 收集北京市过去一段时间内的空气质量数据,包括但不限于PM2.5、PM10、NO2、SO2等主要污染物的浓度。 imp…