几种炫酷的加载动画

最新推荐文章于 2024-08-28 21:26:11 发布
最新推荐文章于 2024-08-28 21:26:11 发布
阅读量1.2k 收藏 9
点赞数
分类专栏： vue 文章标签： loading 加载动画
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43844392/article/details/100988255
版权

动画一

在这里插入图片描述

// An highlighted block
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    body {
        background: #111;
        overflow: hidden;
    }

    canvas {
        bottom: 0;
        left: 0;
        margin: auto;
        position: absolute;
        right: 0;
        top: 0;
    }
    </style>
</head>

<body>
    <!-- <div></div> -->
</body>

</html>
<script>
var $ = {};

$.Particle = function(opt) {
    this.radius = 7;
    this.x = opt.x;
    this.y = opt.y;
    this.angle = opt.angle;
    this.speed = opt.speed;
    this.accel = opt.accel;
    this.decay = 0.01;
    this.life = 1;
};

$.Particle.prototype.step = function(i) {
    this.speed += this.accel;
    this.x += Math.cos(this.angle) * this.speed;
    this.y += Math.sin(this.angle) * this.speed;
    this.angle += $.PI / 64;
    this.accel *= 1.01;
    this.life -= this.decay;

    if (this.life <= 0) {
        $.particles.splice(i, 1);
    }
};

$.Particle.prototype.draw = function(i) {
    $.ctx.fillStyle = $.ctx.strokeStyle = 'hsla(' + ($.tick + (this.life * 120)) + ', 100%, 60%, ' + this.life + ')';
    $.ctx.beginPath();
    if ($.particles[i - 1]) {
        $.ctx.moveTo(this.x, this.y);
        $.ctx.lineTo($.particles[i - 1].x, $.particles[i - 1].y);
    }
    $.ctx.stroke();

    $.ctx.beginPath();
    $.ctx.arc(this.x, this.y, Math.max(0.001, this.life * this.radius), 0, $.TWO_PI);
    $.ctx.fill();

    var size = Math.random() * 1.25;
    $.ctx.fillRect(~~(this.x + ((Math.random() - 0.5) * 35) * this.life), ~~(this.y + ((Math.random() - 0.5) * 35) * this.life), size, size);
}

$.step = function() {
    $.particles.push(new $.Particle({
        x: $.width / 2 + Math.cos($.tick / 20) * $.min / 2,
        y: $.height / 2 + Math.sin($.tick / 20) * $.min / 2,
        angle: $.globalRotation + $.globalAngle,
        speed: 0,
        accel: 0.01
    }));

    $.particles.forEach(function(elem, index) {
        elem.step(index);
    });

    $.globalRotation += $.PI / 6;
    $.globalAngle += $.PI / 6;
};

$.draw = function() {
    $.ctx.clearRect(0, 0, $.width, $.height);

    $.particles.forEach(function(elem, index) {
        elem.draw(index);
    });
};

$.init = function() {
    $.canvas = document.createElement('canvas');
    $.ctx = $.canvas.getContext('2d');
    $.width = 300;
    $.height = 300;
    $.canvas.width = $.width * window.devicePixelRatio;
    $.canvas.height = $.height * window.devicePixelRatio;
    $.canvas.style.width = $.width + 'px';
    $.canvas.style.height = $.height + 'px';
    $.ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
    $.min = $.width * 0.5;
    $.particles = [];
    $.globalAngle = 0;
    $.globalRotation = 0;
    $.tick = 0;
    $.PI = Math.PI;
    $.TWO_PI = $.PI * 2;
    $.ctx.globalCompositeOperation = 'lighter';
    document.body.appendChild($.canvas);
    $.loop();
};

$.loop = function() {
    requestAnimationFrame($.loop);
    $.step();
    $.draw();
    $.tick++;
};

$.init();
</script>

动画二

在这里插入图片描述

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    body,html {
        background: #000000;
        padding-top: 50px;
    }

    .spinner {
        position: relative;
        margin: auto;
        box-sizing: border-box;
        background-clip: padding-box;
        width: 200px;
        height: 200px;
        border-radius: 100px;
        border: 4px solid rgba(255, 255, 255, 0.1);
        -webkit-mask: linear-gradient(rgba(0, 0, 0, 0.1), #000000 90%);
        transform-origin: 50% 60%;
        transform: perspective(200px) rotateX(66deg);
        animation: spinner-wiggle 1.2s infinite;
    }

    .spinner:before,
    .spinner:after {
        content: "";
        position: absolute;
        margin: -4px;
        box-sizing: inherit;
        width: inherit;
        height: inherit;
        border-radius: inherit;
        opacity: .05;
        border: inherit;
        border-color: transparent;
        animation: spinner-spin 1.2s cubic-bezier(0.6, 0.2, 0, 0.8) infinite, spinner-fade 1.2s linear infinite;
    }

    .spinner:before {
        border-top-color: #66e6ff;
    }

    .spinner:after {
        border-top-color: #f0db75;
        animation-delay: 0.3s;
    }

    @keyframes spinner-spin {
        100% {
            transform: rotate(360deg);
        }
    }

    @keyframes spinner-fade {
        20% {
            opacity: .1;
        }

        40% {
            opacity: 1;
        }

        60% {
            opacity: .1;
        }
    }
    </style>
</head>

<body>
    <div class="spinner"></div>
</body>

</html>

动画三

加载加页面开合
css

<style type="text/css">
   .chromeframe {
     margin: 0.2em 0;
     background: #ccc;
     color: #000;
     padding: 0.2em 0;}
   #loader-wrapper {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index:999999;}
   #loader {
     display: block;
     position: relative;
     left: 50%;
     top: 50%;
     width: 150px;
     height: 150px;
     margin: -75px 0 0 -75px;
     border-radius: 50%;
     border: 3px solid transparent;
     /* COLOR 1 */
     border-top-color: #000;
     -webkit-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
     -ms-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
     -moz-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
     -o-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
     animation: spin 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
     z-index:1001;}
   #loader:before {
     content: "";
     position: absolute;
     top: 5px;
     left: 5px;
     right: 5px;
     bottom: 5px;
     border-radius: 50%;
     border: 3px solid transparent;
     /* COLOR 2 */
     border-top-color: #000;
     -webkit-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
     -moz-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
     -o-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
     -ms-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
     animation: spin 3s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */}
   #loader:after {
     content: "";
     position: absolute;
     top: 15px;
     left: 15px;
     right: 15px;
     bottom: 15px;
     border-radius: 50%;
     border: 3px solid transparent;
     border-top-color: #000;
     /* COLOR 3 */
     -moz-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
     -o-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
     -ms-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
     -webkit-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
     animation: spin 1.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */}


   @-webkit-keyframes spin {
     0%{
       -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
       -ms-transform: rotate(0deg);  /* IE 9 */
       transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
     }100%{
        -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);  /* IE 9 */
        transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */}
   }

   @keyframes spin {
     0%{
       -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
       -ms-transform: rotate(0deg);  /* IE 9 */
       transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
     }100%{
        -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);  /* IE 9 */
        transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */}
   }


   #loader-wrapper .loader-section {
     position: fixed;
     top: 0;
     width: 51%;
     height: 100%;
     background: #fdc73e; /* Old browsers */
     z-index: 1000;
     -webkit-transform: translateX(0);  /* Chrome, Opera 15+, Safari 3.1+ */
     -ms-transform: translateX(0);  /* IE 9 */
     transform: translateX(0);  /* Firefox 16+, IE 10+, Opera */}
   #loader-wrapper .loader-section.section-left {left: 0;}
   #loader-wrapper .loader-section.section-right {right: 0;}

   /* Loaded */
   .loaded #loader-wrapper .loader-section.section-left {
     -webkit-transform: translateX(-100%);  /* Chrome, Opera 15+, Safari 3.1+ */
     -ms-transform: translateX(-100%);  /* IE 9 */
     transform: translateX(-100%);  /* Firefox 16+, IE 10+, Opera */
     -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
     transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);}
   .loaded #loader-wrapper .loader-section.section-right {
     -webkit-transform: translateX(100%);  /* Chrome, Opera 15+, Safari 3.1+ */
     -ms-transform: translateX(100%);  /* IE 9 */
     transform: translateX(100%);  /* Firefox 16+, IE 10+, Opera */
     -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
     transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);}
   .loaded #loader {
     opacity: 0;
     -webkit-transition: all 0.3s ease-out;
     transition: all 0.3s ease-out;}
   .loaded #loader-wrapper {
     visibility: hidden;
     -webkit-transform: translateY(-100%);  /* Chrome, Opera 15+, Safari 3.1+ */
     -ms-transform: translateY(-100%);  /* IE 9 */
     transform: translateY(-100%);  /* Firefox 16+, IE 10+, Opera */
     -webkit-transition: all 0.3s 1s ease-out;
     transition: all 0.3s 1s ease-out;}
   /* JavaScript Turned Off */
   .no-js #loader-wrapper {display: none;}
   .no-js h1 {color: #222222;}
   #loader-wrapper .load_title {
     font-family:'Open Sans';
     color:#000; font-size:19px; width:100%; text-align:center; z-index:9999999999999; position:absolute; top:60%; opacity:1; line-height:30px; }
   #loader-wrapper .load_title span {  font-weight:normal; font-style:italic; font-size:13px; color:#000; opacity:0.5;}
 </style>

html

<div id="loader-wrapper">
  <div id="loader"></div>
  <div class="loader-section section-left"></div>
  <div class="loader-section section-right"></div>
  <div class="load_title">modure loading...</div>
</div>

js(注意：这个是基于vue加载动画，这段代码在app.vue中)

 created () {
    // document.body.removeChild(document.getElementById('Loading'))
    document.getElementsByTagName('body')[0].className += 'loaded'
    if (document.getElementsByClassName('.load_title')[0] !== undefined) {
      document.getElementsByClassName('.load_title')[0].remove()
    }
  },

动画5j

1.在入口文件index.html中加入loading动画：
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <!--浏览器兼容模式用最新的文档渲染模式-->
    <meta http-equiv="X-UA-Compatible" content ="IE=edge"/>
    <title></title>
    <style type="text/css">
      #Loading {
        top:50%;
        left:50%;
        position: absolute;
        -webkit-transform: translateY(-50%)  translateX(-50%);
        transform: translateY(-50%)  translateX(-50%);
        z-index:100;
      }
      @-webkit-keyframes ball-beat {
        50% {
          opacity: 0.2;
          -webkit-transform: scale(0.75);
          transform: scale(0.75); }

        100% {
          opacity: 1;
          -webkit-transform: scale(1);
          transform: scale(1); } }

      @keyframes ball-beat {
        50% {
          opacity: 0.2;
          -webkit-transform: scale(0.75);
          transform: scale(0.75); }

        100% {
          opacity: 1;
          -webkit-transform: scale(1);
          transform: scale(1); } }

      .ball-beat > div {
        background-color: #279fcf;
        width: 15px;
        height: 15px;
        border-radius: 100% !important;
        margin: 2px;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        display: inline-block;
        -webkit-animation: ball-beat 0.7s 0s infinite linear;
        animation: ball-beat 0.7s 0s infinite linear; }
      .ball-beat > div:nth-child(2n-1) {
        -webkit-animation-delay: 0.35s !important;
        animation-delay: 0.35s !important; }
    </style>

  </head>
  <body>
    <div id="Loading">
      <div class="loader-inner ball-beat">
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>
2.在app.vue的created方法中：
created() {  document.body.removeChild(document.getElementById('Loading'))   
}

查看原文：http://www.ibloger.net/article/401.html

相关阅读：
30种CSS3炫酷页面预加载loading动画特效（推荐）：http://www.ibloger.net/article/1558.html
Loaders.css 多种纯CSS加载进度动画效果：http://www.ibloger.net/article/1568.html
load-awesome 53种纯CSS3预加载页面loading指示器动画特：效http://www.ibloger.net/article/1800.html
CSS3-Preloaders 6种CSS3预加载Loading指示器动画特效：http://www.ibloger.net/article/1556.html
按钮特效 基于SVG和Segment.js的Loading加载：http://www.ibloger.net/article/1554.html

weixin_43844392
关注
专栏目录
12种炫酷html5 svg加载loading动画特效
08-15
本篇文章将深入探讨12种炫酷的HTML5与SVG结合实现的加载loading动画特效。 1. **audio.svg**：此动画可能是一个音乐播放器加载指示器，通过SVG元素动态展示音频加载进度。SVG的`<rect>`或`<path>`元素可以用来创建...
一款炫酷Loading动画--加载成功
热门推荐
crazychen的专栏
12-12 2万+
简介昨天在简书上看到一篇文章，介绍了一个加载动画的实现过程 一款Loading动画的实现思路（一） 只可惜原动画是IOS上制作的，而看了一下，作者的实现思路比较复杂，于是趁着空闲写了一个Android版本，这篇文章将给大家介绍一下实现过程。 首先让我们来看一下动画效果 动画结构分析从上面的gif图中可以看到，这个加载动画有成功，失败两种状态，由于Gif速度比较快，我们再来分别看一张慢图1
9种炫酷loading加载cssjs特效
ICode联盟
07-30 885
9种炫酷的css3代码loading特效加载动画，这组loading动画的风格有9种风格，圆圈样式的Loading动画、矩形方块样式的Loading动画和纯文字Loading动画，并且加载特效的颜色非常丰富。
纯CSS实现炫酷的加载动画：简单高效的技巧分享
最新发布
阿里渣渣java研发组-群主
08-28 1062
纯CSS加载动画不仅实现简单，且性能优异，适用于各种Web应用场景。本文分享的几种炫酷加载动画可以直接应用于你的项目，或作为灵感进行更复杂的自定义设计。
用js实现滚动加载动画效果
qq_61955502的博客
11-23 3997
滚动加载动画&无限加载
基于js的炫酷动画的代码
liujie_5201314的博客
11-10 722
基于js的炫酷动画的代码
常用loading加载效果集及vue实现加载动画
pscool的博客
03-28 3822
思路：只需要先把loading的盒子摆在正中间，然后，里面的每个item都使用绝对定位，并且水平垂直居中，然后先旋转，再位移，就可以呈现一个环状，接着指定动画，并设置延迟即可。（其实，下边并不需要给loading指定大小，这样就不用设置上下左右都是0，margin是auto了） <style lang="scss"> body { margin: 0; } .modal { background: #202020; hei
3种炫酷纯CSS3预加载动画特效
12-13
"3种炫酷纯CSS3预加载动画特效"正是这样一组专为网页设计者准备的资源，利用CSS3的强大功能，无需JavaScript或其他额外的库，就能实现富有创意的加载效果。 首先，我们来看第一种预加载动画——翻书效果。这种效果...
纯css3实现炫酷谷歌loading图标加载动画特效源码.zip
11-20
【标题】"纯css3实现炫酷谷歌loading图标加载动画特效源码.zip"涉及的核心知识点是CSS3动画和Google风格的加载图标设计。CSS3是层叠样式表的第三个主要版本，它引入了许多新的特性和功能，使得网页设计更加动态和...
android炫酷5.0加载圈兼容3.0以下
12-26
"android炫酷5.0加载圈兼容3.0以下"这个主题涉及到的是如何在Android应用中创建一个具有Android 5.0 (Lollipop) 风格的炫酷加载圈，并使其兼容更低版本的Android系统，如Android 3.0 (Honeycomb) 及以下。...
Android炫酷界面刷新
11-17
本话题主要探讨的是如何实现多种界面刷新样式，包括下拉刷新动画和上拉数据加载动画，这些设计可以提升应用的交互性和趣味性。我们将讨论以下几个方面： 1. **下拉刷新动画**：下拉刷新是移动应用中常见的功能，...
vue实现页面加载动画效果
08-29
主要为大家详细介绍了vue实现页面加载动画效果，vue页面出现正在加载的初始页面与实现动画效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
28种CSS3炫酷loading页面加载动画特效代码
05-30
28酷炫吊的CSS3加载效果特效动画代码，分分钟让你的加载超乎你的想象
【小案例分享】7组超炫酷的 HTML5 Canvas 全屏动画背景
10-09
今天来个大的栗子,分享一款超炫酷的HTML5 Canvas全屏动画背景，一共有7组Canvas动画。如果网页需要一种类似屏保动画的特效，那么这款HTML5 Canvas动画可以很好的满足你的需求。 大神发的,觉得很炫酷,很强大,所以拿出来给大家分享! 效果图预览:http://blog.csdn.net/love_xiolan/article/details/52711874
使用这 6个Vue加载动画库来减少我们网站的跳出率
粉丝们务必加入微信粉丝群
05-12 9315
作者：Matt Maribojoc 译者：前端小智 来源：stackabuse 有梦想，有干货，微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。 本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的系列文章。 阻止人们离开我们的网站的一种方法是添加视觉反馈，让他们知道我们的网页正在加载而不是坏了。 视觉反馈还吸引了人们的注意力，因此等待时间似乎比静态屏幕要短得多。 无论是添加微调动画还是添加实际进度条.
给Vue项目快速加上炫酷的动画
while1170的博客
03-18 1078
平时项目中有不少需要用到动画的地方，自己写动画又太浪费时间。那么有没有能够快速给项目加上动画的东西呢？答案毋庸置疑是有的。这里我们使用的是，一个封装好的动画库。
【Vue基础-数字大屏】加载动漫效果
qq_42294095的博客
10-13 1332
加载动漫效果
Vue3项目中加载动画的实现
fafafafa_fa的博客
05-24 1520
正常路由的引入方式通常会导致网页首屏加载时间过长，给用户带来不好的体验，所以我们通常使用路由懒加载的方式来引入路由，这样只会在使用到某个路由时才会去加载它，减少了初次加载的时间。
基于Vue的前端加载中页面动画——弹跳动画Loading组件的设计与实现
chenchuang0128的博客
05-27 1636
基于Vue的前端加载中页面动画——弹跳动画Loading组件的设计与实现摘要随着技术的飞速进步，前端开发的复杂性日益提升。传统的开发方式通常将整个系统构建为一个整体，导致即使是微小的改动或功能的增加也可能引起整体逻辑的变动。为了解决这个问题，组件化开发应运而生，它允许开发者独立地开发、维护组件，并可以灵活地将它们组合在一起。本文介绍了一个基于Vue的加载中页面动画组件——弹跳动画Loading组件，该组件不仅优化了用户体验，还提高了开发效率和可维护性。一、引言。
CSS3实现的8款炫酷Loading动画效果分享
另一种常见的是圆形旋转加载动画，可以通过设置`border-radius`使矩形变为圆形，然后利用`transform: rotate()`来旋转元素。通过改变`animation-duration`和`animation-timing-function`可以调整旋转速度和缓动效果...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值