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.mzph.cn/news/33139.shtml

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

相关文章

【go语言基础】结构体struct

主要是敲代码&#xff0c;敲的过程中会慢慢体会。 1.概念 结构体是用户定义的类型&#xff0c;表示若干字段的集合&#xff0c;目的是将数据整合在一起。 简单的说&#xff0c;类似Java中的实体类。存储某个实体属性的集合。 2.结构体声明 注意&#xff1a;结构体名字&…

Flask实现接口mock,安装及使用教程(一)

1、什么是接口mock 主要是针对单元测试的应用&#xff0c;它可以很方便的解除单元测试中各种依赖&#xff0c;大大的降低了编写单元测试的难度 2、什么是mock server 正常情况下&#xff1a;测试客户端——测试——> 被测系统 ——依赖——>外部服务依赖 在被测系统和…

AI:01-基于机器学习的深度学习的玫瑰花种类的识别

文章目录 一、数据集介绍二、数据预处理三、模型构建四、模型训练五、模型评估六、模型训练七、模型评估八、总结深度学习技术在图像识别领域有着广泛的应用,其中一种应用就是玫瑰花种类的识别。在本文中,我们将介绍如何使用机器学习和深度学习技术来实现玫瑰花种类的识别,并…

运维监控学习1

1、监控对象&#xff1a; 1、监控对象的理解&#xff1b;CPU是怎么工作的&#xff1b; 2、监控对象的指标&#xff1a;CPU使用率&#xff1b;上下文切换&#xff1b; 3、确定性能基准线&#xff1a;CPU负载多少才算高&#xff1b; 2、监控范围&#xff1a; 1、硬件监控&#x…

“掌握类与对象,点亮编程之路“(下)

White graces&#xff1a;个人主页 &#x1f649;专栏推荐:《C语言入门知识》&#x1f649; &#x1f649; 内容推荐:“掌握类与对象&#xff0c;点亮编程之路“(上)&#x1f649; &#x1f439;今日诗词:春风得意马蹄疾&#xff0c;一日看尽长安花&#x1f439; 目录 &…

mysql-数据库-在表中添加数据三种方式

创建数据库和表 mysql> create database mydb4; Query OK, 1 row affected (0.01 sec)mysql> use mydb4; Database changed mysql> create table stu_info(-> stu_id int primary key auto_increment comment 学号,-> stu_name varchar(30) not null comment …

flume系列之:监控zookeeper的flume配置写入节点,新增和删除flume agent节点,通过ansible自动部署和卸载flume agent

flume系列之:监控zookeeper的flume配置写入节点,新增和删除flume agent节点,通过ansible自动部署和卸载flume agent 一、相关技术二、流程梳理三、部署和删除flume agent效果四、监控zookeeper节点五、新增zookeeper节点部署flume agent六、删除zookeeper节点删除flume agen…

计算机网络和 Internet 的基本概念

计算机网络和互联网&#xff08;Internet&#xff09;是现代计算机科技中的重要概念。它们为计算机之间的通信和数据交换提供了基础架构。以下是它们的基本概念&#xff1a; **计算机网络&#xff1a;** 计算机网络是指将多台计算机连接在一起&#xff0c;以便它们可以共享资…

vscode里面报:‘xxx‘ is assigned a value but never used.解决办法

const setCurPage: React.Dispatch<React.SetStateAction<number>> 已声明“setCurPage”&#xff0c;但从未读取其值。ts(6133) setCurPage is assigned a value but never used.eslinttypescript-eslint/no-unused-vars 出现这个报错是eslint导致的&#xff0…

P450进阶款无人机室内定位功能研测

在以往的Prometheus 450&#xff08;P450&#xff09;无人机上&#xff0c;我们搭载的是Intel Realsense T265定位模块&#xff0c;使用USB连接方式挂载到机载计算机allspark上&#xff0c;通过机载上SDK驱动T265运行并输出SLAM信息&#xff0c;以此来实现室内定位功能。 为进…

倒数纪念日-生日提醒事项时间管理倒计时软件

倒数纪念日​​​​​​​是一款功能强大的时间管理、事项提醒软件。帮你更好的管理倒数日、纪念日、生日、节假日、还款日等各种重要日子&#xff0c;通知提醒&#xff0c;让你不再错过生命中的每一个重要日子。 【功能简介】 分类管理&#xff1a;倒数日、纪念日、自定义分类…

腾讯云10万日活服务器配置怎么选?费用多少?

日活10万的小程序或APP使用腾讯云服务器配置怎么选&#xff1f;腾讯云10万人服务器配置多少钱一年&#xff1f;可以选择腾讯云4核8G12M轻量应用服务器或8核16G18M服务器&#xff0c;云服务器CVM的话可以选择标准型S5实例&#xff0c;腾讯云服务器网来详细说下腾讯云日活10万服务…

AJAX-笔记(持续更新中)

文章目录 Day1 Ajax入门1.AJAX概念和axios的使用2. 认识URL3.URL的查询参数4.常用的请求方法和数据提交5.HTTP协议-报文6.接口文档7.form-serialize插件8.案例用户登录 Day2 Ajax综合案bootstrap弹框图书管理图片上传更换背景个人信息设置 Day3 AJAX原理XMLHttpRequestPromise封…

SQL常见命令语句

1.连接数据库 mysql (-h IP) -u root -p 密码2.查看数据库 show databases3.使用数据库 use db_name4.查看表 show tables [from db_name]5.查看表结构 desc tb_name6.创建、删除、选择数据库 create database db_namedrop database db_nameuse db_name7.数据类型 参考链…

kvm not all arguments converted during string

kylin virt-manager 远程镜像制作问题记录(not all arguments ) 项目场景&#xff1a; 服务器端安装的OS版本&#xff1a;Kylin-Server-10-SP1-Release-Build20-20210518-arm64-2021-05-18 客户端安装的OS版本&#xff1a;Kylin-Server-10-SP1-Release-Build20-20210518-x86_…

【数据结构•堆】序列和的前n小元素(堆排序)

题目描述 问题&#xff1a;序列和的前n小元素 给出两个长度为n的有序表A和B, 在A和B中各任取一个, 可以得到 n^2 个和. 求这些和最小的n个。 输入输出格式 输入格式&#xff1a; 输入数据共三行。   第一行&#xff0c;一个整数值n &#xff08; n < 10^4 &#xff09…

rknn-toolkit安装的一点感想

rknn-toolkit装了好多次&#xff0c;总是会报错&#xff0c;终于尝试出了一个版本可以用的。&#xff08;注意windows和linux上都能用&#xff09; rknn-toolkit: v1.7.1&#xff1a; cuda 10.1 python3.6 pytorch1.5.1 opencv-python3.2.0.8 tensorflow1.14.0模型导出的时候…

使用 API Gateway Integrator 在 Quarkus 中实施适用于 AWS Lambda 的 OpenAPI

AWS API Gateway 集成使得使用符合 OpenAPI 标准的 Lambda Function 轻松实现 REST API。 关于开放API 它是一个 允许以标准方式描述 REST API 的规范。 OpenAPI规范 (OAS) 为 REST API 定义了与编程语言无关的标准接口描述。这使得人类和计算机都可以发现和理解服务的功能&am…

HTML5基础

1、HTML5概述 2014年10月28日&#xff0c;W3C&#xff08;world wide web consortium&#xff0c;万维网联盟&#xff09;的HTML工作组发布了HTML5的正式推荐标准。HTML5作为构建开放Web平台的核心&#xff0c;增加了支持Web应用的许多新特性&#xff0c;以及更符合开发者使用…

git 使用远端代码强制覆盖本地

有时候会遇到这种情景&#xff0c;我们本地的代码不需要了&#xff0c;需要使用远端的代码强制覆盖&#xff0c;这时候可以使用下面的命令 git fetch --all然后再执行下面的命令&#xff0c;重置为远端的代码&#xff0c;即使用远端的代码将本地覆盖 origin/远端分之名 git re…