专栏首页无道编程CSS3 Loading加载效果合集

CSS3 Loading加载效果合集

效果1

CSS

<style>
    .loading {
        width: 300px;
        height: 300px;
        position: relative;
        border: 1px solid gray;
    }
    .loading .line {
        width: 200px;
        height: 8px;
        /* margin: 50% 20px; */
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: rgba(11, 232, 129,.8);
        border-radius: 4px;
    }
    .loading span {
        display: inline-block;
        height: 18px;
        width: 18px;
        border-radius: 50%;
        position: absolute;
        top: -50%;
        left: 0;
        background: rgba(11, 232, 129,1);
        animation: moving 1.1s infinite linear alternate;
    }
    @keyframes moving{
        from {
            left: 0;
        }
        to {
            left: 185px;
        }
    }
</style>

HTML

<div class="loading">
    <div class="line">
        <span></span>
    </div>
</div>

注意,为了展示效果,loading设置了margin,在实际项目中需要自己调整。

效果

效果2

CSS

    <style>
        .loading {
            width: 300px;
            height: 300px;
            border: 1px solid black;
        }
        .loading .spinner {
            display: inline-block;
            width: 100px;
            height: 100px;
            background: #81ecec;
            margin: 100px 100px;
            perspective: 120px;
            /* transition: background .2s; */
            animation: plan 1.8s infinite ease-in-out;
        }
        @keyframes plan {
            0% {
                transform: perspective(120px) rotateX(0deg) rotateY(0deg);
                background: #55efc4;
            }
            50% {
                transform: rotateY(0deg) rotateX(-180.1deg);
                background: #74b9ff;
            }
            100% {
                transform: rotateY(-179.9deg) rotateX(-180deg);
                background: #00cec9;
            }
        }
    </style>

HTML

<div class="loading">
    <span class="spinner"></span>
</div>   

注意,为了展示效果,loading设置了margin,在实际项目中需要自己

效果

截图不能截动态的效果,动态效果是:正方形在平面内翻转。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • (2019)[前端]面试题[1]:CSS BFC是什么【BFC详解】

    BFC(Block Formatting Context)格式化上下文,是盒模型的一种渲染布局,简言之可以理解为 一个独立的容器,不受外部影响,不影响外部。

    无道
  • (2019)[前端]面试题[6]:水平垂直居中方法

    如果已知子元素宽高度,那么transform: translate(width/2,height/2);一样的效果。

    无道
  • (2019)[前端]面试题[3]:三大定位,相对定位放在固定定位产生什么影响?

    1、设置父元素为固定定位,不设置高度,内部child设置高度和宽度,根据BFC内部box垂直排列的特征:

    无道
  • 给WordPress或网站内添加新年挂灯笼特效

    源码及教材源自知更鸟:http://zmingcx.com/hanging-lantern.html

    AlexTao
  • Valine Admin 配置手册

    二级域名用于评论后台管理,如 https://deserts.leanapp.cn 。

    Savalone
  • 小程序实践(八):验证码倒计时功能

    听着music睡
  • Js+Css做一个可弹起压下效果的按钮

    好几天没写js和css了,昨天看一个大神的博客的时候无意中看到他的一个效果做的很不错,思来想去觉得自己做一个会比较好,毕竟,本来就是一个学习的过程!

    何处锦绣不灰堆
  • WordPress美化之文章内页新增彩色渐变框【共9套】

    其实今天这个CSS之前博客内发过,最早是春节疫情期间在家美化向日葵的时候写的。今天突然心血来潮想到这个完全可以做到文章内页里。遂动手适配。在此分享给各位。钻芒博...

    AlexTao
  • 前端|CSS信封的制作方法

    利用Hbuilder来制作一个信封,此处使用的是先制作信封边框再进行文字加入的方法来设计。

    算法与编程之美
  • 使用纯CSS来画一颗鸡蛋

    所以接下来我们要给它增添一个border-radius 以及一个background-color 属性:

    学前端

扫码关注云+社区

领取腾讯云代金券