0 0 6 0 - 制作一个加载（Loading）动画 - 0.0

不二如是 · 发表于 2017-3-1 14:35:53

购买主题 已有 12 人购买 本主题需向作者支付 2 鱼币 才能浏览

shishunfu · 发表于 2017-5-10 17:17:13

交作业

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>Loading进度条</title>

        <style type="text/css">
                body{
                        background-color: #000;
                        margin: 100px;
                }
                .load{
                        /*text-indent: -999px;*/
                        font-size: 0;
                        position: relative;
                        width: 202px;
                        height: 202px;
                        box-shadow: inset 0 0 0 12px #6FE;                /*box-shadow 属性向框添加一个或多个阴影。提示：请使用 border-image-* 属性来构造漂亮的可伸缩按钮！*/
                        border-radius: 50%;
                }
                .load::before{
                        position: absolute;
                        content: '';
                        width: 101px;
                        height: 202px;
                        background-color: #000;
                        left: 101px;
                        border-radius: 0 202px 202px 0;
                        animation: loading 2s infinite;
                        transform-origin: 0px 101px;                /*transform-origin 属性允许您改变被转换元素的位置。 2D 转换元素能够改变元素 x 和 y 轴。3D 转换元素还能改变其 Z 轴。*/
                }
                .load::after{
                        position: absolute;
                        content: '';
                        width: 202px;
                        height: 202px;
                        border-radius: 50%;
                        left: 0;
                        box-shadow: inset 0 0 0 12px rgba(255,255,255,.3);
                }
                @keyframes loading {
                        0% {
                                transform: rotate(0deg);
                        }
                        100% {
                                transform: rotate(360deg);
                        }
                }
                .load::before{
                        animation: loading 2s infinite;
                }
                
        </style>
</head>
<body>
        <div class="load">Loading</div>
</body>
</html>

mysoulmq · 发表于 2017-3-2 09:45:06

厉害了~~~~~~~~~~~~~~~~~~~~~~~

不二如是 · 发表于 2017-3-2 09:46:29

mysoulmq 发表于 2017-3-2 09:45
厉害了~~~~~~~~~~~~~~~~~~~~~~~

欢迎～

会魔法的魔法 · 发表于 2017-4-2 11:19:29

前台真是太有趣了

dreamdnj · 发表于 2017-4-25 07:55:59

为啥圆心设置左侧啊

aswyamato1989 · 发表于 2017-8-4 08:54:27

交作业！

STmove · 发表于 2018-7-26 14:15:26

好久没交作业了（抄注释这事儿能算抄么？程序猿的事儿.....）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>进度条</title>
    <style type="text/css">
        body
        {
                background: #000;
                margin: 100px;
        }
    .load
        {
        text-indent: -9999px;
        position: relative;
        width: 202px;
        height: 202px;
        box-shadow: inset 0 0 0 16px #6FE;
        border-radius: 50%;
    }
        @keyframes load-effect
        {
                0%
                {
                        transform:rotate(0deg);
                }
                100%
                {
                        transform:rotate(360deg);
                }
        }
        .load::before
        {
                position:absolute;
                content:"";
                width:101px;
                height:202px;
                background:#000;
                left:101px;
                animation: load-effect 2s infinite;  /*infinite表示动画无限次播放*/
                transform-origin:0px 101px;  /*transform-origin 属性允许您改变被转换元素的位置。 2D 转换元素能够改变元素 x 和 y 轴。3D 转换元素还能改变其 Z 轴。*/
        }
        .load::after
        {
                position:absolute;
                content:"";
                width:202px;
                height:202px;
                border-radius:50%;
                left:0;
                box-shadow:inset 0 0 0 16px rgba(255,255,255,.3);
        }
    </style>
</head>
<body>
    <div class="load">Loading</div>
</body>
</html>

星空·无限 · 发表于 2019-1-11 11:21:21

本帖最后由星空·无限于 2019-1-11 11:25 编辑

利用相同的原理实现水平进度条的加载，鼠标放进度条上自动加载。不过有个问题还没想好怎么解决，加载完自动跳回底层的灰色了，怎么可以让它保持在加载完成的颜色呢？大神可以指教一下吗

@不二如是

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>进度条</title>
    <style type="text/css">
        .load{
            top: 100px;
            width: 500px;
            height: 10px;
            background: #cccccc;
            position: relative;
            margin: 0 auto;
            text-indent: -9999px;
            border-radius: 10px;
            overflow: hidden;
        }
        .load::before{
            content: '';
            width: 500px;
            height: 10px;
            background: #ff4d69;
            position: absolute;
            border-radius: 10px;
            left: -100%;
        }
        .load:hover::before{
            animation: move 2s;
        }
        @keyframes move{
            from{
                left: -100%;
            }
            to{
                left: 0%;
            }
        }
    </style>
</head>
<body>
<div class="load">Loading</div>
</body>
</html>

你在意在便在 · 发表于 2019-11-6 15:54:07

加油~

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>进度条</title>
<style type="text/css">
/* 清除样式 调整位置 */
* {
        margin:0;
        padding:0;
}
body {
        background:#2ecc71;
        margin:100px;
}
/* 最底层 */
.load {
        position:relative;
        text-indent:-9999px; /*隐藏文字方法之一*/
        width:222px;
        height:222px;
        background: #9b59b6;
        box-shadow:inset 0 0 0 15px #6FE;
        border-radius:50%;
} 
/*中间层*/
.load::before {
        content:'';
        width:111px;
        height:111px;
        background:rgba(52, 152, 219);
        position:absolute;
        left:111px;
        border-radius:0 111px 0 0;
}
/*最顶层*/
.load::after {
        content:'';
        position: absolute;
        width:222px;
        height:222px;
        box-shadow: inset 0 0 0 15px rgba(255,255,255,.5);
        left:0;
        border-radius:50%;
}
 /* 设定动画 */
@keyframes flash{
        0% {
                transform: rotate(0deg);
        }
        25% {
                transform: rotate(90deg);
        }
        50% {
                transform: rotate(180deg);
        }
        75% {
                transform: rotate(270deg);
        }
        100% {
                transform: rotate(360deg);
        }
}
 /* 载入动画 并固定动画位置 */
.load::before {
        animation: flash 2.5s infinite linear;
        transform-origin:0px 111px;
}
/* 覆盖样式 实现画面  注释内容，更清晰*/
body {
        background: #000;
}
.load {
        background: none;
}
.load::before {
        background: #000;
}
</style>
</head>
<body>
    <div class="load">Loading</div>
</body>
</html>

suweixuan1998 · 发表于 2020-1-11 11:09:15

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>进度条</title>
    <style type="text/css">
        body{
            background: #000000;
            margin: 100px;
        }
        .load {
            text-indent: -9999px;
            position: relative;
            width: 202px;
            height: 202px;
            box-shadow: inset 0 0 0 16px #6FE;
            border-radius: 50%;
        }
        .load::before{
            position: absolute;
            content: '';
            width: 101px;
            height: 202px;
            background: #FF88C2;
            left: 101px;
            border-radius: 0 202px 202px 0;
            background: #000;
            animation: load-effect 2s infinite;
            transform-origin: 0px 101px;
        }
        .load::after{
            position: absolute;
            content: '';
            width: 202px;
            height: 202px;
            border-radius: 50%;
            left: 0;
            box-shadow: inset 0 0 0 15px rgba(255,255,255,.3);
        }
        @keyframes load-effect {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }
    </style>
</head>
<body>
    <div class="load">Loading</div>
</body>
</html>

小脑斧 · 发表于 2020-3-18 15:46:49

账号		自动登录	找回密码
密码			立即注册

不二如是不二如是当前离线 UID 378930 日志相册贡献荣誉积分 57019 狗仔卡	发表于 2017-3-1 14:35:53 \| 显示全部楼层 \|阅读模式购买主题已有 12 人购买本主题需向作者支付 2 鱼币才能浏览本帖被以下淘专辑推荐: · HTML5 & CSS3 - 庖丁解牛\|主题: 205, 订阅: 36
	想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
	回复使用道具举报置顶卡千斤顶显身卡

[庖丁解牛] 0 0 6 0 - 制作一个加载（Loading）动画 - 0.0

本帖被以下淘专辑推荐:

点评