程序员经验分享-hwhale

web前端——CSS实现加载页面效果

2023-05-16

先上图:彩虹滑稽:
css加载动画

html代码 

<div class="container">
  <div class="trans">
  	<span>加载中...</span>
  </div>
</div>

其中container是背景，trans是加载是旋转的正方形

CSS基本样式 

* {
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;
    height: 100vh;
}

.container {
    position: relative;
    width: 100%;
    height: 100vh;
    /* 设置弹性盒模型 */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #37474F;
}

.trans {
    position: absolute;
    width: 120px;
    height: 120px;
    /* 设置弹性盒模型 */
    display: flex;
    justify-content: center;
    align-items: center;
    background: #37474F;
}

span {
    position: absolute;
    color: #fff;
    z-index: 1;
}

实现后的效果:
在这里插入图片描述

实现旋转框样式 

.trans::after {
    content: "";
    position: absolute;
    width: 115px;
    height: 115px;
    background: #37474F;
    /* 添加边框 */
    border: 4px solid #3ff9dc;
    /* 初始化位置 */
    transform: rotate(45deg);
    /* 添加动画、动画时间和样式 */
    animation: rotate1 3s ease-in-out infinite alternate;
}

.trans::before {
    content: "";
    position: absolute;
    width: 115px;
    height: 115px;
    /* 添加边框 */
    border: 4px solid #ffab91;
    /* 初始化位置 */
    transform: rotate(-90deg);
    /* 添加动画、动画时间和样式 */
    animation: rotate2 3s ease-in-out infinite alternate;
}

实现后的效果:
在这里插入图片描述

添加旋转动画 

@keyframes rotate1 {
    0% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(-90deg);
    }
    50% {
        transform: rotate(-180deg);
    }
    75% {
        transform: rotate(-270deg);
    }
    100% {
        transform: rotate(-360deg);
    }
}

@keyframes rotate2 {
    0% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(90deg);
    }
    50% {
        transform: rotate(180deg);
    }
    75% {
        transform: rotate(270deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

最终效果:Loading animation

整体代码

html文件：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>加载动画</title>
</head>

<body>
    <div class="container">
        <div class="trans">
            <span>加载中...</span>
        </div>
    </div>
</body>

</html>

CSS文件：

* {
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;
    height: 100vh;
}

.container {
    position: relative;
    width: 100%;
    height: 100vh;
    /* 设置浮动 */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #37474F;
}

.trans {
    position: absolute;
    width: 120px;
    height: 120px;
    /* 设置浮动 */
    display: flex;
    justify-content: center;
    align-items: center;
    background: #37474F;
}

span {
    position: absolute;
    color: #fff;
    z-index: 1;
}

.trans::after {
    content: "";
    position: absolute;
    width: 115px;
    height: 115px;
    background: #37474F;
    /* 添加边框 */
    border: 4px solid #3ff9dc;
    /* 初始化位置 */
    transform: rotate(45deg);
    /* 添加动画、动画时间和样式 */
    animation: rotate1 3s ease-in-out infinite alternate;
}

.trans::before {
    content: "";
    position: absolute;
    width: 115px;
    height: 115px;
    /* 添加边框 */
    border: 4px solid #ffab91;
    /* 初始化位置 */
    transform: rotate(-90deg);
    /* 添加动画、动画时间和样式 */
    animation: rotate2 3s ease-in-out infinite alternate;
}

@keyframes rotate1 {
    0% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(-90deg);
    }
    50% {
        transform: rotate(-180deg);
    }
    75% {
        transform: rotate(-270deg);
    }
    100% {
        transform: rotate(-360deg);
    }
}

@keyframes rotate2 {
    0% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(90deg);
    }
    50% {
        transform: rotate(180deg);
    }
    75% {
        transform: rotate(270deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

web前端——CSS实现加载页面效果 的相关文章

  • linux内核2.6.16版本启动分析(1)

    电脑的启动流程详见这篇博文电脑开机过程 简述一下就是按下电源键后 cs ip置位到0xffff0的位置 而这个位置是固化的 上面都刻录好了BIOS程序 BIOS执行基本的硬件自检以及建立中断向量表 初始化BIOS中断等 接下来会把第一块磁盘

  • linux内核目录分析

    最近准备开始研读linux的内核了 今天在deepin内核版本为4 8 15上编译安装了内核4 19 6 本来是先装2 6 16版本的 但2 6 16版本的内核版本要求gcc的版本为4 6之下 装4 6版本的gcc的时候出了点问题 还没解决

  • AT&T语法

    在linux内核编写中 为了维持与gcc输出汇编程序的兼容性 as汇编器使用AT amp T系统的V的汇编语法 下面简称为AT amp T语法 这种语法与Intel汇编程序使用的语法 简称Intel语法 很不一样 他们之间的主要区别有以下几

  • eBPF入门

    BPF和eBPF是什么 简单来说 BPF提供了一种在和各种内核和应用程序事件发生时运行一段小程序的机制 BPF是一项灵活而高效的技术 由指令集 存储对象和辅助函数等几部分组成 由于它采用了虚拟指令集规范 因此也可将它视作一种虚拟机的实现 这

  • make详解

    Make 1 学习make的必要性 在Linux中 有一个用来维护程序模块关系和生成可执行程序的工具 xff0d make 他可以根据程序模块的修改情况重新编译链接生成中间代码或最终的可执行程序 执行make 命令 xff0c 需要一个名为

  • Linux：网络编程——UDP代码及其封装

    Linux xff1a 网络编程 UDP代码及其封装 UDP代码封装UDP 前面我们了解了 UDP的编程步骤为 xff1a 客户端 xff1a 创建套接字 接收消息 发送消息 接收消息 服务端 xff1a 创建套接字 绑定地址信息 接收消息

  • 卷积神经网络CNN笔记（Tensorflow）

    卷积神经网络学习笔记 一 卷积神经网络相关定义二 基本步骤三 数据增强1 基本原理2 keras实现3 卷积神经网络中的应用 四 常用代码五 实验代码六 使用预训练的卷积神经网络结语 一 卷积神经网络相关定义 卷积层 xff08 Convo

  • 基于GTSRB数据集的交通标志识别实验（Tensorflow）

    基于GTSRB的交通标志识别实验 一 数据数据读取 二 搭建网络三 模型预测四 附录模块导入Code 结语 一 数据 官网下载太慢 xff0c 然后我找到了一个整理好的数据集 链接 GTSRB 德国交通标志识别图像数据 数据集很干净 xff

  • 贝叶斯分类器原理——学习笔记

    贝叶斯分类器原理 简介一 逆概率推理与贝叶斯公式1 确定性推理与概率推理2 贝叶斯公式 二 贝叶斯分类的原理三 概率估计1 先验概率的估计2 类条件概率的估计 四 贝叶斯分类的错误率五 常用贝叶斯分类器1 最小错误率贝叶斯分类器2 最小风险

  • python format

    str format 基本语法是通过 和 来代替以前的 位置 format 函数可以接受不限个参数 xff0c 位置可以不按顺序 gt gt gt span class token string 34 34 span span class

  • 钢材表面缺陷检测分类不同图像增强方式的对比研究

    带钢表面缺陷检测分类不同图像增强方式的对比研究 1 直接使用图像数据进行深度学习2 图像增强图像分析形态学top hat变换图像锐化 3 图像增强后的深度学习总结 基于钢材表面缺陷库进行多种缺陷检测分类实验 xff0c 对比分析了使用卷积神

  • YOLO系列论文精读

    YOLO系列论文精读 YOLOV11 xff09 实现2 xff09 详细解读总结 YOLOV2 90001 xff09 Better xff1a 2 xff09 Faster xff1a 3 xff09 Stronger xff1a 总结

  • Git使用技巧

    Git使用技巧 基本操作 1 版本控制 版本控制 xff1a 进入文件夹 xff0c 右键点git bash here初始化 xff0c 输入git init管理 xff0c git add 文件名生成版本 xff0c git commit

  • Aruco检测Marker原理及代码详解（c++）

    Aruco检测Marker原理及代码详解 xff08 c 43 43 xff09 detectmarker主要流程 这个函数写在aruco cpp里 detectMarkers convertToGrey detectCandidates

  • pytorch学习

    Pytorch学习 一些简单记录 一 基本语法 1 Tensor 创建Tensor xff1a 创建未初始化矩阵 x 61 torch empty 5 3 创建零初始化矩阵 x 61 torch zeros 5 3 dtype 61 tor

  • 卡尔曼滤波及数据融合：PX4-EKF源码分析

    卡尔曼滤波及数据融合 xff1a PX4 EKF源码分析 卡尔曼滤波PX4 EKF predictState 状态预测L 259calculateOutputStates xff1a L 323存进Buffer的内容 xff1a 修正算法

  • Ubuntu18.04安装Gazebo并与ROS连接

    Ubuntu18 04安装Gazebo并与ROS连接 Gazebo安装Gazebo与ROS连接 Gazebo安装 注意 xff1a Ubuntu18 04需要下载Gazebo9这个版本 xff0c Gazebo的版本不要弄错 如果已经下载了

  • Tiva C(TM4C)的bootloader和启动过程与stm32对比

    gossip 最近在咸鱼捡了个123GXL的板子 xff0c 板子没到就先装好了环境 xff0c 然后看了看资料 xff0c 前天板子到了 xff0c 先点了个灯 xff0c 然后把板子扔到一边又继续看资料去了emmm 看资料的时候发现有些

  • 科学计数法e/E?计算机?表示？

    计算机表达10的幂是一般是用E或e xff0c 即 1 03乘10的9次方 xff0c 可简写为 1 03E 43 09 的形式 1 03乘10的9次方 xff0c 可简写为 1 03E 43 09 的形式 1 03乘10的 9次方 xff

  • vscode - 添加新项目到远程仓库(gitee)

    本篇文章介绍使用VScode 把新的项目推送到远程仓库的操作 前提 xff1a 1 xff0c 一个新的项目 xff08 我这里用的是vue的项目 xff09 2 xff0c 一个新的远程仓库 xff08 我这里用的是Gitee xff09

随机推荐

  • vscode跳转返回快捷键

    windows系统 Alt 43 navigate back Alt 43 navigate forward Mac系统 Ctrl navigate back Ctrl 43 Shift navigate forward On Ubuntu

  • Windows和Linux之间如何传递数据|两台Linux之间如何传递数据

    摘要 xff1a 我们租用了一台服务器 xff0c 然后我们想要把我们写的项目上传到自己的Linux服务器中 xff0c 那么我们应该怎么上传呢 xff1f 如果我们想要从服务器中下载一些资料 xff0c 那么又该如何进行呢 xff1f 看

  • 【C++】多态及原理

    多态及原理 一 多态的实现1 多态的概念2 构成多态还有两个条件 xff1a 3 虚函数4 override和final关键字 二 抽象类三 多态的原理 一 多态的实现 1 多态的概念 多态是在不同继承关系的类对象 xff0c 去调用同一函

  • 【排序算法】桶排序算法原理

    桶排序 条件适用场景算法描述算法实现 桶排序又叫箱排序 xff0c 是计数排序的升级版 xff0c 它的工作原理是将数组分到有限数量的桶子里 xff0c 然后对每个桶子再分别排序 xff08 有可能再使用别的排序算法或是以递归方式继续使用桶

  • FreeRTOS（二）创建任务

    任务 一 任务的基本概念 FreeRTOS的任务可以认为是一系列独立的任务的集合 每个任务在自己的环境中运行 xff0c 并且每个时刻只有一个任务在运行 xff0c 但从宏观上看 xff0c 所有的任务都在同时执行 xff1b 不同任务的切

  • FreeRTOS（三）启动流程

    启动流程 FreeRTOS的主要两种启动流程 在 main 函数中将硬件初始化 xff0c RTOS 系统初始化 xff0c 所有任务的创建这些都弄好 最后启动 RTOS 的调度器 xff0c 开始多任务的调度 xff08 先创建 xff0

  • echarts参数详细介绍

    文章目录 title xff1a 标题grid配置项 xff1a 图标离容器的距离tootip xff1a 提示xAxis xff1a x轴yAxis xff1a y轴legend xff1a 图表旁边的文字series xff1a dat

  • 微信云开发报错（Error: ResourceNotFound.FunctionName, FunctionName 指定的资源不存在。 (9f4aff33-7528-43e2-b0db-d273d）

    在微信小程序云开发时 xff0c 上传login的时候报错 Error ResourceNotFound FunctionName FunctionName 指定的资源不存在 9f4aff33 7528 43e2 b0db d273d0d6

  • 在阿里云搭建CENTOS7系统以及图形界面

    1 搭建CentOS7操作系统服务器 首先要购买服务器 xff0c 推荐学生认证可以获得好几个月的免费服务器 略去具体的过程 阿里云默认的系统不是CentOS7 xff0c 所以需要先将操作系统改成CentOS7 在实例的基本信息中 xff

  • VSCode 配置git 环境

    VSCode 配置git 环境 安装插件 查询Git 安装路径 配置json 文件 安装插件 git history 打开 git bash 下面展示一些 内联代码片 查询git 路径 where git where git 配置json

  • 模拟实现trim 方法，去除字符串两端的空格

    思路 从字符串的两端分别遍历 xff0c 找寻第一个非空字符记录非空字符的索引截取头部第一个非空字符到尾部第一个非空字符串之间的内容 span class token keyword function span span class tok

  • git token使用

    2021年8月13日 xff0c git不再支持密码方式验证 xff0c 而是建议使用token token生成 个人设置 gt Settings gt Personal access tokens gt Generate new toke

  • 网页实现无插件RTSP 摄像头在线播放

    网页无插件RTSP 摄像头在线播放 为什么要求无插件1 xff0c flv js实现2 xff0c flv js的利弊延迟吃资源对网络要求高流可复用对声音处理比较麻烦 3 xff0c webrtc的利弊网络相关的资料少延迟低不吃资源 总结项

  • 计算机嵌入式开发技术考试错题集

    选择题 xff08 以前写的 xff0c 现在翻到了发出来 xff09 1 UTF 16采用的是双字节可变长编码 2 ARM处理器的7种类型的异常中 xff1a 最高的是 复位 xff1b 最低的是 未定义指令UND 和 软件中断SWI x

  • ROS——TF介绍及应用

    TF 的简单介绍 TF xff08 transform xff09 是一个允许用户时刻跟踪多个坐标架构的包 xff0c 能及时地维持树结构中坐标帧之间的关系 xff0c 并允许用户在任何时间点变化任何两个坐标帧之间的点和变量等 目前 TF

  • 计算机保研复习专业课篇（408+数学+部分专业课）

    1 计组 1 xff09 总线是什么 1 xff09 总线是一组能功能部件之间分时共享的公共信息传送线路 分时 共享是它的两大特点 2 xff09 分时是指同一时刻只能有一个部件向总线上发出信息 3 xff09 总线分为三大类 xff1a

  • STM32 四轴无人机的设计——代码整体设计

    1 前言 从现在开始我们要接触一个完整的工程 xff0c 所以我们要对整个工程进行分析 xff0c 将硬件设计 软件设计模块化 xff0c 一个模块一个模块的完成 xff0c 最后将各个模块融合在一起 xff0c 就是我们整个工程 模块化设

  • STM32-串口通信详解

    目录 前言 一 通信接口背景知识 1 并行通信和串行通信 2 串行通信的分类 二 STM32的串口通信基础 1 串口通信接口 2 串口通信框图 3 串口通信相关寄存器 4 波特率计算方法 三 库函数配置 1 串口配置一般步骤 总结 前言 众

  • 嵌入式裸机按键和CPU的中断系统学习笔记

    准备工作 一 按键介绍与硬件连接 按键介绍 按键是常见的外部中断设备 xff0c 类似于我们电路中的开关 一般的按键都有4个引脚 xff0c 这4个引脚成2对 xff1a 其中一对是常开触点 xff08 不按则断开 xff0c 按下则闭合

  • web前端——CSS实现加载页面效果

    先上图 html代码 span class token tag span class token tag span class token punctuation lt span div span span class token attr

热门标签