vue 3D小球 loading
<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的更多相关文章
- VUE动态(自动)Loading【绑定到URL】,同页面多个Loading互不冲突
需求来源:当使用React时,使用 umi loading 很方便,页面对http请求发生改变时,也会自动改变loading的相关状态(true/false) 对VUE插件进行找寻,发现没找到合适内容 ...
- vue 3d轮播组件 vue-carousel-3d
开发可视化项目时,需要3d轮播图,找来找去发现这个组件,引用简单,最后实现效果还不错.发现关于这个组件,能搜到的教程不多,就分享一下我的经验. 插件github地址:https://wlada.git ...
- Vue 封装的loading组件
<template> <div class="loadEffect"> <span></span> <span>< ...
- vue和element全局loading
http请求的代码如下: import axios from 'axios' import { Message} from 'element-ui' import store from '../sto ...
- Vue自定义全局Toast和Loading
如果我们的Vue项目中没有用到任何UI框架的话,为了更好的用户体验,肯定会用到loading和toast.那么我们就自定义这两个组件吧. 1.Toast组件 首先,在common下新建global文件 ...
- VUE移动端音乐APP学习【四】:scroll组件及loading组件开发
scroll组件 制作scroll 组件,然后嵌套一个 DOM 节点,使得该节点就能够滚动.该组件中需要引入 BetterScroll 插件. scroll.vue: <template> ...
- 分享web前端七款HTML5 Loading动画特效集锦
以前我们大部分的Loading动画都是利用gif图片实现的,这种图片实现Loading动画的方法虽然也很不错,但是作为HTML5开发者来说,如果能利用HTML5和CSS3实现这些超酷的Loading动 ...
- TWaver3D入门探索——3D拓扑图之绽放的小球花
这样一簇绚烂丰满艳丽多姿的3D小球花,要多少代码才能完成?其实不足百行,您信吗?下面咱就看一下具体实现过程,让您分分钟学会用TWaver HTML5制作3D拓扑图. 搭建3D空间 首先为花簇的绽放建一 ...
- 7 款华丽的 HTML5 Loading 动画特效
我们在进行大数据的传输或者复杂操作的等待时,最好能有一个Loading等待的小动画提示用户.本文将为大家分享一些超华丽的基于HTML5的Loading加载动画特效,希望你会喜欢. 1.HTML5 Ca ...
随机推荐
- 组合数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- ...
- windows下 python2 和python3 共存
目前我们在国内网站上看到的两者共存的方法就是将其中一个的python.exe重命名.虽说在一定程度上可行,但存在一个重大的隐患,就是修改了名字的那个python对应的pip将无法使用. 下面说一下具体 ...
- c# devexpress 多个窗口
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...
- Keras预测股票
#!/usr/bin/env python3 # -*- coding: utf-8 -*- """ Created on Sat Nov 18 21:22:29 201 ...
- (转载)Fiddler调式使用知多少(一)深入研究
原文来源于:http://www.cnblogs.com/tugenhua0707/p/4623317.html,作者:涂根华 !个人觉得原作者写的特别好,故收藏于此 Fiddler调式使用(一)深入 ...
- ssh+注解开发 pom.xml
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...
- 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 ...
- Visual Studio 简单使用常识操作
Visual Studio 简单使用个人总结 转载请注明来源:www.cnblogs.com/icmzn(后续会持续更新) 可以查看一下链接,官方关于visual studio 2010 的介绍 ...
- cxgrid强大用法
cxgrid强大用法 (2012-07-25 14:09:42) 转载▼ 标签: delphi cxgrid 用法 强大 杂谈 分类: Delphi cxGrid功能强大,适合做企业级的复杂查询.非常 ...
- Android-WebView加载网络图片&网页
加载网络图片: 链接地址: http://bcs.link-us.com.cn/directBank/newHX149/directBank/h5/www/dist/img/e113.jpg 确保链 ...