css小练习:案例6.炫彩加载

一.效果浏览图

 二.实现思路

html部分

HTML 写了一个加载动画效果,使用了一个包含多个 <span> 元素的 <div> 元素,并为每个 <span> 元素设置了一个自定义属性 --i

这段代码创建了一个简单的动态加载动画,由20个垂直排列的线段组成。每个线段使用一个 <span> 元素表示,并通过设置不同的 --i 值来控制它们的样式或动画效果(在给定代码中,--i 的值仅表示索引,范围从1到20)。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="css/oo1.css">
</head>
<body><section><div class="loader"><span style="--i:1;"></span><span style="--i:2;"></span><span style="--i:3;"></span><span style="--i:4;"></span><span style="--i:5;"></span><span style="--i:6;"></span><span style="--i:7;"></span><span style="--i:8;"></span><span style="--i:9;"></span><span style="--i:10;"></span><span style="--i:11;"></span><span style="--i:12;"></span><span style="--i:13;"></span><span style="--i:14;"></span><span style="--i:15;"></span><span style="--i:16;"></span><span style="--i:17;"></span><span style="--i:18;"></span><span style="--i:19;"></span><span style="--i:20;"></span></div></section>
</body>
</html>

css部分

* {margin: 0;padding: 0;box-sizing: border-box;
}

这段代码应用了一个通用的CSS选择器 * ,将所有元素的外边距和内边距重置为0,并使用 border-box 盒模型,以确保元素的宽度和高度包括边框和内边距。

section {display: flex;justify-content: center;align-items: center;min-height: 100vh;background: #042104;animation: animateBg 10s linear infinite;
}

这一部分定义了 <section> 元素的样式。将其设置为弹性布局,并使用 justify-content 和 align-items 属性使其内容水平和垂直居中。min-height 设置为 100vh,确保 <section> 元素至少铺满整个视口的高度。background 属性设置了一个深绿色的背景,并应用了一个名为 animateBg 的动画,周期为10秒,线性变化以实现颜色的循环过渡。

section .loader {position: relative;width: 120px;height: 120px;
}

这部分针对加载动画的容器 <div class="loader"> 应用了样式规则。将其设置为相对定位,宽度和高度均为120px。

section .loader span {position: absolute;top: 0;left: 0;width: 100%;height: 100%;transform: rotate(calc(18deg * var(--i)));
}

这部分定义了每个线段 <span> 元素的样式。将其设置为绝对定位,相对于容器的左上角进行定位。宽度和高度设置为100%,使其充满容器。transform 属性使用 rotate() 函数根据每个线段的索引(通过 var(--i) 参数获取)计算旋转角度,并使线段围绕容器的中心旋转。

section .loader span::before {content: '';position: absolute;top: 0;left: 0;width: 15px;height: 15px;border-radius: 50%;background: #00ff0a;box-shadow: 0 0 10px #00ff0a,0 0 20px #00ff0a,0 0 40px #00ff0a,0 0 60px #00ff0a,0 0 80px #00ff0a,0 0 100px #00ff0a;animation: animate 2s linear infinite;animation-delay: calc(0.1s * var(--i));
}

这一部分定义了每个线段的样式。使用 ::before 伪元素来创建一个圆形的指示器。设置其宽度和高度为15px,边框半径为50%,背景颜色为亮绿色 #00ff0abox-shadow 属性为指示器添加一系列的内阴影,在不同的距离和模糊程度下产生细微的发光效果。 animation 属性应用了一个名为 animate 的动画效果,周期为2秒,线性变化,并设置为无限循环播放。animation-delay 通过计算每个线段的索引值(通过 var(--i) 参数获取)乘以0.1s来设置动画的延迟时间,以实现线段的逐个出现效果。

@keyframes animate {0% {transform: scale(1);}80%,100% {transform: scale(0);} 
}

最后,这部分定义了名为 animate 的动画的关键帧,控制指示器的缩放效果。在动画的初始帧(0%),通过 transform: scale(1) 将指示器设置为原始尺寸。在80%和100%的帧中,通过 transform: scale(0) 将指示器缩放为0,实现渐渐消失的效果。

三.完整代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="css/oo1.css"><style>*{margin: 0;padding: 0;box-sizing: border-box;
}
section{display: flex;justify-content: center;align-items: center;min-height: 100vh;background: #042104;animation: animateBg 10s linear infinite;
}
@keyframes animateBg  {0%{filter: hue-rotate(0deg);}100%{filter: hue-rotate(360deg);}
}
section .loader{position: relative;width: 120px;height: 120px;}
section .loader span {position: absolute;top: 0;left: 0;width: 100%;height:100%;transform: rotate(calc(18deg * var(--i)));
}
section .loader span::before{content:'';position: absolute;top: 0;left: 0;width: 15px;height: 15px;border-radius: 50%;background:#00ff0a;box-shadow: 0 0 10px #00ff0a,0 0 20px #00ff0a,0 0 40px #00ff0a,0 0 60px #00ff0a,0 0 80px #00ff0a,0 0 100px #00ff0a;animation: animate 2s linear infinite;animation-delay: calc(0.1s * var(--i));}
@keyframes animate {0%{transform: scale(1);}80%,100%{transform: scale(0);}}</style>
</head>
<body><section><div class="loader"><span style="--i:1;"></span><span style="--i:2;"></span><span style="--i:3;"></span><span style="--i:4;"></span><span style="--i:5;"></span><span style="--i:6;"></span><span style="--i:7;"></span><span style="--i:8;"></span><span style="--i:9;"></span><span style="--i:10;"></span><span style="--i:11;"></span><span style="--i:12;"></span><span style="--i:13;"></span><span style="--i:14;"></span><span style="--i:15;"></span><span style="--i:16;"></span><span style="--i:17;"></span><span style="--i:18;"></span><span style="--i:19;"></span><span style="--i:20;"></span></div></section>
</body>
</html>

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

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

相关文章

小程序的api使用 以及一些weui组件实列获取头像 扫码等

今日目标 响应式单位rpx小程序的生命周期 【重点】20%小程序框架 weui 【重点】 50%内置API 【重点】30%综合练习 1. 响应式rpx 1.1 rpx单位 rpx是微信小程序提出的一个尺寸单位&#xff0c;将整个手机屏幕宽度分为750份&#xff0c;1rpx 就是 1/750&#xff0c;避免不同手…

漫画 | TCP/IP之大明邮差

后记&#xff1a; 1973年&#xff0c;卡恩与瑟夫开发出了网络中最核心的两个协议&#xff1a;TCP协议和IP协议&#xff0c;随后为了验证两个协议的可用性&#xff0c;他们做了一个实验&#xff0c;在多个异构网络中进行数据传输&#xff0c;数据包在经过近10万公里的旅程后到达…

windows永久关闭更新

不要去services.msc 服务里面关闭windowUpdata了&#xff0c;对win11和部分win10根本不管用&#xff0c;下面在教你一招永久关闭&#xff08;原理不是关闭&#xff0c;只是延长更新时间&#xff0c;时间可以设置百年后&#xff0c;所以和关闭差不多&#xff09; windows图形化…

ModaHub魔搭社区:大模型落地需要“记忆力”,这家公司想为向量数据库Milvus Cloud正名

现实生活中若两人进行对话,大致需要三步流程:一方首先抛出话题作引子;另一方会先调动记忆判断自己是否了解这个话题,然后再分析给出应该做出何种回答。如此循环往复直到互动结束,而此次对话又会作为一种新的“记忆”被双方吸收。 为让计算机完成这样的互动过程,并持续…

acwing第 115 场周赛第二题题解:维护最大值和次大值

一、链接 5132. 奶牛照相 二、题目 约翰的农场有 nn 头奶牛&#xff0c;编号 1∼n1∼n。 其中&#xff0c;第 ii 头奶牛的宽度为 wiwi&#xff0c;高度为 hihi&#xff0c; 有一天&#xff0c;它们聚餐后决定拍照留念。 关于拍照的描述如下&#xff1a; 它们一共拍了 nn…

【Linux初阶】基础IO - 动静态库 | 初识、生成、链接、加载

&#x1f31f;hello&#xff0c;各位读者大大们你们好呀&#x1f31f; &#x1f36d;&#x1f36d;系列专栏&#xff1a;【Linux初阶】 ✒️✒️本篇内容&#xff1a;动静态库初识&#xff0c;库的含义&#xff0c;静态库的生成与链接&#xff0c;gcc/g默认链接方式&#xff0c…

Grafana V10 告警推送

最近项目建设完成&#xff0c;一个城域网项目&#xff0c;相关zabbix和grafana展示已经完&#xff0c;想了想&#xff0c;不想天天看平台去盯网络监控平台&#xff0c;索性对告警进行分类调整&#xff0c;增加告警的推送&#xff0c;和相关部门的提醒&#xff0c;其他部门看不懂…

C语言经典小游戏之三子棋(超详解释+源码)

“纵有疾风来&#xff0c;人生不言弃&#xff0c;风乍起&#xff0c;合当奋意向此生。” 今天我们一起来学习一下三子棋小游戏用C语言怎么写出来&#xff1f; 三子棋小游戏 1.游戏规则介绍2.游戏准备3.游戏的实现3.1生成菜单3.2游戏的具体实现3.2.1初始化棋盘3.2.2打印棋盘3.2…

rv1109/1126 rknn 模型部署过程

rv1109/1126是瑞芯微出的嵌入式AI芯片&#xff0c;带有npu, 可以用于嵌入式人工智能应用。算法工程师训练出的算法要部署到芯片上&#xff0c;需要经过模型转换和量化&#xff0c;下面记录一下整个过程。 量化环境 模型量化需要安装rk的工具包&#xff1a; rockchip-linux/rk…

FineBI 人力资源 专题

此处使用FineBI处理人力资源数据&#xff0c;数据来源于HR_database数据文件&#xff0c;将此文件拷贝到安装目录下 然后配置数据库连接 在【公共数据】中新建一个文件夹&#xff0c;并将之前数据库中需要用到的表放入此处&#xff0c;更新数据。显示如下。 这时候首先要建立…

Flutter 自定义view

带进度动画的圆环。没gif&#xff0c;效果大家自行脑补。 继承CustomPainter&#xff0c;paint()方法中拿到canvas&#xff0c;绘制API和android差不多。 import package:flutter/material.dart;class ProgressRingPainter extends CustomPainter {double strokeWidth 20;Col…

【网络技术】TCP详解

1 TCP是什么 TCP是Transmission Control Protocol的缩写&#xff0c;即传输控制协议。 TCP是一种面向连接的、可靠的、基于字节流的传输协议&#xff0c;是互联网通信协议TCP/IP中的一个重要组成部分。 2 三次握手 三次握手的过程可以用以下图示表示&#xff1a; 2.1 详细介绍…

《算法竞赛·快冲300题》每日一题:“连接草坪(II)”

《算法竞赛快冲300题》将于2024年出版&#xff0c;是《算法竞赛》的辅助练习册。 所有题目放在自建的OJ New Online Judge。 用C/C、Java、Python三种语言给出代码&#xff0c;以中低档题为主&#xff0c;适合入门、进阶。 文章目录 题目描述题解C代码Java代码Python代码 “ 连…

[Docker实现测试部署CI/CD----自由风格的CI操作[中间架构](4)]

目录 10、自由风格的CI操作&#xff08;中间架构&#xff09;中间架构图创建web项目Idea提交项目到远程仓库提交代码到本地库提交代码到远程库从jenkins拉取代码新建任务jenkins集成gitlab立即构建 将项目打为jar包Jenkins 配置 mvn 命令重新构建 代码质量检测jenkins将代码推送…

HTTP(超文本传输协议)学习

关于HTTP补学 一、HTTP能干什么 通过下图能够直观的看出&#xff1a;“交换数据 ” 二、HTTP请求例子 一个 HTTP 方法&#xff0c;通常是由一个动词&#xff0c;像 GET、POST 等&#xff0c;或者一个名词&#xff0c;像 OPTIONS、HEAD 等&#xff0c;来定义客户端执行的动作。…

小学语文思维导图:如何写一篇好的作文

大家都知道&#xff0c;思维导图是一款非常高效的工具。我们利用思维导图不仅可以做读书笔记、还可以运用到很多具体细分的场景。今天我们就“如何利用思维导图写好一篇作文”和大家进行分享。 思维导图在写作文的过程中&#xff0c;可以帮助我们整理思路。提高效率。将混乱的内…

【iOS安全】OpenSSH使用

安装OpenSSH 在 Cydia 中直接查找和安装 OpenSSH 使用OpenSSH http://orinchen.github.io/blog/2014/01/15/install-and-use-openssh-on-ios/ 保证PC和iPhone在同一网段下 查看iPhone的IP地址 ssh root10.168.xx.xx 口令默认是alpine 或者也可以使用XShell等集成终端

再次斩获第一,文心3.5霸榜国内大模型

目录 1 什么是文心一言&#xff1f;2 体验与文心一言对话3 文心3.5霸榜国内大模型 1 什么是文心一言&#xff1f; 文心一言是百度全新一代知识增强大语言模型&#xff0c;文心大模型家族的新成员&#xff0c;能够与人对话互动&#xff0c;回答问题&#xff0c;协助创作&#xf…

数据结构--单链表OJ题

上文回顾---单链表 这章将来做一些链表的相关题目。 目录 1.移除链表元素 2.反转链表 3.链表的中间结点 4.链表中的倒数第k个结点 5.合并两个有序链表 6.链表分割 7.链表的回文结构 8.相交链表 9.环形链表 ​编辑 10.环形链表II ​编辑 ​编辑 1.移除链表元素 思…

2023暑假牛客多校6- E.Sequence

题目描述 You have an array of elements . For each task, you have three integers . Ask whether you can find an array of integers satisfy: are the multiplies of 2 Specially, if , it should satisfy is the multiply of 2 We define . If possible, print…