mirror of
https://gitee.com/TSpecific/tuniao-ui.git
synced 2026-03-13 19:04:00 +08:00
新增记载动画,新增颜色选择组件
This commit is contained in:
kert
224
templatePage/animate/loading/loading5.vue
Normal file
224
templatePage/animate/loading/loading5.vue
Normal file
@@ -0,0 +1,224 @@
|
||||
<template>
|
||||
<view class="template-loading">
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed alpha customBack>
|
||||
<view slot="back" class='tn-custom-nav-bar__back'
|
||||
@click="goBack">
|
||||
<text class='icon tn-icon-left'></text>
|
||||
<text class='icon tn-icon-home-capsule-fill'></text>
|
||||
</view>
|
||||
</tn-nav-bar>
|
||||
|
||||
<view class="" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
<!-- 图鸟加载-->
|
||||
<view class="loader">
|
||||
<view class="circle loading1"></view>
|
||||
<view class="circle loading2"></view>
|
||||
<view class="circle loading3"></view>
|
||||
<view class="circle loading4"></view>
|
||||
<view class="circle loading5"></view>
|
||||
<view class="circle loading6"></view>
|
||||
<view class="circle loading7"></view>
|
||||
<view class="circle loading8"></view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
|
||||
export default {
|
||||
name: 'TemplateLoading',
|
||||
mixins: [template_page_mixin],
|
||||
data(){
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/static/css/templatePage/custom_nav_bar.scss';
|
||||
|
||||
/* 加载动画*/
|
||||
.loader {
|
||||
position:absolute;
|
||||
width:120rpx;
|
||||
height:120rpx;
|
||||
top:50%;
|
||||
left:50%;
|
||||
transform:translate(-50%, -50%);
|
||||
}
|
||||
.circle{
|
||||
color: #01BEFF;
|
||||
position: absolute;
|
||||
border-radius: 100%;
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
display: inline-block;
|
||||
float: none;
|
||||
background-color: currentColor;
|
||||
border: 0 solid currentColor;
|
||||
-webkit-animation: spin 1s infinite ease-in-out;
|
||||
-moz-animation: spin 1s infinite ease-in-out;
|
||||
-o-animation: spin 1s infinite ease-in-out;
|
||||
animation: spin 1s infinite ease-in-out
|
||||
}
|
||||
|
||||
.loader :nth-child(1) {
|
||||
top: 5%;
|
||||
left: 50%;
|
||||
-webkit-animation-delay: -.875s;
|
||||
-moz-animation-delay: -.875s;
|
||||
-o-animation-delay: -.875s;
|
||||
animation-delay: -.875s
|
||||
}
|
||||
|
||||
.loader :nth-child(2) {
|
||||
top: 18.1801948466%;
|
||||
left: 81.8198051534%;
|
||||
-webkit-animation-delay: -.75s;
|
||||
-moz-animation-delay: -.75s;
|
||||
-o-animation-delay: -.75s;
|
||||
animation-delay: -.75s
|
||||
}
|
||||
|
||||
.loader :nth-child(3) {
|
||||
top: 50%;
|
||||
left: 95%;
|
||||
-webkit-animation-delay: -.625s;
|
||||
-moz-animation-delay: -.625s;
|
||||
-o-animation-delay: -.625s;
|
||||
animation-delay: -.625s
|
||||
}
|
||||
|
||||
.loader :nth-child(4) {
|
||||
top: 81.8198051534%;
|
||||
left: 81.8198051534%;
|
||||
-webkit-animation-delay: -.5s;
|
||||
-moz-animation-delay: -.5s;
|
||||
-o-animation-delay: -.5s;
|
||||
animation-delay: -.5s
|
||||
}
|
||||
|
||||
.loader :nth-child(5) {
|
||||
top: 94.9999999966%;
|
||||
left: 50.0000000005%;
|
||||
-webkit-animation-delay: -.375s;
|
||||
-moz-animation-delay: -.375s;
|
||||
-o-animation-delay: -.375s;
|
||||
animation-delay: -.375s
|
||||
}
|
||||
|
||||
.loader :nth-child(6) {
|
||||
top: 81.8198046966%;
|
||||
left: 18.1801949248%;
|
||||
-webkit-animation-delay: -.25s;
|
||||
-moz-animation-delay: -.25s;
|
||||
-o-animation-delay: -.25s;
|
||||
animation-delay: -.25s
|
||||
}
|
||||
|
||||
.loader :nth-child(7) {
|
||||
top: 49.9999750815%;
|
||||
left: 5.0000051215%;
|
||||
-webkit-animation-delay: -.125s;
|
||||
-moz-animation-delay: -.125s;
|
||||
-o-animation-delay: -.125s;
|
||||
animation-delay: -.125s
|
||||
}
|
||||
|
||||
.loader :nth-child(8) {
|
||||
top: 18.179464974%;
|
||||
left: 18.1803700518%;
|
||||
-webkit-animation-delay: 0s;
|
||||
-moz-animation-delay: 0s;
|
||||
-o-animation-delay: 0s;
|
||||
animation-delay: 0s
|
||||
}
|
||||
|
||||
@-webkit-keyframes spin {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1)
|
||||
}
|
||||
|
||||
20% {
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
80% {
|
||||
opacity: 0;
|
||||
-webkit-transform: scale(0);
|
||||
transform: scale(0)
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes spin {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
-moz-transform: scale(1);
|
||||
transform: scale(1)
|
||||
}
|
||||
|
||||
20% {
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
80% {
|
||||
opacity: 0;
|
||||
-moz-transform: scale(0);
|
||||
transform: scale(0)
|
||||
}
|
||||
}
|
||||
|
||||
@-o-keyframes spin {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
-o-transform: scale(1);
|
||||
transform: scale(1)
|
||||
}
|
||||
|
||||
20% {
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
80% {
|
||||
opacity: 0;
|
||||
-o-transform: scale(0);
|
||||
transform: scale(0)
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
-webkit-transform: scale(1);
|
||||
-moz-transform: scale(1);
|
||||
-o-transform: scale(1);
|
||||
transform: scale(1)
|
||||
}
|
||||
|
||||
20% {
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
80% {
|
||||
opacity: 0;
|
||||
-webkit-transform: scale(0);
|
||||
-moz-transform: scale(0);
|
||||
-o-transform: scale(0);
|
||||
transform: scale(0)
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user