<template>
<div class="load">
<div class="loadEffect">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</template> <script>
export default{ }
</script> <style scoped> .loadEffect{
width: 100px;
height: 100px;
position: relative;
margin: 0 auto;
margin-top:100px;
}
.loadEffect span {
display: inline-block;
width: 20px;
height: 20px;
background-image: linear-gradient(270deg, #623Fe9 0%, #5ddaf4 100%);
border-radius: 50%;
position: absolute;
-webkit-animation: load 1.04s linear infinite;
animation: load 1.04s linear infinite;
transform: scale(0.2);
-webkit-transform: scale(0.2);
opacity: 0.1;
}
@keyframes load{
0%{
transform: scale(1.2);
-webkit-transform: scale(1.2);
opacity: 1;
}
100%{
transform: scale(0);
-webkit-transform: scale(0);
opacity: 0.5;
}
}
@-webkit-keyframes load {
0%{
-webkit-transform: scale(1.2);
opacity: 1;
}
100%{
-webkit-transform: scale(0);
opacity: 0.5;
}
}
.loadEffect span:nth-child(1){
left: 0;
top: 50%;
margin-top:-10px;
-webkit-animation-delay:0.13s;
animation-delay:0.13s;
}
.loadEffect span:nth-child(2){
left: 14px;
top: 14px;
-webkit-animation-delay:0.26s;
animation-delay:0.26s;
}
.loadEffect span:nth-child(3){
left: 50%;
top: 0;
margin-left: -10px;
-webkit-animation-delay:0.39s;
animation-delay:0.39s;
}
.loadEffect span:nth-child(4){
top: 14px;
right:14px;
-webkit-animation-delay:0.52s;
animation-delay:0.52s;
}
.loadEffect span:nth-child(5){
right: 0;
top: 50%;
margin-top:-10px;
-webkit-animation-delay:0.65s;
animation-delay:0.65s;
}
.loadEffect span:nth-child(6){
right: 14px;
bottom:14px;
-webkit-animation-delay:0.78s;
animation-delay:0.78s;
}
.loadEffect span:nth-child(7){
bottom: 0;
left: 50%;
margin-left: -10px;
-webkit-animation-delay:0.91s;
animation-delay:0.91s;
}
.loadEffect span:nth-child(8){
bottom: 14px;
left: 14px;
-webkit-animation-delay:1.04s;
animation-delay:1.04s;
} </style>

vue 3D小球 loading的更多相关文章

  1. VUE动态(自动)Loading【绑定到URL】,同页面多个Loading互不冲突

    需求来源:当使用React时,使用 umi loading 很方便,页面对http请求发生改变时,也会自动改变loading的相关状态(true/false) 对VUE插件进行找寻,发现没找到合适内容 ...

  2. vue 3d轮播组件 vue-carousel-3d

    开发可视化项目时,需要3d轮播图,找来找去发现这个组件,引用简单,最后实现效果还不错.发现关于这个组件,能搜到的教程不多,就分享一下我的经验. 插件github地址:https://wlada.git ...

  3. Vue 封装的loading组件

    <template> <div class="loadEffect"> <span></span> <span>< ...

  4. vue和element全局loading

    http请求的代码如下: import axios from 'axios' import { Message} from 'element-ui' import store from '../sto ...

  5. Vue自定义全局Toast和Loading

    如果我们的Vue项目中没有用到任何UI框架的话,为了更好的用户体验,肯定会用到loading和toast.那么我们就自定义这两个组件吧. 1.Toast组件 首先,在common下新建global文件 ...

  6. VUE移动端音乐APP学习【四】:scroll组件及loading组件开发

    scroll组件 制作scroll 组件,然后嵌套一个 DOM 节点,使得该节点就能够滚动.该组件中需要引入 BetterScroll 插件. scroll.vue: <template> ...

  7. 分享web前端七款HTML5 Loading动画特效集锦

    以前我们大部分的Loading动画都是利用gif图片实现的,这种图片实现Loading动画的方法虽然也很不错,但是作为HTML5开发者来说,如果能利用HTML5和CSS3实现这些超酷的Loading动 ...

  8. TWaver3D入门探索——3D拓扑图之绽放的小球花

    这样一簇绚烂丰满艳丽多姿的3D小球花,要多少代码才能完成?其实不足百行,您信吗?下面咱就看一下具体实现过程,让您分分钟学会用TWaver HTML5制作3D拓扑图. 搭建3D空间 首先为花簇的绽放建一 ...

  9. 7 款华丽的 HTML5 Loading 动画特效

    我们在进行大数据的传输或者复杂操作的等待时,最好能有一个Loading等待的小动画提示用户.本文将为大家分享一些超华丽的基于HTML5的Loading加载动画特效,希望你会喜欢. 1.HTML5 Ca ...

随机推荐

  1. 组合数C(n,m)的四种求解方法

    转自:文章 1.暴力求解 C(n,m)=n*(n-1)*...*(n-m+1)/m!,(n<=15): int CF(int n,int m) { ,i,j; ;i--) ans*=i; ;i- ...

  2. windows下 python2 和python3 共存

    目前我们在国内网站上看到的两者共存的方法就是将其中一个的python.exe重命名.虽说在一定程度上可行,但存在一个重大的隐患,就是修改了名字的那个python对应的pip将无法使用. 下面说一下具体 ...

  3. c# devexpress 多个窗口

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  4. Keras预测股票

    #!/usr/bin/env python3 # -*- coding: utf-8 -*- """ Created on Sat Nov 18 21:22:29 201 ...

  5. (转载)Fiddler调式使用知多少(一)深入研究

    原文来源于:http://www.cnblogs.com/tugenhua0707/p/4623317.html,作者:涂根华 !个人觉得原作者写的特别好,故收藏于此 Fiddler调式使用(一)深入 ...

  6. ssh+注解开发 pom.xml

    <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...

  7. Codeforces816A Karen and Morning 2017-06-27 15:11 43人阅读 评论(0) 收藏

    A. Karen and Morning time limit per test 2 seconds memory limit per test 512 megabytes input standar ...

  8. Visual Studio 简单使用常识操作

    Visual Studio 简单使用个人总结   转载请注明来源:www.cnblogs.com/icmzn(后续会持续更新) 可以查看一下链接,官方关于visual studio 2010 的介绍  ...

  9. cxgrid强大用法

    cxgrid强大用法 (2012-07-25 14:09:42) 转载▼ 标签: delphi cxgrid 用法 强大 杂谈 分类: Delphi cxGrid功能强大,适合做企业级的复杂查询.非常 ...

  10. Android-WebView加载网络图片&网页

    加载网络图片: 链接地址:  http://bcs.link-us.com.cn/directBank/newHX149/directBank/h5/www/dist/img/e113.jpg 确保链 ...