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

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

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>

相关文章:

  • 趣谈网络协议
  • 第七章 Three.js 动画与交互
  • 热门开源项目推荐:技术与地址概览
  • laravel8使用中间件实现xss处理
  • 简单说一下STL中的map容器的特点、底层实现和应用场景【面试】
  • 【云原生】Kubernetes----Rancher助力Kubernetes监控
  • 开发uniapp 小程序时遇到的问题
  • DeepSORT(目标跟踪算法) 卡尔曼滤波 状态向量是如何映射到观测向量(测量向量)的即观测矩阵的构建方式
  • MySQL怎么为表添加描述
  • PR插件-图层抖动弹跳缩放旋转模糊闪烁缩放抖动动作效果预设
  • spring管理的对象通过@Init注解修饰的方法不会在new对象的时候触发
  • 【面向就业的Linux基础】从入门到熟练,探索Linux的秘密(二)
  • css3新增的伪类有哪些
  • mysql8.0 sql_mode与ONLY_FULL_GROUP_BY报错
  • 《广告数据定量分析》核心内容——搜索广告投放优化方法
  • JavaScript 如何正确处理 Unicode 编码问题!
  • (三)从jvm层面了解线程的启动和停止
  • [分享]iOS开发-关于在xcode中引用文件夹右边出现问号的解决办法
  • 【划重点】MySQL技术内幕:InnoDB存储引擎
  • java正则表式的使用
  • magento2项目上线注意事项
  • Rancher如何对接Ceph-RBD块存储
  • socket.io+express实现聊天室的思考(三)
  • Spring-boot 启动时碰到的错误
  • 不上全站https的网站你们就等着被恶心死吧
  • 从零开始的webpack生活-0x009:FilesLoader装载文件
  • 基于Android乐音识别(2)
  • 容器化应用: 在阿里云搭建多节点 Openshift 集群
  • 再次简单明了总结flex布局,一看就懂...
  • NLPIR智能语义技术让大数据挖掘更简单
  • 支付宝花15年解决的这个问题,顶得上做出十个支付宝 ...
  • ​水经微图Web1.5.0版即将上线
  • #pragma once与条件编译
  • $refs 、$nextTic、动态组件、name的使用
  • (70min)字节暑假实习二面(已挂)
  • (cljs/run-at (JSVM. :browser) 搭建刚好可用的开发环境!)
  • (差分)胡桃爱原石
  • (二)Eureka服务搭建,服务注册,服务发现
  • (附源码)计算机毕业设计SSM在线影视购票系统
  • (九)One-Wire总线-DS18B20
  • (四)Tiki-taka算法(TTA)求解无人机三维路径规划研究(MATLAB)
  • (算法二)滑动窗口
  • **Java有哪些悲观锁的实现_乐观锁、悲观锁、Redis分布式锁和Zookeeper分布式锁的实现以及流程原理...
  • *p++,*(p++),*++p,(*p)++区别?
  • .locked1、locked勒索病毒解密方法|勒索病毒解决|勒索病毒恢复|数据库修复
  • .NET 命令行参数包含应用程序路径吗?
  • .net操作Excel出错解决
  • .net对接阿里云CSB服务
  • .net用HTML开发怎么调试,如何使用ASP.NET MVC在调试中查看控制器生成的html?
  • .net与java建立WebService再互相调用
  • .考试倒计时43天!来提分啦!
  • @WebServiceClient注解,wsdlLocation 可配置
  • [ 数据结构 - C++] AVL树原理及实现
  • [3300万人的聊天室] 作为产品的上游公司该如何?
  • [Bzoj4722]由乃(线段树好题)(倍增处理模数小快速幂)