加载动画效果

写在前面

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

实现效果

实现原理

  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. show engine innodb status 输出结果解读

    show engine innodb status 输出结果解读 基于MySQL 5.7.32 最近想整理一下show engine innodb status的解读,但是发现中文互联网上相关的信息要 ...

  2. 测试报告模板：HTMLTestRunner.py（新版）

    报告样式效果: 报告源码:HTMLTestRunner.py 1 """ 2 A TestRunner for use with the Python unit test ...

  3. 幻读：听说有人认为我是被MVCC干掉的

    @ 目录 前言 系列文章 一.我是谁? 二.为什么有人会认为我是被MVCC干掉的 三.我真的是被MVCC解决的? 四.再聊当前读.快照读 当前读 快照读 五.告诉你们吧!当前读的情况下我是被next- ...

  4. 2021软工-CSDN APP分析

    项目 内容 这个作业属于哪个课程 2021春季计算机学院软件工程(罗杰 任健) 这个作业的要求在哪里 案例分析作业要求 我在这个课程的目标是 提升软件开发能力,提高团队协作能力 这个作业在哪个具体方面 ...

  5. 1037 Magic Coupon

    The magic shop in Mars is offering some magic coupons. Each coupon has an integer N printed on it, m ...

  6. hdu3715 二分+2sat+建图

    题意:       给你一个递归公式,每多一层就多一个限制,问你最多能递归多少层. 思路:      先分析每一层的限制 x[a[i]] + x[b[i]] != c[i],这里面x[] = 0,1, ...

  7. PAT 乙级 -- 1010 -- 一元多项式求导

    题目简述 设计函数求一元多项式的导数.(注:xn(n为整数)的一阶导数为n*xn-1.) 输入格式:以指数递降方式输入多项式非零项系数和指数(绝对值均为不超过1000的整数).数字间以空格分隔. 输出 ...

  8. Linux中的SSH服务

    目录 SSH 使用scp在两台Linux间传数据: 基于SSH做远程访问,可以使用ftp服务的相关指令sftp root@192.168.10.10 Openssh公私钥验证: SSH SSH(Sec ...

  9. 通过 Netty、ZooKeeper 手撸一个 RPC 服务

    说明 项目链接 微服务框架都包括什么? 如何实现 RPC 远程调用? 开源 RPC 框架 限定语言 跨语言 RPC 框架 本地 Docker 搭建 ZooKeeper 下载镜像 启动容器 查看容器日志 ...

  10. 深入探索Android热修复技术原理读书笔记 —— 代码热修复技术

    在前一篇文章 深入探索Android热修复技术原理读书笔记 -- 热修复技术介绍中,对热修复技术进行了介绍,下面将详细介绍其中的代码修复技术. 1 底层热替换原理 在各种 Android 热修复方案中 ...