【求解】CSS3动画loading加载

最新推荐文章于 2024-07-12 16:55:56 发布
最新推荐文章于 2024-07-12 16:55:56 发布
阅读量542 收藏
点赞数 1
分类专栏： 前端 文章标签： 前端 css3 font-awesome keyframes
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bridgethsin/article/details/78850370
版权

公司有个项目，里面有个加载动画。本来是这样的。


小绿圆转圈圈，可以想象到吧。

原理挺简单的。小圆是span，放好位置，安置好时间动画就可以。


我见这个挺有意思，改了一下。


小星星和桃心是fontawesome。就是遇到个问题，桃心动画的中心一直在左上角。不知道怎么破，求教。


源代码附上：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>loading</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css">
    <style>
        * {
            margin: 0 auto;
            background-color: rgb(38, 47, 56);
        }

        .loading {
            position: absolute;
            width: 100%;
            height: 100%;    
        }

        .loading-effect {
            width: 400px;
            height: 400px;
            position: relative;
            margin: 190px auto;
        }

        .loading-info {
            font-size: 2em;
            text-align: center;
        }

        .loading-effect span {
            display: inline-block;
            width: 20px;
            height: 20px;
            color: beige;
            text-align: center;
            line-height: 20px;
            position: absolute;
            -webkit-animation: load 1.04s ease infinite;
        }

        @-webkit-keyframes load {
            0% {
                -webkit-transform: scale(1.2);
                opacity: 1;
            }
            100% {
                -webkit-transform: scale(.3);
                opacity: 0.5;
            }
        }
        .loading-effect span:nth-child(1) {
            left: 0;
            top: 50%;
            margin-top: -10px;
            -webkit-animation-delay: 0.13s;
        }

        .loading-effect span:nth-child(2) {
            left: 50.7px;
            top: 50.7px;
            -webkit-animation-delay: 0.26s;
        }

        .loading-effect span:nth-child(3) {
            left: 50%;
            top: 0;
            margin-left: -10px;
            -webkit-animation-delay: 0.39s;
        }

        .loading-effect span:nth-child(4) {
            top: 50.7px;
            right: 50.7px;
            -webkit-animation-delay: 0.52s;
        }

        .loading-effect span:nth-child(5) {
            right: 0;
            top: 50%;
            margin-top: -10px;
            -webkit-animation-delay: 0.65s;
        }

        .loading-effect span:nth-child(6) {
            right: 50.7px;
            bottom: 50.7px;
            -webkit-animation-delay: 0.78s;
        }

        .loading-effect span:nth-child(7) {
            bottom: 0;
            left: 50%;
            margin-left: -10px;
            -webkit-animation-delay: 0.91s;
        }

        .loading-effect span:nth-child(8) {
            bottom: 50.7px;
            left: 50.7px;
            -webkit-animation-delay: 1.04s;
        }

        .loading-effect .loading-content {
            color: red;
            /* position: absolute; */
            left:50%;
            top:50%;
            font-size: 25em;       
        }

        /*********查询*********/
        @media screen and (max-width: 414px) {
            * {
                margin: 0 auto;
                background-color: rgb(38, 47, 56);
            }
            .loading {
                position: absolute;
                width: 100%;
                height: 100%;
            }

            .loading-effect {
                width: 150px;
                height: 150px;
                position: relative;
                margin: 100px auto;
            }

            .loading-info {
                font-size: 2em;
                text-align: center;
            }

            .loading-effect span {
                display: inline-block;
                width: 20px;
                height: 20px;
                color: beige;
                text-align: center;
                line-height: 20px;
                position: absolute;
                -webkit-animation: load 1.04s ease infinite;
            }

            @-webkit-keyframes load {
                0% {
                    -webkit-transform: scale(1.2);
                    opacity: 1;
                }
                100% {
                    -webkit-transform: scale(.3);
                    opacity: 0.5;
                }
            }

            .loading-effect span:nth-child(1) {
                left: 0;
                top: 50%;
                margin-top: -10px;
                -webkit-animation-delay: 0.13s;
            }

            .loading-effect span:nth-child(2) {
                left: 19px;
                top: 19px;
                -webkit-animation-delay: 0.26s;
            }

            .loading-effect span:nth-child(3) {
                left: 50%;
                top: 0;
                margin-left: -10px;
                -webkit-animation-delay: 0.39s;
            }

            .loading-effect span:nth-child(4) {
                top: 19px;
                right: 19px;
                -webkit-animation-delay: 0.52s;
            }

            .loading-effect span:nth-child(5) {
                right: 0;
                top: 50%;
                margin-top: -10px;
                -webkit-animation-delay: 0.65s;
            }

            .loading-effect span:nth-child(6) {
                right: 19px;
                bottom: 19px;
                -webkit-animation-delay: 0.78s;
            }

            .loading-effect span:nth-child(7) {
                bottom: 0;
                left: 50%;
                margin-left: -10px;
                -webkit-animation-delay: 0.91s;
            }

            .loading-effect span:nth-child(8) {
                bottom: 19px;
                left: 19px;
                -webkit-animation-delay: 1.04s;
            }
            .loading-effect .loading-content {
                position: relative;
                top: 50%;
                left: 50%;
                font-size: 10em;
                color: red;
            }
        }
    </style>
</head>

<body>
    <div class="loading">
        <div class="loading-effect">
            <span>
                <i class="fa fa-star-o" aria-hidden="true"></i>
            </span>
            <span>
                <i class="fa fa-star-o" aria-hidden="true"></i>
            </span>
            <span>
                <i class="fa fa-star-o" aria-hidden="true"></i>
            </span>
            <span>
                <i class="fa fa-star-o" aria-hidden="true"></i>
            </span>
            <span>
                <i class="fa fa-star-o" aria-hidden="true"></i>
            </span>
            <span>
                <i class="fa fa-star-o" aria-hidden="true"></i>
            </span>
            <span>
                <i class="fa fa-star-o" aria-hidden="true"></i>
            </span>
            <span>
                <i class="fa fa-star-o" aria-hidden="true"></i>
            </span>
            <span class="loading-content">
                <i class="fa fa-heartbeat" aria-hidden="true"></i>
            </span>
        </div>
        <div class="loading-info">
            
        </div>
    </div>
</body>

</html>


一只红薯
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
学习《css世界》笔记之loading三点动画效果
a153052的博客
09-27 867
动画实例 HTML <div>正在加载中<span>...</span></div> CSS span { display: inline-block; height: 1em; line-height: 1; text-align: left; vertical-align: -0.25em;/* 属性设...
懒人原生css3 加载loading 动画效果
06-12
效果描述： 之前看到网上很多css3 实现的loading动画加载效果 今天懒人站长特意写了一个效果供给大家使用 原理其实是很简单的，大家简单看看即可看懂 特点：无图片、无js，加载速度快 缺点：不支持低版本浏览器 使用方法： 1、将head中的css样式引入到你的页面中 2、将body中的代码部分拷贝过去即可
css依次出现三个点用于加载中（...）
卜卦的博客
12-20 2340
1 wxml <view>正在连接设备，请稍后<text class="dotting"></text></view> 2 css .dotting { display: inline-block; width: 10px; min-height: 2px; padding-right: 2px; ...
css实现三个点加载中的效果
Wind_waving的博客
03-24 4015
效果： //html部分： <span class="loading">正在加载中<dot>...</dot> </span> //css： .loading{ display: flex;/*让dot和文字在同一行*/ } dot{ /*让点垂直居中*/ height: 1em; line-height: 1;
css 实现加载中3个点跳动
weixin_30631587的博客
04-25 1794
<style type="text/css">.loading:after { overflow: hidden; display: inline-block; vertical-align: bottom; animation: ellipsis 2s infinite; content: "\2026";}@keyframes ellipsis { ...
用CSS3 实现loading动画
dengzhengguang的博客
07-03 820
用transform和animation实现的页面loading动画
excel 求解规划加载宏
03-23
excel 求解规划加载宏
gugustock 3维 矩阵 求解
05-19
gugustock 3维 矩阵 求解 , 注意 : 这是 gugustock terrible version (糟糕版本 之一) ， 如果 , 你要下载 , 就在 下载前 , 提醒 你 , 这款软件 很糟糕 , 可以 说 是 特别糟糕 , 你得 做好 你的 心里准备 !!!...
ANSYS经典_练习11A加载和求解
11-12
ANSYS经典_练习11A加载和求解
excel2003中用于规划求解的宏加载项
04-24
规划求解宏加载项是实现这一功能的关键组件，它扩展了Excel的功能，使得用户能够处理线性和非线性的规划问题。当这个加载项丢失或损坏时，可能会影响到Excel的正常运行，无法使用规划求解功能。 首先，我们需要了解...
excel2007的规划求解插件
05-07
在Excel 2007中，规划求解并不默认启用，用户需要手动安装和加载宏才能使用。SOLVER.XLAM是一个Excel加载宏文件，包含了规划求解的用户界面和相关函数。 具体步骤如下： 1. 打开Excel 2007，点击“开发工具”选项...
上下抖动三点加载
weixin_43294560的博客
08-30 258
import React from 'react'; import './Loading.less'; export interface ILoadingProps {} type Props = ILoadingProps; export function Loading(props: Readonly<Props>) { return ( <div className="k-common-loading"> <div className="wr.
三个点的 loading 动画整理
文摘资讯
03-03 484
这是我这几十年间从世界各地寻觅到的 Loading 特效，合计10个，而且是纯 CSS 制作的。你可以将这段代码复制粘贴到一个 HTML 文件中，然后在浏览器中打开，就可以看到这个简单的三个点 loading 动画效果。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /...
利用animation和text-shadow纯CSS实现loading点点点的效果
weixin_34232363的博客
12-30 182
经常在网上看到loading状态时的点点点的动态效果，自己也用JS写了一个，思路是使用一个计数参数，然后在需要添加点的元素后面利用setInterval一个一个加点，当计数到3时，把点变为一个……写完后我就觉得很不对劲，虽然JS代码也很简单，但是这么小的一件事还得拿JS搞这么多乱七八糟的？ 然后去网上看到张鑫旭大神的一篇关于利用CSS实现loading状态时三个点的动态效果的文章，在评论区看到一位...
前端加载动画-三点加载
嘿嘿嘿
10-10 2175
名词解释 animation（动画）： 语法： animation: name duration timing-function delay iteration-count direction fill-mode play-state; animation-name：指定要绑定到选择器的关键帧的名称 语法： animation-name: keyframename|none; keyframename：指定要绑定到选择器的关键帧的名称 none： ease-in-out：动画以低速开始和结束
【CSS加载动画特效】28种纯CSS实现的加载loading动态特效（附源码）
热门推荐
赏樱看雪撸代码
07-11 1万+
CSS3实现多种load加载效果，纯CSS3实现多种加载中效果，纯CSS3实现28种加载动态效果，页面实现loading效果，好看的loading动态特效，animation与transform的灵活应用。
CSS多种Loading动效
hyupeng1006的博客
08-11 2723
分享8种纯CSS实现loading加载特效的小技巧
OpenSNN推文：近期优质博客推荐汇总
最新发布
opensnn的博客
07-12 397
国内个人博客站点众多，涵盖了技术、生活、艺术等多个领域。
【Nginx】配置完https，css加载不了了，求解
06-20
Nginx配置HTTPS后，CSS加载不成功可能是由于以下...3. 如何排查Nginx中的重定向规则是否影响了CSS文件的加载？ 如果以上问题都无法解决问题，请提供详细的Nginx配置文件片段以及相关的错误日志，以便更好地定位问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值