web前端之3D标签动画、指定范围的随机数、动态设置css变量、文档片段对象、反向动画

MENU

  • 效果图
  • html
  • JavaScript
  • style


效果图

animation3D1


animation3D2


html

<div class="container"></div>

JavaScript

// 祝词
var words = ['健康码常绿','股票飙红','生意兴隆','财源广进','心想事成','永远十八','身体健康','大富大贵','大吉大利','万事如意','美梦成真','吉祥如意','鸿运当头','五福临门','吉星高照','好运连连','八面春风','百事亨通','万事大吉','喜气洋洋','岁岁今日','年年今朝','和气吉祥','百事顺遂','福星高照','前途光明','喜上眉梢','荣华富贵','家庭和睦','爱情事业双丰收','工作顺利','百年好合','龙马精神','出入平安','前程万里','年年有余','万事胜意','福如东海','寿比南山','学业有成','大展宏图','顺风顺水','事业辉煌','生意红火','吉时吉日疾如风','丰年丰月如风增','增福增财增长寿','寿山寿海寿长生','生财生利生贵子','子孝孙贤代代荣','荣华富贵年年有','有钱有势有前程'
];// 生成指定范围随机数(保留小数点后两位)
function randomNum(min, max) {var num = (Math.random() * (max - min + 1) + min).toFixed(2);return num;
}// 初始函数
function init() {var container = document.querySelector('.container');var f = document.createDocumentFragment(); //创建文档片段对象words.forEach(w => {var word_box = document.createElement('div');var word = document.createElement('div');word.innerText = w;word.classList.add('word');// 随机生成色相值(0为红色、120为绿色、240为蓝色、360为红色)var hue = randomNum(0, 240);word.style.color = 'hsl(' + hue + ',100%,65%)';word_box.classList.add('word-box');// 生成随机数值,并赋值给自定义属性word_box.style.setProperty('--margin-top', randomNum(-40, 20) + 'vh');word_box.style.setProperty('--margin-left', randomNum(6, 35) + 'vw');word_box.style.setProperty('--animation-duration', randomNum(8, 20) + 's');word_box.style.setProperty('--animation-delay', randomNum(-20, 0) + 's');word_box.appendChild(word);f.appendChild(word_box);})container.appendChild(f);
}// 绑定加载事件
window.addEventListener('load', init);

style

* {margin: 0;padding: 0;
}:root {/* 自定义属性,这几个属性等会是通过js随机生成,通过var函数可对其调用 *//* 上外边距 */--margin-top: 0;/* 左外边距 */--margin-left: 0;/* 动画时长 */--animation-duration: 0s;/* 动画延迟时间 */--animation-delay: 0s;
}body {/* 100%窗口高度 */height: 100vh;/* 弹性布局 居中显示 */display: flex;justify-content: center;align-items: center;background-color: #111;/* 溢出隐藏 */overflow: hidden;/* 设置视距 */perspective: 1300px;
}div {/* 所有div默认开启3D属性 */transform-style: preserve-3d;
}.word-box,
.word-box .word {position: absolute;/* 执行动画:动画名 时长 线性的 无限次播放 */animation: rotY 0s linear infinite;/* 设置动画时长 */animation-duration: var(--animation-duration);/* 设置动画延迟 */animation-delay: var(--animation-delay);
}.word-box {margin-top: var(--margin-top);
}.word-box .word {margin-left: var(--margin-left);
}.word-box .word {/* 反向动画 */animation-direction: reverse;
}/* 定义动画 */@keyframes rotY {to {/* 1turn表示一圈 */transform: rotateY(1turn);}
}

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

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

相关文章

正式发布:VitePress 1.0 现代化静态站点生成器!

大家好&#xff0c;我是奇兵&#xff0c;今天介绍一下现代化静态站点生成器!&#xff0c;希望能帮到大家。 3 月 21 日&#xff0c; 由 Vue 团队出品的现代化静态站点生成器 VitePress 正式发布 1.0 版本&#xff01;它专为构建快速、以内容为中心的网站而生&#xff0c;能够轻…

Apache Spark

一、Apache Spark 1、Spark简介 Apache Spark是用于大规模数据 (large-scala data) 处理的统一 (unified) 分析引擎。 Spark官网 Spark最早源于一篇论文Resilient Distributed Datasets: A Fault-Tolerant Abstraction for In-Memory Cluster Computing,该论文是由加州大学柏…

C# 将 Word 转文本存储到数据库并进行管理

目录 前言 1. 创建数据库表格 2. 安装必需的 NuGet 包 3. 转换 Word 文档为文本 4. 将文本存储到数据库 5. 完整示例 前言 C# 是一种通用的编程语言&#xff0c;可以用于开发各种类型的应用程序&#xff0c;包括处理文本和数据库管理。在这篇文章中&#xff0c;我将向您…

问卷调查数据分析指南!掌握方法,精准把握用户需求!

“我们可以用自定义报表、交叉报表、自定义过滤器等放方式进行问卷调查数据分析。“ 问卷调查的过程中&#xff0c;问卷设计、问卷分发、问卷收集可能都不是让我们最头疼的。经过几天的奋战&#xff0c;终于拿到了数据&#xff0c;但是问题也随之而来。收集上来的问卷信息&…

linux操作系统——线程控制+线程封装

1.理解用户级线程 我们前面用到的所有跟线程有关的接口全部都不是系统直接提供的接口&#xff0c;而是原生线程库pthread提供的接口。我们前面谈到了由于用户只认线程&#xff0c;而linux操作系统是通过用轻量级进程模拟线程&#xff0c;并不是真正的线程&#xff0c;所以linu…

C# for/foreach 循环

一个 for 循环是一个允许您编写一个执行特定次数的循环的重复控制结构。 语法 C# 中 for 循环的语法&#xff1a; for ( init; condition; increment ) {statement(s); } 下面是 for 循环的控制流&#xff1a; init 会首先被执行&#xff0c;且只会执行一次。这一步允许您声…

【数据结构】非线性结构——二叉树

文章目录 前言1.树型结构1.1树的概念1.2树的特性1.3树的一些性质1.4树的一些表示形式1.5树的应用2.二叉树 2.1 概念2.2 两种特殊的二叉树2.3 二叉树的性质2.4 二叉树的存储2.5 二叉树的基本操作 前言 前面我们都是学的线性结构的数据结构&#xff0c;接下来我们就需要来学习非…

Stable Diffusion 进阶教程 - 二次开发(制作您的文生图应用)

目录 1. 引言 2. 基于Rest API 开发 2.1 前置条件 2.2 代码实现 2.3 效果演示 2.4 常见错误 3. 总结 1. 引言 Stable Diffusion作为一种强大的文本到图像生成模型&#xff0c;已经在艺术、设计和创意领域引起了广泛的关注和应用。然而&#xff0c;对于许多开发者来说&#xff…

iOS开发进阶(九):OC混合开发嵌套H5应用并互相通信

文章目录 一、前言二、嵌套H5应用并实现双方通信2.1 WKWebView 与JS 原生交互2.1.1 H5页面嵌套2.1.2 常用代理方法2.1.3 OC调用JS方法2.1.4 JS调用OC方法 2.2 JSCore 实现原生与H5交互2.2.1 OC调用H5方法并传参2.2.2 H5给OC传参 2.3 UIWebView的基本用法2.3.1 H5页面嵌套2.3.2 …

Spring Boot | SpringBoo“开发入门“

目录 : 1.SpringBoot的“介绍”SpringBoot”概述” &#xff1a;SpringBoot”简介“SpringBoot的“优点” 2. SpringBoot入门程序环境准备使用 “Maven”方式构建SpringBoot 项目使用“Spring Initializr”方式构建Spring Boot 项目 3. “单元测试” 和“热部署”单元测试热部署…

微服务day06 -- Elasticsearch的数据搜索功能。分别使用DSL和RestClient实现搜索

1.DSL查询文档 elasticsearch的查询依然是基于JSON风格的DSL来实现的。 1.1.DSL查询分类 Elasticsearch提供了基于JSON的DSL&#xff08;Domain Specific Language&#xff09;来定义查询。常见的查询类型包括&#xff1a; 查询所有&#xff1a;查询出所有数据&#xff0c;一…

‘npm‘ 不是内部或外部命令,也不是可运行的程序

npm认识三年了&#xff0c;今天才知道这是node.js的命令 也就是说&#xff0c;想要在cmd里面运行 npm 命令&#xff0c;但就的安装node.js 1. node.js安装 没有安装包的先下载安装包&#xff1a;下载 | Node.js 中文网 (nodejs.cn) 下载之后双击打开&#xff0c;一路安装确…

基于Arduino IDE 野火ESP8266模块 EEPROM 存储开发

一、操作存储器 我们可以使用ESP8266模块的EEPROM&#xff0c;也就是可读可擦存储器&#xff0c;可以掉电不丢失地帮我们存储一些数据。ESP8266微控制器有一个闪存区(Flash memory) 来模拟Arduino的EEPROM。这是微控制器中一个特殊的内存位置&#xff0c;即使在主板关闭后&…

vscode添加gitee

1.创建仓库 2.Git 全局设置 3.初始化仓库 2.1 打开vscode打开需要上传到给git的代码文件 2.2.点击左边菜单第三个的源代码管理->初始化仓库 4.点击加号暂存所有更改 5.添加远程仓库 5.1 添加地址&#xff0c;回车 5.2 填写库名&#xff0c;回车 6.提交和推送 6.1 点击✔提交…

SpringBoot学习之ElasticSearch下载安装和启动(Mac版)(三十一)

本篇是接上一篇Windows版本,需要Windows版本的请看上一篇,这里我们继续把Elasticsearch简称为ES,以下都是这样。 一、下载 登录Elasticsearch官网,地址是:Download Elasticsearch | Elastic 进入以后,网页会自动识别系统给你提示Mac版本的下载链接按钮 二、安装 下载…

【分布式】——CAPBASE理论

CAP&BASE理论 ⭐⭐⭐⭐⭐⭐ Github主页&#x1f449;https://github.com/A-BigTree 笔记链接&#x1f449;https://github.com/A-BigTree/tree-learning-notes ⭐⭐⭐⭐⭐⭐ Spring专栏&#x1f449;https://blog.csdn.net/weixin_53580595/category_12279588.html Sprin…

JMeter元件作用域和执行顺序

JMeter元件作用域和执行顺序 元件的基本介绍基本元件总结 作用域的基本介绍作用域的原则元件执行顺序Jmeter第一个案例&#xff1a; Jmeter三个重要组件&#xff08;重点&#xff09;线程组特点线程组分类线程组的属性案例分析 HTTP请求案例一&#xff08;使用HTTP请求路径来传…

基于ArkUI框架开发-ImageKnife渲染层重构

ImageKnife是一款图像加载缓存库&#xff0c;主要功能特性如下&#xff1a; ●支持内存缓存&#xff0c;使用LRUCache算法&#xff0c;对图片数据进行内存缓存。 ●支持磁盘缓存&#xff0c;对于下载图片会保存一份至磁盘当中。 ●支持进行图片变换&#xff1a;支持图像像素…

el-card设置内边距

el-card设置内边距 :deep(.el-card .el-card__body) {padding: 5px; }

java第一次作业(二)

先写思路&#xff0c;再写代码&#xff0c;思路清晰&#xff0c;才能写对代码 7-6 求12...n的和 思路&#xff1a; 运用expression的字符串输出 重点&#xff1a; expression输出 代码&#xff1a; import java.util.Scanner; public class Main {public static void main…