加载动画效果

写在前面

在无限的时间的河流里,人生仅仅是微小又微小的波浪。——郭小川

实现效果

实现原理

  1. 通过2个伪元素来设置3条颜色边框
  2. 通过定位将3个圆弧边框层叠再一起，再通过旋转实现一个圆的效果
  3. 再给loading添加旋转动画即可
  4. 要实现文字转动的效果，只需让其反向旋转即可

实现代码

HTML
<div class="loading">

    <span>loading...</span>

</div>
CSS
@keyframes rotate {

    100%{

        transform: rotateZ(360deg);

    }

}

@keyframes rotate_ni {

    100%{

        transform: rotateZ(-360deg);

    }

}

body {

    margin: 0;

    padding: 0;

    background-color: black;

}

.loading {

    position: relative;

    width: 200px;

    height: 200px;

    box-sizing: border-box;

    border-radius: 50%;

    border-top: 10px solid #74b9ff;

    animation: rotate 2s linear infinite;

    margin: 100px auto;

}

.loading::before,.loading::after {

    content: '';

    width: 200px;

    height: 200px;

    position: absolute;

    left: 0;

    top: -10px;

    box-sizing: border-box;

    border-radius: 50%;

}

.loading::before {

    border-top: 10px solid #a29bfe;

    transform: rotate(120deg);

}

.loading::after {

    border-top: 10px solid #55efc4 ;

    transform: rotate(240deg);

}

span {

    position: absolute;

    color: snow;

    width: 200px;

    height: 200px;

    text-align: center;

    line-height: 200px;

    animation: rotate_ni 2s linear infinite;

}
完整代码
<!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>

    <style>

        @keyframes rotate {

            100%{

                transform: rotateZ(360deg);

            }

        }

        @keyframes rotate_ni {

            100%{

                transform: rotateZ(-360deg);

            }

        }

        body {

            margin: 0;

            padding: 0;

            background-color: black;

        }

        .loading {

            position: relative;

            width: 200px;

            height: 200px;

            box-sizing: border-box;

            border-radius: 50%;

            border-top: 10px solid #74b9ff;

            animation: rotate 2s linear infinite;

            margin: 100px auto;

        }

        .loading::before,.loading::after {

            content: '';

            width: 200px;

            height: 200px;

            position: absolute;

            left: 0;

            top: -10px;

            box-sizing: border-box;

            border-radius: 50%;

        }

        .loading::before {

            border-top: 10px solid #a29bfe;

            transform: rotate(120deg);

        }

        .loading::after {

            border-top: 10px solid #55efc4 ;

            transform: rotate(240deg);

        }

        span {

            position: absolute;

            color: snow;

            width: 200px;

            height: 200px;

            text-align: center;

            line-height: 200px;

            animation: rotate_ni 2s linear infinite;

        }

    </style>

</head>

<body>

        <div class="loading">

            <span>loading...</span>

        </div>

</body>

</html>

本次的分享就到这里结束啦！

加载动画效果 HTML+ CSS的更多相关文章

  1. CSS3实现的图片加载动画效果

    来源:GBin1.com 使用CSS3实现的不同图片加载动画效果,支持响应式,非常适合针对瀑布流布局图片动态加载特效进行增强! HTML <ul class="grid effect- ...

  2. CSS动画实例：Loading加载动画效果（一）

    一些网站或者APP在加载新东西的时候,往往会给出一个好看有趣的Loading图,大部分的Loading样式都可以使用CSS3制作出来,它不仅比直接使用gif图简单方便,还能节省加载时间和空间.下面介绍 ...

  3. CSS动画实例：Loading加载动画效果（三）

    3．小圆型Loading 这类Loading动画的基本思想是:在呈现容器中定义1个或多个子层,再对每个子层进行样式定义,使得其均显示为一个实心圆形,最后编写关键帧动画控制,使得各个实心圆或者大小发生改 ...

  4. ios 自定义加载动画效果

    在开发过程中,可能会遇到各种不同的场景需要等待加载成功后才能显示数据.以下是自定义的一个动画加载view效果.      在UIViewController的中加载等到效果,如下 - (void)vi ...

  5. css加载动画（纯css和html）

    从jq官网上摘抄下来的一个简单加载动画,个人比较喜欢使用~存在这里,作为记录 话不多说~上代码 <!DOCTYPE html> <html lang="en"&g ...

  6. css3 加载动画效果

    Loading 动画效果一           HTML 代码: <div class="spinner"> <div class="rect1&quo ...

  7. loading加载动画效果js实现

    <style>.box { width: 400px; padding: 20px; border: 40px solid #a0b3d6; background-color: #eee; ...

  8. iOS - 落叶加载动画效果

    代码下载地址:https://github.com/nLoser/LeafLoadingView 效果: 说明:效果是在网上看到的,并且自己按照效果自己实现,树叶使用CAEmitterLayer做的, ...

  9. HTML 页面加载动画效果

    浏览器:Chrome, IE <!doctype html> <html> <head> <title>CSS transform: CSS only ...

随机推荐

  1. manjaro配置攻略

    2021.1.30 更新 1 概述 本文主要讲述了新安装的Manjaro一些常用的配置,包括源.常用软件.快捷键.终端以及一些效率工具的配置. 2 pacman源 首先是pacman源的选择: sud ...

  2. java 用枚举替换多if-else

    1.定义抽象类 package com.polaris.design; /** * @author :shi * @date :Created in 2020/8/18 20:15 * @descri ...

  3. 死磕Spring之AOP篇 - Spring AOP注解驱动与XML配置

    该系列文章是本人在学习 Spring 的过程中总结下来的,里面涉及到相关源码,可能对读者不太友好,请结合我的源码注释 Spring 源码分析 GitHub 地址 进行阅读. Spring 版本:5.1 ...

  4. Spring Cloud & Alibaba 实战 | 第十二篇： 微服务整合Sentinel的流控、熔断降级，赋能拥有降级功能的Feign新技能熔断，实现熔断降级双剑合璧（JMeter模拟测试）

    目录 一. Sentinel概念 1. 什么是Sentinel? 2. Sentinel功能特性 3. Sentinel VS Hystrix 二. Docker部署Sentinel Dashboar ...

  5. php正则表达式过滤空格 换行符 回车

    我整理了几个比较适合的实例了,对于它们我们是有很多站长都测试过并用过了,不过文章最后我的总结也是生重要的哦,至于原因我也说不上了,因为chr是ascii编码了所以有时浏览器会自动转成ascii,特别像 ...

  6. 【VsCode】常用的快捷键

    查找和替换: 查找:Ctrl +F 查找和替换:Ctrl +H编辑器和窗口管理相关快捷键: 文件之间切换:Ctrl+Tab 关闭当前窗口:Ctrl+W /Ctrl +F4 切出一个新的编辑器窗口(最多 ...

  7. Windows中的共享文件和文件服务器

    目录 共享文件的设置 默认共享 关闭默认共享 关闭共享服务 共享文件夹权限 文件服务器资源管理器的搭建 文件共享是指主动地在网络上共享自己的计算机文件.一般文件共享使用P2P模式,文件本身存在用户本人 ...

  8. Windows PE 第十二章 PE变形技术

    PE变形技术 这章东西太多,太细了.这里我只记录了一些重点概念.为后面学习做铺垫. PE变形:改变PE结构之后,PE加载器依然可以成功加载运行我们的程序. 一 变形常用技术: 结构重叠技术.空间调整技 ...

  9. Linux基本内容

    当你学会开发完成一个项目之后,你就可以将项目进行上线,而且其实并不难,你需要先对Linux操作系统了解一下,博客下面的内容是基于CentOs7服务器. 购买服务器 参考链接 Linux宝塔面板 Lin ...

  10. 一款好用的数据血缘关系在线工具--SQLFlow

      l  数据血缘关系(data lineage) 数据血缘属于数据治理中的一个概念,是在数据溯源的过程中找到相关数据之间的联系,它是一个逻辑概念.数据治理中经常提到血缘分析,血缘分析是保证数据融合的 ...