漂亮的页面加载动画

最新推荐文章于 2023-04-16 15:10:42 发布
最新推荐文章于 2023-04-16 15:10:42 发布
阅读量510 收藏 2
点赞数 1
分类专栏： HTML5 CSS 文章标签： javascript css html5 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/vampire10086/article/details/107077464
版权
CSS 同时被 2 个专栏收录
73 篇文章 0 订阅
订阅专栏
HTML5
61 篇文章 0 订阅
订阅专栏 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>110blank</title>
    <script type="text/javascript" src="./js/jquery-3.4.1.min.js"></script>

    <style>
        .load4 .loader {
            font-size: 20px;
            margin: 45% auto;
            width: 1em;
            height: 1em;
            border-radius: 50%;
            position: relative;
            text-indent: -9999em;
            -webkit-animation: load4 1.3s infinite linear;
            animation: load4 1.3s infinite linear;
        }

        @-webkit-keyframes load4 {

            0%,
            100% {
                box-shadow: 0em -3em 0em 0.2em #ffffff, 2em -2em 0 0em #ffffff, 3em 0em 0 -0.5em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 -0.5em #ffffff, -2em 2em 0 -0.5em #ffffff, -3em 0em 0 -0.5em #ffffff, -2em -2em 0 0em #ffffff;
            }

            12.5% {
                box-shadow: 0em -3em 0em 0em #ffffff, 2em -2em 0 0.2em #ffffff, 3em 0em 0 0em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 -0.5em #ffffff,
                    -2em 2em 0 -0.5em #ffffff, -3em 0em 0 -0.5em #ffffff, -2em -2em 0 -0.5em #ffffff;
            }

            25% {
                box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 0em #ffffff, 3em 0em 0 0.2em #ffffff, 2em 2em 0 0em #ffffff, 0em 3em 0 -0.5em #ffffff,
                    -2em 2em 0 -0.5em #ffffff, -3em 0em 0 -0.5em #ffffff, -2em -2em 0 -0.5em #ffffff;
            }

            37.5% {
                box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 -0.5em #ffffff,
                    3em 0em 0 0em #ffffff, 2em 2em 0 0.2em #ffffff, 0em 3em 0 0em #ffffff,
                    -2em 2em 0 -0.5em #ffffff, -3em 0em 0 -0.5em #ffffff, -2em -2em 0 -0.5em #ffffff;
            }

            50% {
                box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 -0.5em #ffffff,
                    3em 0em 0 -0.5em #ffffff, 2em 2em 0 0em #ffffff, 0em 3em 0 0.2em #ffffff, -2em 2em 0 0em #ffffff, -3em 0em 0 -0.5em #ffffff, -2em -2em 0 -0.5em #ffffff;
            }

            62.5% {
                box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 -0.5em #ffffff,
                    3em 0em 0 -0.5em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 0em #ffffff, -2em 2em 0 0.2em #ffffff, -3em 0em 0 0em #ffffff, -2em -2em 0 -0.5em #ffffff;
            }

            75% {
                box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 -0.5em #ffffff,
                    3em 0em 0 -0.5em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 -0.5em #ffffff, -2em 2em 0 0em #ffffff, -3em 0em 0 0.2em #ffffff, -2em -2em 0 0em #ffffff;
            }

            87.5% {
                box-shadow: 0em -3em 0em 0em #ffffff, 2em -2em 0 -0.5em #ffffff, 3em 0em 0 -0.5em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 -0.5em #ffffff, -2em 2em 0 0em #ffffff, -3em 0em 0 0em #ffffff, -2em -2em 0 0.2em #ffffff;
            }
        }

        @keyframes load4 {

            0%,
            100% {
                box-shadow: 0em -3em 0em 0.2em #ffffff, 2em -2em 0 0em #ffffff, 3em 0em 0 -0.5em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 -0.5em #ffffff, -2em 2em 0 -0.5em #ffffff, -3em 0em 0 -0.5em #ffffff, -2em -2em 0 0em #ffffff;
            }

            12.5% {
                box-shadow: 0em -3em 0em 0em #ffffff, 2em -2em 0 0.2em #ffffff, 3em 0em 0 0em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 -0.5em #ffffff,
                    -2em 2em 0 -0.5em #ffffff, -3em 0em 0 -0.5em #ffffff, -2em -2em 0 -0.5em #ffffff;
            }

            25% {
                box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 0em #ffffff, 3em 0em 0 0.2em #ffffff, 2em 2em 0 0em #ffffff, 0em 3em 0 -0.5em #ffffff,
                    -2em 2em 0 -0.5em #ffffff, -3em 0em 0 -0.5em #ffffff, -2em -2em 0 -0.5em #ffffff;
            }

            37.5% {
                box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 -0.5em #ffffff,
                    3em 0em 0 0em #ffffff, 2em 2em 0 0.2em #ffffff, 0em 3em 0 0em #ffffff,
                    -2em 2em 0 -0.5em #ffffff, -3em 0em 0 -0.5em #ffffff, -2em -2em 0 -0.5em #ffffff;
            }

            50% {
                box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 -0.5em #ffffff,
                    3em 0em 0 -0.5em #ffffff, 2em 2em 0 0em #ffffff, 0em 3em 0 0.2em #ffffff, -2em 2em 0 0em #ffffff, -3em 0em 0 -0.5em #ffffff, -2em -2em 0 -0.5em #ffffff;
            }

            62.5% {
                box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 -0.5em #ffffff,
                    3em 0em 0 -0.5em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 0em #ffffff, -2em 2em 0 0.2em #ffffff, -3em 0em 0 0em #ffffff, -2em -2em 0 -0.5em #ffffff;
            }

            75% {
                box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 -0.5em #ffffff,
                    3em 0em 0 -0.5em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 -0.5em #ffffff, -2em 2em 0 0em #ffffff, -3em 0em 0 0.2em #ffffff, -2em -2em 0 0em #ffffff;
            }

            87.5% {
                box-shadow: 0em -3em 0em 0em #ffffff, 2em -2em 0 -0.5em #ffffff, 3em 0em 0 -0.5em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 -0.5em #ffffff, -2em 2em 0 0em #ffffff, -3em 0em 0 0em #ffffff, -2em -2em 0 0.2em #ffffff;
            }
        }

        body {
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div class="load4">
        <div class="loader">加载中...</div>
    </div>
    <script>

    </script>
</body>

</html>

 

小鸟哗啦啦
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
简单实现网页加载动画
huxinxue的博客
03-26 1万+
今天自己实现了这个功能，记录一下 效果： 进入网页时先出现加载动画，加载完毕后显示网页 实现原理： 在html上方放一个div，用来显示加载动画，js判断加载完毕事件，将div隐藏即可。 知识点整理： 伪元素实现垂直居中、awesome字体动画、js判断HTML加载是否完成 代码： css: body { width: 100%; height: 100%; ...
CSS3: 快速制作页面加载动画
手写我对你的温柔
01-21 452
介绍3个简单的案例： 案例1： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &lt...
好看的弹出层可以加载页面
03-09
华丽的弹出一个层，有遮罩的效果，并且这个层的内容可以是HTML或JSP
流动性非常好的网页载入页面
11-13 905
第一种：CODE: 红樱桃社区  function setSB(v, el) {    var ie5 = (document.all && document.getElementsByTagName);    if (ie5 || document.readyState == "complete")     {      filterEl = el.children[0];      value
收集一些HTML5网页加载动画（Loading）.rar
07-10
收集一些基于HTML5技术生成的网页动画加载动画，canvas loaders，也就是大家所熟悉的网页Loading特效，这个不是真正的Loading，是基于CSS3绘制出来的Loading动画效果，可用于网页Loading中，这些小动画个个都十分精致，动画效果平滑流畅，实属精品。
好看的加载特效
11-24
多款加载动效任你选择，让你的页面更好看，希望提供的资源不会让你失望
漂亮实用的页面loading(加载)封装代码
10-20
要做一个异步登录，打算给用户做一点提示，所以就网上找了点代码，自己修改新增了一些，做了一个html+css+js的功能封装,供大家参考，需要的朋友参考下吧
html5 canvas实现的酷炫页面预加载动画图标效果特效代码
03-20
这是一款基于html5 canvas实现的酷炫页面预加载动画图标效果源码。有多种预加载动画效果可供选择，动画渐变效果平滑自然，是一款经典的html5加载动画。建议使用支持html5与css3效果较好的火狐或谷歌等浏览器预览本...
C# WinForm漂亮的登录界面，效果很好的加载动画界面，实用性很强
10-30
在本文中，我们将深入探讨如何使用C# WinForm创建一个美观且实用的登录界面，以及效果出众的加载动画界面。C#（C Sharp）是一种面向对象的编程语言，广泛应用于Windows桌面应用程序开发，而WinForm则是.NET ...
酷炫 html5页面加载 loading动画效果 demo 基于原生无第三方依赖
01-04
HTML5页面加载动画是网页设计中的一个重要元素，它在页面内容完全加载之前为用户提供视觉反馈，使得用户体验更加流畅。本示例"酷炫html5页面加载loading动画效果demo"是基于原生JavaScript和CSS实现的，无需任何第三...
网页加载动画效果（Loading）
04-10
50多少个 网页加载动画效果（Loading效果），加载中，SVG，加载动画
Loading加载动画全集下载
09-29
100多种Loading加载动画，网页制作中用得上哦~
网页页面 loading加载gif动画素材(共有63款)
12-08
该资源是关于网页页面 loading加载gif动画素材,共有63款,款款经典,是非常实用的gif动画素材,可以让你的页面增加不少光彩,大家赶快来下载吧!^_^
vue实现页面加载动画效果
08-29
主要为大家详细介绍了vue实现页面加载动画效果，vue页面出现正在加载的初始页面与实现动画效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
9款漂亮的CSS3 Loading图标加载动画特效.zip
07-11
在网页设计中，加载动画是不可或缺的一部分，它们在页面内容加载期间提供视觉反馈，增加用户体验。"9款漂亮的CSS3 Loading图标加载动画特效"集合了多种色彩鲜艳、设计精美的CSS3实现的加载动画，这些动画不仅简洁，...
html如何添加加载动画效果,CSS3创建加载动画效果
weixin_28738021的博客
06-03 3391
加载动画在网页设计中是很常见的。用户们都希望网页加载又快又流畅而不是盯着屏幕苦等，而加载动画能够在内容加载完成前给用户视觉反馈，从而能够吸引用户而不让他们直接放弃继续浏览你的网站。创建加载效果所需的CSS3知识在我们开始创建加载动画之前，我们得先了解一些CSS3的属性来帮助我们创建这些效果。伪元素 :before :after伪元素对于制作CSS3加载动画是非常有用的。伪元素可以在HTML元素前...
页面加载动画
weixin_44543189的博客
02-19 479
开发工具与关键技术：DW CSS 作者：陆桂超 撰写时间：2019年 2 月 18 日 下面我通过CSS的@keyframes写一个加载动画 1、 首先把HTML布局好 1、 下面是css样式部分的代码 3、下面是加载动画的代码 4、最后就可以得到下图所示的加载动画了，该动画的效果是三个小球向中间聚合和向外扩散。 ...
Web 页面加载动画
liweizhaox0的博客
04-16 716
在 Web 开发中，通常会需要在页面中添加加载动画，以减少用户等待页面加载的焦虑感。下面介绍一个常用的页面加载动画的实现方法，同时介绍其 CSS 和 JavaScript 代码。
网页资源加载动画
过客匆匆，恍如烟
07-10 409
script> var _LoadingHtml = "拼命加载，请稍等..."; document.write(_LoadingHtml); document.onreadystatechange = completeLoading; //加载状态为complete时移除loading效果 function completeLoading() {
vue3好看的页面加载动画
最新发布
03-24
在Vue 3中，你可以使用CSS动画、过渡和第三方库来创建漂亮的页面加载动画。以下是一些常见的页面加载动画示例： 1. CSS动画：你可以使用Vue 3的内置过渡组件和CSS动画来创建各种页面加载效果。例如，你可以使用`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值