使用CSS实现酷炫加载

使用CSS实现酷炫加载

效果展示

在这里插入图片描述

整体页面布局

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

使用JavaScript添加loading加载动画的元素

document.addEventListener("DOMContentLoaded", () => {let container = document.querySelector(".container");for (let j = 0; j < 4; j++) {let loader = document.createElement("div");loader.classList.add("loader");loader.style.setProperty("--j", j);for (let i = 0; i <= 20; i++) {let span = document.createElement("span");span.style.setProperty("--i", i);loader.appendChild(span);}container.appendChild(loader);}});

编写loading元素样式

.container {display: flex;justify-content: center;align-items: center;min-height: 100vh;background: #042104;
}.loader {position: relative;transform: rotate(calc(45deg * var(--j)));
}.loader span {position: absolute;transform: rotate(calc(18deg * var(--i)));
}.loader span {position: absolute;
}.loader span::before {content: "";position: absolute;width: 15px;height: 15px;border: 2px solid #00ff0a;border-radius: 2px;animation: animate 5s linear infinite;animation-delay: calc(-0.5s * var(--i));
}.loader:nth-child(even) span::before {background: #00ff0a;
}

实现上述代码后,效果如下:
在这里插入图片描述

实现loading动画

@keyframes animate {0% {transform: translateX(250px) scale(4);opacity: 0;}50% {opacity: 1;}100% {transform: translateX(-10px) scale(0);}
}

使用 filter 属性修改颜色

.container {filter: hue-rotate(70deg);
}

完整代码下载

完整代码下载

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

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

相关文章

初始爬虫11

1.斗鱼selenium爬取 # -*- coding: utf-8 -*- from selenium import webdriver from selenium.webdriver.common.by import By import timeclass Douyu(object):def __init__(self):self.url https://www.douyu.com/directory/allself.driver webdriver.Chrome()self.driver…

超分辨率重构论文集合

《Detection of Tea Leaf Blight in Low-Resolution UAV Remote Sensing Images》 发表信息&#xff1a;发表于《IEEE TRANSACTIONS ON GEOSCIENCE AND REMOTE SENSING》2024 年&#xff0c;作者 Gensheng Hu 等&#xff0c;来自安徽大学等。核心内容 背景&#xff1a;茶叶枯萎…

Scala 字符串

Scala 字符串 Scala 是一种多范式的编程语言&#xff0c;它结合了面向对象和函数式编程的特点。在 Scala 中&#xff0c;字符串是不可变的&#xff0c;这意味着一旦创建了一个字符串&#xff0c;就不能更改它。Scala 字符串由 Java 字符串支持&#xff0c;因此 Scala 字符串的…

在线css像素px到Em的转换器

具体请前往&#xff1a;在线Px转Em工具--将绝对像素(px)长度单位转换为相对长度em

热补丁反调试API Hook—上跳/下跳

以 IsDebuggerPresent 函数为例&#xff0c;可以看到可以上跳&#xff08;简单&#xff09;&#xff0c;也可以下跳&#xff08;复杂&#xff09;。 上跳&#xff1a; BYTE NewCodes[2] { 0xEB,0xF9 }; BYTE JmpCode[5] { 0xE9,0 }; BYTE oldCodes[2] { 0 };BOOL Mydebug() …

第三十八章 验证和解密入站消息 - 实例身份验证和 WS-Security

文章目录 第三十八章 验证和解密入站消息 - 实例身份验证和 WS-Security实例身份验证和 WS-Security检索安全标头元素FindByEncryptedKeySHA1()FindElement()FindLastElement() 检查签名确认 第三十八章 验证和解密入站消息 - 实例身份验证和 WS-Security 实例身份验证和 WS-S…

拿下奇怪的前端报错:某些多摄手机拉取部分摄像头视频流会导致应用崩溃,该如何改善呢?

现在有些手机更新的很激进&#xff0c;但是却没有很好的实现web规范&#xff0c;不支持facingMode配置来控制前后摄像头&#xff0c;只能根据序号切换&#xff0c;但拉取到某些设备的流会导致应用崩溃&#xff0c;这里就教一招如何尽可能的改善用户体验 至少不至于次次都崩溃&a…

普通人怎么才能实现时间自由和财富自由?

在快节奏的现代生活中&#xff0c;每个人都怀揣着对时间自由和财富自由的向往。尤其是对于普通人而言&#xff0c;这不仅仅是一种梦想&#xff0c;更是一种可以通过智慧和努力实现的生活方式。副业&#xff0c;作为主业之外的另一片天地&#xff0c;正逐渐成为实现这一梦想的重…

npx create-react-app react-basic 创建react 项目报错

npx create-react-app创建react 项目报错 npm error code ERESOLVE npm error ERESOLVE could not resolve npm error npm error While resolving: react-basic0.1.0 npm error Found: reactundefined npm error node_modules/react npm error react"*" from the …

63.5 注意力提示_by《李沐:动手学深度学习v2》pytorch版

系列文章目录 文章目录 系列文章目录注意力提示生物学中的注意力提示查询、键和值注意力的可视化使用 show_heatmaps 显示注意力权重代码示例 代码解析结果 小结练习 注意力提示 &#x1f3f7;sec_attention-cues 感谢读者对本书的关注&#xff0c;因为读者的注意力是一种稀缺…

Angular ng-state script 元素的生成机制介绍

ng-state 的生成过程是在 Angular SSR 中非常关键的部分。为了让客户端能够接管服务器渲染的页面状态&#xff0c;Angular 在服务器端需要将应用的当前状态保存下来&#xff0c;并将其嵌入到返回的 HTML 中。这样&#xff0c;客户端在接管时就可以直接使用这些状态&#xff0c;…

动手学深度学习(李沐)PyTorch 第 7 章 现代卷积神经网络

7.1 深度卷积神经网络&#xff08;AlexNet&#xff09; 在计算机视觉中&#xff0c;直接将神经网络与其他机器学习方法进行比较也许不公平。这是因为&#xff0c;卷积神经网络的输入是由原始像素值或是经过简单预处理&#xff08;例如居中、缩放&#xff09;的像素值组成的。但…

深圳楼市国庆“狂欢”:从“冷清”到“火爆”,谁导演了这场大戏

你知道吗&#xff1f;深圳那楼市&#xff0c;前面冷清得跟个大森林似的&#xff0c;楼里的灯都像是寂寞的眼睛&#xff0c;眨巴眨巴的&#xff0c;没人搭理。比如八月份那会儿&#xff0c;售楼中心冷清得能听见针掉地上的声音&#xff0c;工作人员闲得跟啥似的&#xff0c;大眼…

【VUE】案例:商场会员管理系统

编写vuedfr实现对会员进行基本增删改查 1. drf项目初始化 请求&#xff1a; POST http://127/0.0.0.1:8000/api/auth/ {"username":"cqn", "password":"123"}返回&#xff1a; {"username":"cqn", "token&q…

Ubuntu2404安装

Ubuntu是一款非常优秀的发行版本&#xff0c;起初她的优势主要在于桌面版&#xff0c;但是随着Centos 从服务版的支持的退出&#xff0c;Ubuntu server也在迅猛的成长&#xff0c;并且不断收获了用户&#xff0c;拥有了一大批忠实的粉丝。好了&#xff0c;废话不多说&#xff0…

鸿蒙harmonyos next flutter通信之BasicMessageChannel获取app版本号

本文将通过BasicMessageChannel获取app版本号&#xff0c;以此来演练BasicMessageChannel用法。 建立channel flutter代码&#xff1a; //建立通道 BasicMessageChannel basicMessageChannel BasicMessageChannel("com.xmg.basicMessageChannel",StringCodec());…

微智启yolo数据集划分工具免费分享下载

微智启yolo数据集划分工具&#xff0c;是由微智启软件工作室开发&#xff0c;版权所有&#xff0c;用于划分yolo数据集的工具&#xff0c;免费分享不收费&#xff0c;禁止用于一切商业用途&#xff0c;如有发现欢迎举报投诉并退款&#xff01; 使用指南&#xff1a; 打开软件&…

Linux忘记root用户密码怎么重设密码

直接说步骤&#xff1a; 1.重启客户机 2.在选择内核页面快速按e键&#xff0c;进入编辑模式 进入后应该是这个样子 在这里只能按上下键切换行 找到Linux16这里 3.按右方向键切换到行尾&#xff0c;也就是UTF-8处&#xff0c;在后面添加一个空格&#xff0c;然后加上这段话 …

Pikachu-暴力破解-验证码绕过(on client)

访问页面&#xff0c; 从burpsuite 上看到返回的源代码&#xff1b; 验证码生成时通过 createCode 方法生成&#xff0c;在前端页面生成&#xff1b; 同时也是在前端做的校验&#xff1b; 直接验证&#xff1b;F12 -- 网络&#xff0c;随便输入个账号、密码、验证码&#xff0…

【Web】portswigger 服务端原型污染 labs 全解

目录 服务端原型污染 为什么服务器端原型污染更难检测&#xff1f; 通过受污染的属性反射检测服务器端原型污染 lab1:通过服务器端原型污染进行权限提升 无需污染属性反射即可检测服务器端原型污染 状态代码覆盖 JSON 空格覆盖 字符集覆盖 lab2:检测没有污染属性反射的…