CSS、JS之多彩球体加载器

于 2024-08-30 14:58:05 发布
阅读量138 收藏 4
点赞数 2
分类专栏： JavaScript CSS 文章标签： css javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhangliwen1101/article/details/141718517
版权

效果演示

图片

 

实现了一个加载动画的效果，包括多个圆形元素和动画效果。每个圆形元素都有一个白色的边框和一个浅灰色的背景色，同时还有一个绿色的填充色。当动画开始时，每个圆形元素的填充色会逐渐变为不同的颜色，同时产生一个闪烁的效果。整个动画的样式采用了阴影、边框、圆角等元素，使得动画看起来更加美观。

Code

HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多彩球体加载器</title>
    <link rel="stylesheet" href="./19-多彩球体加载器.css">
</head>
<body>
    <div class="loader">
        <span style="--i:0;"></span>
        <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>
    </div>
</body>
</html>
CSS
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #eaeef0;
}

.loader {
    display: flex;
}

.loader span {
    position: relative;
    width: 50px;
    height: 50px;
    background-color: #eaeef0;
    margin: 0 10px;
    border-radius: 50%;
    box-shadow: -8px -8px 15px rgba(255, 255, 255, 1),
    8px 8px 15px rgba(0, 0, 0, 0.2),
    inset 3px 3px 5px rgba(0, 0, 0, 0.1),
    inset -1px -1px 5px rgba(255, 255, 255, 1);
    border: 6px solid #eaeef0;
}

.loader span::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: lightseagreen;
    border-radius: 50%;
    box-shadow: inset 3px 3px 5px rgba(0, 0, 0, 0.1),
    inset -1px -1px 5px rgba(255, 255, 255, 1);
    opacity: 0;
    animation: animate 3.5s linear infinite,
    animateColor 5s linear infinite;
    animation-delay: calc(var(--i) * 0.15s);
}

@keyframes animate {
    0%, 9.99%, 70.01% {
        opacity: 0;
    }
    10%, 70% {
        opacity: 1;
    }
}

@keyframes animateColor {
    to {
        filter: hue-rotate(360deg);
    }
}

实现思路拆分

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

这段代码设置了所有元素的外边距和内边距为0，并将盒模型设置为border-box，以避免不同浏览器之间的默认样式差异。

body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #eaeef0;
}

这段代码设置了body元素的高度为100vh，使得页面的高度至少占满整个视口。同时，使用flex布局将页面内容水平和垂直居中，并设置了一个浅灰色的背景色。

.loader {
    display: flex;
}

这段代码设置了一个名为.loader的元素的样式，用于包含多个圆形元素。设置了该元素的display属性为flex，使得其内部的元素可以进行弹性布局。

.loader span {
    position: relative;
    width: 50px;
    height: 50px;
    background-color: #eaeef0;
    margin: 0 10px;
    border-radius: 50%;
    box-shadow: -8px -8px 15px rgba(255, 255, 255, 1),
    8px 8px 15px rgba(0, 0, 0, 0.2),
    inset 3px 3px 5px rgba(0, 0, 0, 0.1),
    inset -1px -1px 5px rgba(255, 255, 255, 1);
    border: 6px solid #eaeef0;
}

这段代码设置了每个圆形元素的样式，包括宽度、高度、背景色、边距、圆角、阴影、边框等样式。其中，box-shadow属性设置了四个阴影，分别为外部的白色和黑色阴影，以及内部的白色和黑色阴影。border属性设置了一个与背景色相同的边框。

.loader span::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: lightseagreen;
    border-radius: 50%;
    box-shadow: inset 3px 3px 5px rgba(0, 0, 0, 0.1),
    inset -1px -1px 5px rgba(255, 255, 255, 1);
    opacity: 0;
    animation: animate 3.5s linear infinite,
    animateColor 5s linear infinite;
    animation-delay: calc(var(--i) * 0.15s);
}

这段代码设置了每个圆形元素的伪元素::before的样式，用于表示圆形元素的填充色。设置了该元素的定位方式、宽度、高度、背景色、圆角、阴影、透明度、动画等样式。其中，animation属性设置了两个动画，分别为animate和animateColor，animation-delay属性根据元素的索引值动态计算，以实现不同元素之间的动画错开效果。

@keyframes animate {
    0%, 9.99%, 70.01% {
        opacity: 0;
    }
    10%, 70% {
        opacity: 1;
    }
}

@keyframes animateColor {
    to {
        filter: hue-rotate(360deg);
    }
}

这段代码设置了两个动画的关键帧。animate动画实现了圆形元素填充色的闪烁效果，通过改变透明度实现。animateColor动画实现了圆形元素填充色的变化效果，通过filter属性的hue-rotate函数实现。

码农园区
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
WordPress加载自定义JS和CSS的经验分享
惠惠软件
12-29 529
【代码】WordPress加载自定义JS和CSS的经验分享。
30个 CSS Javascript 加载器动画效果练习案例
web前端开发
10-25 1241
编辑整理 | 杨小爱在之前的文章中，我也跟大家分享过很多关于加载动画的案例，今天我将再向您分享一些 Loader CSS、Javascript 示例，这些示例均来源于Codepen网站上，...
css和js的加载
qq_43587076的博客
03-16 790
在解析HTML的过程中，遇到需要加载的资源特点如下： CSS资源异步下载，下载和解析都不会阻塞构建dom树<link href='./style.css' > rel='stylesheet'/> JS资源同步下载，下载和执行都会阻塞构建dom树<script src='./index.js'/> 因为这样的特性，往往推荐将CSS样式表放在head头部，js文件放在body尾部，使得渲染能尽早开始。 CSS的加载 上文提到页面渲染是渲染进程的任务，这个渲染进程中又细分为.
使用 HTML、CSS 和 JS 的简单倒数计时器
热门推荐
努力是为了站在万人之中，成为别人的光
09-10 2万+
JavaScript 倒数计时器用于各种电子商务和建设中的网站，以使用户保持最新状态。我们在不同类型的电子商务网站上看到，在任何产品或优惠到达之前的某个时间开始倒计时。 在本文中，我使用简单的 JavaScript 代码创建了一个倒数计时器和你分享。 您可以观看它的现场演示以了解它是如何工作的。如果您知道如何创建数字时钟，那么创建这样的项目就会容易得多。您可以在此处提前安排特定日期或时间。然后，在 JavaScript 代码的帮助下，从那个时间减去当前时间，减法每秒减少一次。 正如您在上图中所看到的，我在这
vue动态加载js和css以及部分页面加载特定的js和css
wm9028的专栏
07-06 8282
# vue动态加载js和css以及部分页面加载特定的js和css vue项目第一次加载很慢的，发现在第一次加载要很大的js导致卡顿、可以使用cdn加速和其他gzip方式效果不是很明显。因此考虑每个页面动态加载js和css的方式来解决。 ## 第一种方式 直接在index.html直接引入js和css > 注意这种方式，第一次加载大量js会很慢、很慢、很慢！ ```html ......
HTML+CSS 多彩球体加载器
正在创作系列：【若冰说CSS】
06-12 1304
实现了一个加载动画的效果，包括多个圆形元素和动画效果。每个圆形元素都有一个白色的边框和一个浅灰色的背景色，同时还有一个绿色的填充色。当动画开始时，每个圆形元素的填充色会逐渐变为不同的颜色，同时产生一个闪烁的效果。整个动画的样式采用了阴影、边框、圆角等元素，使得动画看起来更加美观。
使用javaScript动态加载Js文件和Css文件
01-21
JS动态加载CSS 在可换主题的界面中具有很重要的意义，用户可以根据自己的浏览习惯选择自己喜欢的页面显示方式，下面详细说明。 希望下面的方法对你有帮助。 （1）使用JavaScript动态加载Js文件 /*JavaScript动态...
webpack的CSS加载器的使用
12-13
`css-loader`是Webpack中处理CSS的核心加载器，它允许你在JavaScript中导入CSS，并解决CSS文件中的`@import`和`url()`引用。`css-loader`的工作原理是将CSS文件转换成JavaScript模块，其中的URL会被转换为导入的模块...
css-dot-js-loader:一个Webpack加载器，允许通过JavaScript生成静态CSS代码
05-04
该Webpack加载器允许通过JavaScript生成静态CSS代码。 它是为想要获得JavaScript的所有功能（循环，常规变量，函数等）并使用其生成CSS文件的情况而创建的。 加载程序不会代替CSS预处理程序（例如Sass或PostCSS），...
CSS中禁用DOM事件
bingmoujs的博客
08-26 518
表示元素不应对鼠标事件进行响应。这包括鼠标的点击、悬停和其他鼠标相关的动作。这个属性指定当鼠标指针设备（如鼠标）在元素上时，事件应该有什么表现。
css实现元素居中显示
最新发布
weixin_42812634的博客
08-29 177
css实现元素居中显示 text-align:center; margin-left:auto; margin-right:auto; width:50%; height:100px; line-height:100px; display:flex; justify-content:center; align-items:center; height:200px; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); d
前端面试宝典【CSS篇】【8】
BDawn的专栏
08-26 102
绝对单位 适用于不需要缩放的场合，如打印样式。 相对单位 更适合Web设计，尤其是响应式设计。 vw/vh 适用于基于视口尺寸的布局设计。 em/rem 适用于字体大小相关的布局。
CSS的动画效果
weixin_71949204的博客
08-26 532
3、以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。0% 是动画的开始时间，100% 动画的结束时间。2、创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。在动画过程中，能够多次改变这套 CSS 样式。5、在CSS样式中，用animation属性来应用 @keyframes所定义的动画。语法： 创建动画：@keyframes 调用动画：animation。1、通过 @keyframes(关键帧动画) 规则，您能够创建动画。
CSS 知识点及使用案例
2301_78319341的博客
08-26 613
css快速入门
33.鼠标悬停时的波浪线效果 & CSS 重置
粉丝们务必加入微信粉丝群
08-25 170
通过理解这些原则,你可以创建你自己的重置,完美地适合你的项目的独特需求。这个技巧是 CSS 和 SVG 如何协同工作以创建令人兴奋的视觉效果的一个很好的例子。通过理解这些技术,你可以创建真正独特和吸引人的网页设计,给你的用户留下深刻印象。它避免了许多旧的 CSS 重置的复杂性和过度特异性,而是依靠更现代的浏览器默认值。从其中一些中汲取灵感,这里是我的自以为是的 CSS 重置,以及我选择包含每个规则的原因解释。虽然这可以工作,但它可能会使你的 CSS 难以阅读和维护,特别是如果你有多个这样的效果。
CSS实现水滴效果图
N201871643的博客
08-26 386
水滴效果：指在网页上呈现出水滴从上方滴落的效果，通常伴随着水波纹扩散的动画效果。CSS：层叠样式表（Cascading Style Sheets），是一种用于描述HTML或XML（包括各种XML方言，如SVG、XHTML等）文档呈现的样式语言。
CSS content 属性：伪元素的魔法师
2401_85341950的博客
08-25 486
CSS（层叠样式表）是控制网页样式的强大工具。其中，content属性与伪元素结合使用，能够实现许多创造性的设计效果。伪元素如::before和::after允许我们在选定元素前后插入内容，而content属性则定义了这些内容。本文将详细探讨content属性的用法，包括如何使用它来插入文本、图片、计数器等，并提供丰富的代码示例，以帮助开发者和设计师理解并应用这一功能。在CSS中，伪元素允许我们为元素添加特殊的部分或样式，而不需要修改HTML结构。最常见的伪元素是::before和::after。
CSS 的font-variant属性
读心悦
08-26 527
CSS 属性用于控制小型大写字母（small-caps）的渲染。它主要用于在需要强调文本或改变文本风格时，提供一种视觉上更加优雅的展示方式。然而，需要注意的是，并非所有字体都支持小型大写字母的渲染，这取决于字体的具体设计和支持情况。
Vue 绘制圆形 上下左右
qq_40216244的博客
08-26 262
【代码】Vue 绘制圆形 上下左右。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值