HTMLCSS: 打造跳一跳加载器,点燃用户等待热情

效果演示

这段 HTML 代码创建了一个简单的网页,其中包含一个动画效果,用来模拟一个加载器loading

HTML

 <div class="loader"></div>
  • div创建了一个动画效果的加载器

CSS

html, body {width: 100vw;height: 100vh;display: flex;justify-content: center;align-items: center;margin: 0;overflow: hidden;background: #212121;
}.loader {position: relative;width: 120px;height: 90px;margin: 0 auto;
}.loader:before {content: "";position: absolute;bottom: 30px;left: 50px;height: 30px;width: 30px;border-radius: 50%;background: #2a9d8f;animation: loading-bounce 0.5s ease-in-out infinite alternate;
}.loader:after {content: "";position: absolute;right: 0;top: 0;height: 7px;width: 45px;border-radius: 4px;box-shadow: 0 5px 0 #f2f2f2, -35px 50px 0 #f2f2f2, -70px 95px 0 #f2f2f2;animation: loading-step 1s ease-in-out infinite;
}@keyframes loading-bounce {0% {transform: scale(1, 0.7);}40% {transform: scale(0.8, 1.2);}60% {transform: scale(1, 1);}100% {bottom: 140px;}
}@keyframes loading-step {0% {box-shadow: 0 10px 0 rgba(0, 0, 0, 0),0 10px 0 #f2f2f2,-35px 50px 0 #f2f2f2,-70px 90px 0 #f2f2f2;}100% {box-shadow: 0 10px 0 #f2f2f2,-35px 50px 0 #f2f2f2,-70px 90px 0 #f2f2f2,-70px 90px 0 rgba(0, 0, 0, 0);}
}
html, body:
  • width: 100vw: 宽度设置为视口宽度的100%。
  • height: 100vh: 高度设置为视口高度的100%。
  • display: flex: 使用 Flexbox 布局。
  • justify-content: center: 水平居中。
  • align-items: center: 垂直居中。
  • margin: 0: 移除外边距。
  • overflow: hidden: 隐藏溢出的内容。
  • background: #212121: 设置背景颜色为深灰色。
.loader: 定义加载器的样式。
  • position: relative: 相对定位。
  • width: 120px: 宽度为120像素。
  • height: 90px: 高度为90像素。
  • margin: 0 auto: 将加载器居中显示。
.loader:before: 创建圆点。
  • content: “”: 伪元素的内容为空。
  • position: absolute: 绝对定位。
  • bottom: 30px: 距离底部30像素。
  • left: 50px: 距离左边50像素。
  • height: 30px: 高度为30像素。
  • width: 30px: 宽度为30像素。
  • border-radius: 50%: 圆形。
  • background: #2a9d8f: 背景颜色为绿色。
  • animation: loading-bounce 0.5s ease-in-out infinite alternate: 应用动画效果。
.loader:after: 创建加载器阴影。
  • content: “”: 伪元素的内容为空。
  • position: absolute: 绝对定位。
  • right: 0: 靠右对齐。
  • top: 0: 顶部对齐。
  • height: 7px: 高度为7像素。
  • width: 45px: 宽度为45像素。
  • border-radius: 4px: 圆角。
  • box-shadow: 创建多个阴影效果,模拟加载器的动画效果。
  • animation: loading-step 1s ease-in-out infinite: 应用动画效果。
动画
  • @keyframes loading-bounce: 定义一个名为 loading-bounce 的关键帧动画,用于模拟弹跳效果。
  • @keyframes loading-step: 定义一个名为 loading-step 的关键帧动画,用于模拟加载器的步进效果。

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

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

相关文章

Nginx 的 Http 模块介绍(上)

Nginx 的 Http 模块介绍&#xff08;上&#xff09; 1. http 请求 11 个处理阶段介绍 Nginx 将一个 Http 请求分成多个阶段&#xff0c;以模块为单位进行处理。其将 Http请求的处理过程分成了 11 个阶段&#xff0c;各个阶段可以包含任意多个 Http 的模块并以流水线的方式处理…

网络:ARP的具体过程和ARP欺骗

个人主页 &#xff1a; 个人主页 个人专栏 &#xff1a; 《数据结构》 《C语言》《C》《Linux》《网络》 《redis学习笔记》 文章目录 前言ARP具体过程ARP欺骗原理总结 前言 本文仅作为ARP具体过程和ARP欺骗的知识总结 硬件类型 &#xff1a;指定发送和接受ARP包的硬件类型&am…

青少年编程与数学 02-003 Go语言网络编程 05课题、DNS

青少年编程与数学 02-003 Go语言网络编程 05课题、DNS 课题摘要:一、DNS二、DNS的主要特点三、DNS的工作原理四、DNS的应用场景包括五、DNS服务器DNS服务器的主要功能&#xff1a;DNS服务器的类型&#xff1a;DNS服务器的工作原理&#xff1a; 六、DNS服务商七、互联网接入1. 注…

Python数据分析入门知识基础和案例(万字长文)

目录 数据分析的重要性 Python数据分析工具链 NumPy数组操作 Pandas数据结构与操作 DataFrame操作 Series操作 数据转换 数据清洗 数据分析案例 数据读取与预处理 数据分析 结果展示 Matplotlib基础绘图 线图 柱状图 散点图 PyEcharts交互式图表 可视化案例展…

[0260].第25节:锁的不同角度分类

MySQL学习大纲 我的数据库学习大纲 从不同维度对锁的分类&#xff1a; 1.对数据操作的类型划分:读锁和写锁 1.1.读锁 与 写锁概述&#xff1a; 1.对于数据库中并发事务的读-读情况并不会引起什么问题。对于写-写、读-写或写-读这些情况可能会引起一些问题&#xff0c;需要使用…

加强版 第五节图像处理与视频分析

基本概念 图像轮廓 主要针对二值图像&#xff0c;轮廓是一系列点 vector<vector<Point>xxx用于存储多个点 vector<Vec4i>xxx包含四个整数&#xff0c;分别代表下一个轮廓的索引&#xff0c;上一个轮廓的索引&#xff0c;一个子轮廓的索引和父轮廓的索引 相…

网络基础知识概览

1、简单描述“统一资源标识符URI”和“统一资源定位器URL”的定义&#xff1a; - **统一资源标识符&#xff08;URI&#xff09;**&#xff1a;URI是Uniform Resource Identifier的缩写&#xff0c;它是一种用于标识资源的字符串。资源可以是网页、文档、图片等互联网上的任何…

数据结构之链式结构二叉树的实现(初级版)

本文内容将主会多次用到函数递归知识&#xff01;&#xff01;&#xff01; 本节内容需要借助画图才能更好理解&#xff01;&#xff01;&#xff01; 和往常一样&#xff0c;还是创建三个文件 这是tree.h #pragma once #include<stdio.h> #include<stdlib.h> …

Data+AI━━人群圈选,你被圈中了吗?

DataAI━━人群圈选&#xff0c;你被圈中了吗&#xff1f; 前言我们是否正在失去选择的自主权&#xff1f;AI人群圈选流程AI人群圈选技术发展趋势 前言 智能时代的清晨&#xff0c;打开手机&#xff0c;各类APP精准推送的信息扑面而来。菜市场买过一次三文鱼&#xff0c;生鲜A…

IT基础监控的全面解决方案

在信息化高速发展的今天&#xff0c;企业的IT基础设施如同生命线&#xff0c;承载着业务运营的核心数据和流程。为了确保这些基础设施的稳定运行和高效性能&#xff0c;全面的IT基础监控变得至关重要。监控易&#xff0c;作为一款领先的IT监控管理平台&#xff0c;以其广泛的监…

手撕快排的三种方法:让面试官对你刮目相看

快来参与讨论&#x1f4ac;&#xff0c;点赞&#x1f44d;、收藏⭐、分享&#x1f4e4;&#xff0c;共创活力社区。 目录 &#x1f4af;前言 &#x1f4af;快速排序基础概念 &#x1f4af;Hoare 版本 1.算法思路 2.代码示例 3.有关该代码的问题 3.1&#x1f62e;为什么…

51单片机教程(五)- LED灯闪烁

1 项目分析 让输入/输出口的P1.0或P1.0~P1.7连接的LED灯闪烁。 2 技术准备 1、C语言知识点 1 运算符 1 算术运算符 #include <stdio.h>int main(){// 算术运算符int a 13;int b 6;printf("%d\n", ab); printf("%d\n", a-b); printf("%…

2022 NOIP 题解

建造军营 这道题之前做过一次,我们来转换一下这道题的题意&#xff0c;题中给到了边、点我们可以想到强连通分量&#xff0c;进而想到tarjan算法。通过所给样例及题意&#xff0c;我们可以将原题目转化为以下内容&#xff1a; 给定一张图&#xff0c;选择一些点和边&#xff…

ceph补充介绍

SDS-ceph ceph介绍 crushmap 1、crush算法通过计算数据存储位置来确定如何存储和检索&#xff0c;授权客户端直接连接osd 2、对象通过算法被切分成数据片&#xff0c;分布在不同的osd上 3、提供很多种的bucket&#xff0c;最小的节点是osd # 结构 osd (or device) host #主…

集成ruoyi-it管理系统,遇到代码Bug

前言&#xff1a;这次ruoyi框架开发it管理系统&#xff0c;出现很多问题&#xff0c;也有学到很多东西&#xff0c;出现几个问题&#xff0c;希望下次项目不会出现或者少出现问题&#xff1b;其中还是有很多基础知识有些忘记&#xff0c;得多多复习 1&#xff1a;当写的代码没…

大模型面试-Layer normalization篇

1. Layer Norm 的计算公式写一下? 2. RMS Norm 的计算公式写一下? 3. RMS Norm 相比于 Layer Norm 有什么特点? 4. Deep Norm 思路? 5. 写一下 Deep Norm 代码实现? 6.Deep Norm 有什么优点? 7.LN 在 LLMs 中的不同位置 有什么区别么?如果有,能介绍一下区别么? 8. LLM…

【Linux第七课--基础IO】内存级文件、重定向、缓冲区、文件系统、动态库静态库

目录 引入内存级文件重新使用C文件接口 -- 对比重定向写文件读文件文件流 认识文件操作的系统接口open参数 -- flagflag的内容宏的传参方式 open关闭文件写文件读文件结论 引入文件描述符fd、对文件的理解理解一切皆文件方法集文件fd的分配规则 重定向代码的重定向输入重定向输…

手写实现call,apply,和bind方法

手写实现call&#xff0c;apply和bind方法 call&#xff0c;apply和bind方法均是改变this指向的硬绑定方法&#xff0c;要想手写实现此三方法&#xff0c;都要用到一个知识点&#xff0c;即对象调用函数时&#xff0c;this会指向这个对象&#xff08;谁调用this就指向谁&#…

Redis全系列学习基础篇之位图(bitmap)常用命令的解析

文章目录 描述常用命令及解析常用命令解析 应用场景统计不确定时间周期内用户登录情况思路分析实现 统计某一特定时间内活跃用户(登录一次即算活跃)的数量思路分析与实现 描述 bitmap是redis封装的用于针对位(bit)的操作,其特点是计算效率高&#xff0c;占用空间少,常被用来统计…

Java | Leetcode Java题解之第518题零钱兑换II

题目&#xff1a; 题解&#xff1a; class Solution {public int change(int amount, int[] coins) {int[] dp new int[amount 1];boolean[] valid new boolean[amount 1];dp[0] 1;valid[0] true;for (int coin : coins) {for (int i coin; i < amount; i) {valid[i…