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…

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

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

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

快来参与讨论&#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("%…

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…

Java的包、final关键字以及代码块

Java的包、final关键字以及代码块 一、包 包的作用 &#xff1a; ​ 包就是文件夹&#xff0c;用来管理各种不同功能的Java类 包名的书写规则&#xff1a; ​ 公司域名反写 包的作用&#xff0c;需要全部英文小写&#xff0c;见名知意 什么是全类名&#xff1a; ​ 包名…

【AI视频换脸整合包及教程】AI换脸新星:Rope——让换脸变得如此简单

在数字技术迅猛发展的今天&#xff0c;人工智能&#xff08;AI&#xff09;的应用已经渗透到了我们生活的方方面面&#xff0c;从日常的语音助手到复杂的图像处理&#xff0c;无不体现着AI技术的魅力。特别是在娱乐和创意领域&#xff0c;AI技术更是展现出了惊人的潜力。其中&a…

Ubuntu下安装和配置MySQL5.7教程

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 目录 前言 在ubuntu下安装MySQL数据库 查看操作系统版本 ​编辑 添加 MySQL APT 源 访问下载页面并下载发布包 安装发布包 安装MySQL 查看MySQL状态 开启自启动 登…

Java中常见的异常类型

1、Exception和Error有什么区别&#xff1f; 首先Exception和Error都是继承于Throwable类&#xff0c;在Java中只有Throwable类型的实例才可以被抛出&#xff08;throw&#xff09;或者捕获&#xff08;catch&#xff09;&#xff0c;它是异常处理机制的基本组成类型。 Except…

Unity的gRPC使用之实现客户端

应用背景&#xff1a;本想Unity调用C的dll库获取一些数据资源&#xff0c;但是由于自己调用的C库模块化处理的不太理想&#xff0c;众多dll之间相互依赖&#xff0c;使得在调用dll的时候&#xff0c;会忽略一些dll的缺失&#xff0c;使Unity项目报错&#xff0c;故想到了使用gR…

GPU-主板-内存-硬盘-CPU-电源分类及区别总结大全

一、背景 用了7年的笔记本&#xff0c;现在感觉它实在是扛不住了&#xff0c;中间自己缝缝补补坚持到现在&#xff0c;把机械硬盘换成了固态&#xff0c;加装了内存条。换过2次还是3次风扇&#xff08;不知道为啥坏的&#xff0c;高转速时哧哧响&#xff09;&#xff0c;换过一…