From ec6f207325f1996d71fb4e0c6acada906ec026bd Mon Sep 17 00:00:00 2001
From: inleft <inleft@qq.com>
Date: Fri, 04 Mar 2022 18:38:32 +0800
Subject: [PATCH] css 抽取
---
/dev/null | 786 --------------------------
src/components/mini/mdDetail.vue | 11
src/components/swichLabel/main1-home.vue | 6
src/components/mini/box14-video.vue | 28
src/assets/404/styles.less | 890 +++++++++++++++++++++++++++++
src/App.vue | 9
src/views/exception/404.vue | 4
src/components/group/tool.vue | 10
8 files changed, 919 insertions(+), 825 deletions(-)
diff --git a/src/App.vue b/src/App.vue
index 0c6f8b7..421793e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -76,4 +76,13 @@
-o-transition: width 350ms, left 350ms;
transition: width 350ms, left 350ms;
}
+ .fade-enter-active,
+ .fade-leave-active {
+ transition: opacity .5s;
+ }
+
+ .fade-enter,
+ .fade-leave-to {
+ opacity: 0;
+ }
</style>
diff --git a/src/assets/404/styles.css b/src/assets/404/styles.css
deleted file mode 100644
index b9415e5..0000000
--- a/src/assets/404/styles.css
+++ /dev/null
@@ -1,786 +0,0 @@
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed,
-figure, figcaption, footer, header, hgroup,
-menu, nav, output, ruby, section, summary,
-time, mark, audio, video {
- margin: 0;
- padding: 0;
- border: 0;
- font: inherit;
- font-size: 100%;
- vertical-align: baseline;
-}
-
-html {
- line-height: 1;
-}
-
-ol, ul {
- list-style: none;
-}
-
-table {
- border-collapse: collapse;
- border-spacing: 0;
-}
-
-caption, th, td {
- text-align: left;
- font-weight: normal;
- vertical-align: middle;
-}
-
-q, blockquote {
- quotes: none;
-}
-q:before, q:after, blockquote:before, blockquote:after {
- content: "";
- content: none;
-}
-
-a img {
- border: none;
-}
-
-article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
- display: block;
-}
-
-/***********VARIABLES***********/
-/*Movement*/
-/*Colors*/
-/***********STYLES***********/
-/* body {
- background-color: #d4e7ba;
-} */
-
-/*.ele-container {
- background: -webkit-linear-gradient(top, rgba(0, 141, 210, 0.63) 0%, transparent 100%);
- background: linear-gradient(to bottom, rgba(0, 141, 210, 0.63) 0%, transparent 100%);
- height: 500px;
- overflow: hidden;
- position: relative;
- width: 100%;
-}*/
-
-.ele-wrapper {
- -webkit-animation: ele-movement 1s infinite linear;
- animation: ele-movement 1s infinite linear;
- left: 40%;
- position: absolute;
- top: 30%;
- margin: auto 0px;
- -webkit-transform: translate3D(-50%, -75%, 0);
- -ms-transform: translate3D(-50%, -75%, 0);
- transform: translate3D(-50%, -75%, 0);
- width: 200px;
-}
-
-.ele-body {
- -webkit-animation: body-movement 1s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93);
- animation: body-movement 1s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93);
- background: -webkit-linear-gradient(top, #cfcfcf 0%, #9c9c9c 70%);
- background: linear-gradient(to bottom, #cfcfcf 0%, #9c9c9c 70%);
- border: 1px solid #808080;
- border-radius: 100px 50px 70px 60px;
- height: 165px;
- position: relative;
- width: 100%;
- z-index: 1;
-}
-
-.ele-tail {
- -webkit-animation: tail-movement 1s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93);
- animation: tail-movement 1s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93);
- border-top: 7px solid #808080;
- border-radius: 50%;
- height: 50px;
- position: absolute;
- -webkit-transform: translate3d(-3%, 69%, 0) rotateZ(-20deg);
- transform: translate3d(-3%, 69%, 0) rotateZ(-20deg);
- width: 64px;
-}
-.ele-tail:before {
- border-top: 5px solid #C2C2C2;
- border-radius: 50%;
- content: '';
- height: 50px;
- position: absolute;
- width: 64px;
- top: -6px;
-}
-
-.ele-head {
- -webkit-animation: head-movement 2s infinite linear;
- animation: head-movement 2s infinite linear;
- background: #C2C2C2;
- border-radius: 50%;
- border-top: 1px solid #808080;
- box-shadow: -1px 1px 2px #808080;
- height: 150px;
- position: absolute;
- -webkit-transform: translate3d(80%, -25%, 0);
- transform: translate3d(80%, -25%, 0);
- width: 155px;
-}
-
-.ele-eyes:before, .ele-eyes:after {
- -webkit-animation: eyes-blink 3.5s infinite linear;
- animation: eyes-blink 3.5s infinite linear;
- background-color: #FDFDFD;
- border-radius: 50%;
- bottom: -48px;
- content: '';
- height: 10px;
- position: absolute;
- width: 10px;
-}
-
-.ele-eyebrows {
- -webkit-animation: eyebrows-movement 1s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93);
- animation: eyebrows-movement 1s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93);
- background: -webkit-linear-gradient(bottom, #C2C2C2 20%, #9c9c9c 100%);
- background: linear-gradient(to top, #C2C2C2 20%, #9c9c9c 100%);
- border-radius: 10px;
- border-top: 1px solid #808080;
- bottom: 88px;
- height: 20px;
- left: 92px;
- position: absolute;
- width: 60px;
-}
-
-.ele-eyes {
- left: 60%;
- position: absolute;
- top: 6%;
-}
-.ele-eyes:before {
- left: 41px;
-}
-.ele-eyes:after {
- left: 10px;
-}
-
-.ele-ear {
- -webkit-animation: ear-movement 1s infinite linear;
- animation: ear-movement 1s infinite linear;
- background: -webkit-linear-gradient(right, #C2C2C2 10%, darkgray 100%);
- background: linear-gradient(to left, #C2C2C2 10%, darkgray 100%);
- border-bottom: 1px solid #808080;
- border-left: 1px solid #808080;
- border-top: 1px solid #808080;
- border-radius: 60px 0 0 50%;
- height: 110px;
- left: -22px;
- position: absolute;
- top: 25px;
- -webkit-transform: rotateZ(-10deg);
- transform: rotateZ(-10deg);
- width: 60px;
-}
-
-.ele-mouth {
- -webkit-animation: mouth-movement 1s infinite linear;
- animation: mouth-movement 1s infinite linear;
- background: -webkit-linear-gradient(top, #C2C2C2 50%, darkgray 100%);
- background: linear-gradient(to bottom, #C2C2C2 50%, darkgray 100%);
- border-radius: 0px 100% 0px 0px;
- border-top: 2px solid #808080;
- height: 160px;
- left: 83%;
- position: absolute;
- top: 35%;
- width: 30px;
-}
-.ele-mouth:before {
- -webkit-animation: mouth-after-movement 1s infinite linear;
- animation: mouth-after-movement 1s infinite linear;
- background-color: darkgray;
- border-bottom: 1px solid #808080;
- border-left: 1px solid #808080;
- border-radius: 8px;
- bottom: 0;
- content: '';
- height: 15px;
- left: -5px;
- position: absolute;
- width: 40px;
-}
-
-.ele-fang-front, .ele-fang-back {
- border-bottom: 12px solid #FFF;
- border-radius: 50%;
- height: 40px;
- position: absolute;
- -webkit-transform: rotateZ(20deg);
- transform: rotateZ(20deg);
- width: 50px;
-}
-
-.ele-fang-front {
- box-shadow: 0px 1px 0px #808080;
- left: 100px;
- top: 100px;
-}
-.ele-fang-front:before {
- background-color: #C2C2C2;
- bottom: -10px;
- content: '';
- height: 45px;
- left: -5px;
- position: absolute;
- width: 15px;
-}
-.ele-fang-front:after {
- background-color: #C2C2C2;
- border-radius: 0 50% 50% 0;
- bottom: -14px;
- box-shadow: 1px 1px 0px #808080;
- content: '';
- height: 21px;
- left: 6px;
- position: absolute;
- -webkit-transform: rotateZ(20deg);
- transform: rotateZ(20deg);
- width: 15px;
-}
-
-.ele-fang-back {
- border-bottom-color: #e6e6e6;
- left: 115px;
- top: 95px;
- z-index: -1;
-}
-.ele-fang-back:before {
- background-color: #C2C2C2;
- bottom: -10px;
- content: '';
- height: 25px;
- position: absolute;
- width: 30px;
-}
-
-div[class^="ele-leg-"] {
- border-left: 1px solid #808080;
- height: 88px;
- position: absolute;
- width: 50px;
-}
-div[class^="ele-leg-"]:before {
- background-color: rgba(74, 74, 74, 0.53);
- border-radius: 50%;
- bottom: -30px;
- box-shadow: 0 0 2px rgba(74, 74, 74, 0.53);
- content: '';
- height: 10px;
- left: 50%;
- position: absolute;
- -webkit-transform: translateX(-50%) rotateZ(0deg);
- transform: translateX(-50%) rotateZ(0deg);
- width: 50px;
-}
-
-.ele-leg-front {
- background-color: #9c9c9c;
- top: 100%;
- z-index: 1;
-}
-.ele-leg-front .ele-foot {
- background-color: #9c9c9c;
-}
-
-.ele-leg-back {
- background-color: #828282;
- top: 95%;
-}
-.ele-leg-back .ele-foot {
- background-color: #828282;
-}
-.ele-leg-back .ele-foot:before, .ele-leg-back .ele-foot:after {
- background-color: #bababa;
-}
-
-.ele-leg-1 {
- -webkit-animation: leg-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) 0s;
- animation: leg-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) 0s;
- right: 57.5%;
-}
-.ele-leg-1:before {
- -webkit-animation: foot-shadow-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) 0s;
- animation: foot-shadow-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) 0s;
-}
-.ele-leg-1 .ele-foot {
- -webkit-animation: foot-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) 0s;
- animation: foot-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) 0s;
-}
-
-.ele-leg-2 {
- -webkit-animation: leg-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) -1s;
- animation: leg-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) -1s;
- right: 67.5%;
-}
-.ele-leg-2:before {
- -webkit-animation: foot-shadow-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) -1s;
- animation: foot-shadow-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) -1s;
-}
-.ele-leg-2 .ele-foot {
- -webkit-animation: foot-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) -1s;
- animation: foot-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) -1s;
-}
-
-.ele-leg-3 {
- -webkit-animation: leg-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) -1s;
- animation: leg-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) -1s;
- right: 5%;
-}
-.ele-leg-3:before {
- -webkit-animation: foot-shadow-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) -1s;
- animation: foot-shadow-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) -1s;
-}
-.ele-leg-3 .ele-foot {
- -webkit-animation: foot-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) -1s;
- animation: foot-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) -1s;
-}
-
-.ele-leg-4 {
- -webkit-animation: leg-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) 0s;
- animation: leg-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) 0s;
- right: 15%;
-}
-.ele-leg-4:before {
- -webkit-animation: foot-shadow-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) 0s;
- animation: foot-shadow-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) 0s;
-}
-.ele-leg-4 .ele-foot {
- -webkit-animation: foot-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) 0s;
- animation: foot-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) 0s;
-}
-
-.ele-foot:before, .ele-foot:after {
- background-color: #E0E0E0;
- border-radius: 10px 10px 0 0;
- bottom: 0;
- content: '';
- height: 15px;
- position: absolute;
- width: 11px;
-}
-
-.ele-foot {
- border-radius: 25px 25px 35% 40%;
- bottom: -17.5px;
- box-shadow: -1px 1px 0px #808080;
- height: 35px;
- left: 50%;
- overflow: hidden;
- position: absolute;
- -webkit-transform: translateX(-49%) rotateZ(0deg);
- transform: translateX(-49%) rotateZ(0deg);
- width: 55px;
-}
-.ele-foot:before {
- right: -7.5px;
-}
-.ele-foot:after {
- bottom: -3px;
- right: 5px;
-}
-
-@-webkit-keyframes leg-animation {
- 0% {
- height: 65px;
- -webkit-transform: translate3d(0, -90%, 0) rotate3d(0, 0, 1, 10deg) translate3d(0, 30%, 0);
- transform: translate3d(0, -90%, 0) rotate3d(0, 0, 1, 10deg) translate3d(0, 30%, 0);
- }
- 25% {
- height: 40px;
- }
- 50% {
- height: 65px;
- -webkit-transform: translate3d(0, -90%, 0) rotate3d(0, 0, 1, -15deg) translate3d(0, 30%, 0);
- transform: translate3d(0, -90%, 0) rotate3d(0, 0, 1, -15deg) translate3d(0, 30%, 0);
- }
- 75% {
- height: 65px;
- }
- 100% {
- height: 65px;
- -webkit-transform: translate3d(0, -90%, 0) rotate3d(0, 0, 1, 10deg) translate3d(0, 30%, 0);
- transform: translate3d(0, -90%, 0) rotate3d(0, 0, 1, 10deg) translate3d(0, 30%, 0);
- }
-}
-
-@keyframes leg-animation {
- 0% {
- height: 65px;
- -webkit-transform: translate3d(0, -90%, 0) rotate3d(0, 0, 1, 10deg) translate3d(0, 30%, 0);
- transform: translate3d(0, -90%, 0) rotate3d(0, 0, 1, 10deg) translate3d(0, 30%, 0);
- }
- 25% {
- height: 40px;
- }
- 50% {
- height: 65px;
- -webkit-transform: translate3d(0, -90%, 0) rotate3d(0, 0, 1, -15deg) translate3d(0, 30%, 0);
- transform: translate3d(0, -90%, 0) rotate3d(0, 0, 1, -15deg) translate3d(0, 30%, 0);
- }
- 75% {
- height: 65px;
- }
- 100% {
- height: 65px;
- -webkit-transform: translate3d(0, -90%, 0) rotate3d(0, 0, 1, 10deg) translate3d(0, 30%, 0);
- transform: translate3d(0, -90%, 0) rotate3d(0, 0, 1, 10deg) translate3d(0, 30%, 0);
- }
-}
-@-webkit-keyframes foot-animation {
- 0% {
- -webkit-transform: translateX(-49%) rotateZ(-10deg);
- transform: translateX(-49%) rotateZ(-10deg);
- }
- 15% {
- -webkit-transform: translateX(-49%) rotateZ(5deg);
- transform: translateX(-49%) rotateZ(5deg);
- }
- 40% {
- -webkit-transform: translateX(-49%) rotateZ(0deg);
- transform: translateX(-49%) rotateZ(0deg);
- }
- 50% {
- -webkit-transform: translateX(-49%) rotateZ(15deg);
- transform: translateX(-49%) rotateZ(15deg);
- }
- 100% {
- -webkit-transform: translateX(-49%) rotateZ(-10deg);
- transform: translateX(-49%) rotateZ(-10deg);
- }
-}
-@keyframes foot-animation {
- 0% {
- -webkit-transform: translateX(-49%) rotateZ(-10deg);
- transform: translateX(-49%) rotateZ(-10deg);
- }
- 15% {
- -webkit-transform: translateX(-49%) rotateZ(5deg);
- transform: translateX(-49%) rotateZ(5deg);
- }
- 40% {
- -webkit-transform: translateX(-49%) rotateZ(0deg);
- transform: translateX(-49%) rotateZ(0deg);
- }
- 50% {
- -webkit-transform: translateX(-49%) rotateZ(15deg);
- transform: translateX(-49%) rotateZ(15deg);
- }
- 100% {
- -webkit-transform: translateX(-49%) rotateZ(-10deg);
- transform: translateX(-49%) rotateZ(-10deg);
- }
-}
-@-webkit-keyframes foot-shadow-animation {
- 0% {
- -webkit-transform: translateX(-50%) rotateZ(-8deg);
- transform: translateX(-50%) rotateZ(-8deg);
- bottom: -20px;
- width: 50px;
- }
- 25% {
- bottom: -30px;
- width: 40px;
- }
- 50% {
- -webkit-transform: translateX(-50%) rotateZ(13deg);
- transform: translateX(-50%) rotateZ(13deg);
- bottom: -20px;
- width: 50px;
- }
- 100% {
- -webkit-transform: translateX(-50%) rotateZ(-8deg);
- transform: translateX(-50%) rotateZ(-8deg);
- bottom: -20px;
- width: 50px;
- }
-}
-@keyframes foot-shadow-animation {
- 0% {
- -webkit-transform: translateX(-50%) rotateZ(-8deg);
- transform: translateX(-50%) rotateZ(-8deg);
- bottom: -20px;
- width: 50px;
- }
- 25% {
- bottom: -30px;
- width: 40px;
- }
- 50% {
- -webkit-transform: translateX(-50%) rotateZ(13deg);
- transform: translateX(-50%) rotateZ(13deg);
- bottom: -20px;
- width: 50px;
- }
- 100% {
- -webkit-transform: translateX(-50%) rotateZ(-8deg);
- transform: translateX(-50%) rotateZ(-8deg);
- bottom: -20px;
- width: 50px;
- }
-}
-@-webkit-keyframes eyes-blink {
- 0% {
- height: 10px;
- }
- 3% {
- height: 1px;
- }
- 5% {
- height: 10px;
- }
- 100% {
- height: 10px;
- }
-}
-@keyframes eyes-blink {
- 0% {
- height: 10px;
- }
- 3% {
- height: 1px;
- }
- 5% {
- height: 10px;
- }
- 100% {
- height: 10px;
- }
-}
-@-webkit-keyframes ele-movement {
- 0% {
- -webkit-transform: translate3D(-50%, -54%, 0);
- transform: translate3D(-50%, -54%, 0);
- }
- 50% {
- -webkit-transform: translate3D(-50%, -57%, 0);
- transform: translate3D(-50%, -57%, 0);
- }
- 100% {
- -webkit-transform: translate3D(-50%, -54%, 0);
- transform: translate3D(-50%, -54%, 0);
- }
-}
-@keyframes ele-movement {
- 0% {
- -webkit-transform: translate3D(-50%, -54%, 0);
- transform: translate3D(-50%, -54%, 0);
- }
- 50% {
- -webkit-transform: translate3D(-50%, -57%, 0);
- transform: translate3D(-50%, -57%, 0);
- }
- 100% {
- -webkit-transform: translate3D(-50%, -54%, 0);
- transform: translate3D(-50%, -54%, 0);
- }
-}
-@-webkit-keyframes mouth-movement {
- 0% {
- height: 160px;
- width: 28px;
- }
- 50% {
- height: 150px;
- width: 30px;
- }
- 100% {
- height: 160px;
- width: 28px;
- }
-}
-@keyframes mouth-movement {
- 0% {
- height: 160px;
- width: 28px;
- }
- 50% {
- height: 150px;
- width: 30px;
- }
- 100% {
- height: 160px;
- width: 28px;
- }
-}
-@-webkit-keyframes mouth-after-movement {
- 0% {
- width: 37px;
- }
- 50% {
- width: 40px;
- }
- 100% {
- width: 37px;
- }
-}
-@keyframes mouth-after-movement {
- 0% {
- width: 37px;
- }
- 50% {
- width: 40px;
- }
- 100% {
- width: 37px;
- }
-}
-@-webkit-keyframes tail-movement {
- 0% {
- -webkit-transform: translate3d(-3%, 69%, 0) rotateZ(-20deg);
- transform: translate3d(-3%, 69%, 0) rotateZ(-20deg);
- }
- 50% {
- -webkit-transform: translate3d(-5%, 65%, 0) rotateZ(-18deg);
- transform: translate3d(-5%, 65%, 0) rotateZ(-18deg);
- }
- 100% {
- -webkit-transform: translate3d(-3%, 69%, 0) rotateZ(-20deg);
- transform: translate3d(-3%, 69%, 0) rotateZ(-20deg);
- }
-}
-@keyframes tail-movement {
- 0% {
- -webkit-transform: translate3d(-3%, 69%, 0) rotateZ(-20deg);
- transform: translate3d(-3%, 69%, 0) rotateZ(-20deg);
- }
- 50% {
- -webkit-transform: translate3d(-5%, 65%, 0) rotateZ(-18deg);
- transform: translate3d(-5%, 65%, 0) rotateZ(-18deg);
- }
- 100% {
- -webkit-transform: translate3d(-3%, 69%, 0) rotateZ(-20deg);
- transform: translate3d(-3%, 69%, 0) rotateZ(-20deg);
- }
-}
-@-webkit-keyframes head-movement {
- 0% {
- -webkit-transform: translate3d(80%, -22%, 0) rotateZ(3deg);
- transform: translate3d(80%, -22%, 0) rotateZ(3deg);
- }
- 25% {
- -webkit-transform: translate3d(80%, -22.5%, 0) rotateZ(0deg);
- transform: translate3d(80%, -22.5%, 0) rotateZ(0deg);
- }
- 50% {
- -webkit-transform: translate3d(80%, -23%, 0) rotateZ(-3deg);
- transform: translate3d(80%, -23%, 0) rotateZ(-3deg);
- }
- 75% {
- -webkit-transform: translate3d(80%, -22.5%, 0) rotateZ(0deg);
- transform: translate3d(80%, -22.5%, 0) rotateZ(0deg);
- }
- 100% {
- -webkit-transform: translate3d(80%, -22%, 0) rotateZ(3deg);
- transform: translate3d(80%, -22%, 0) rotateZ(3deg);
- }
-}
-@keyframes head-movement {
- 0% {
- -webkit-transform: translate3d(80%, -22%, 0) rotateZ(3deg);
- transform: translate3d(80%, -22%, 0) rotateZ(3deg);
- }
- 25% {
- -webkit-transform: translate3d(80%, -22.5%, 0) rotateZ(0deg);
- transform: translate3d(80%, -22.5%, 0) rotateZ(0deg);
- }
- 50% {
- -webkit-transform: translate3d(80%, -23%, 0) rotateZ(-3deg);
- transform: translate3d(80%, -23%, 0) rotateZ(-3deg);
- }
- 75% {
- -webkit-transform: translate3d(80%, -22.5%, 0) rotateZ(0deg);
- transform: translate3d(80%, -22.5%, 0) rotateZ(0deg);
- }
- 100% {
- -webkit-transform: translate3d(80%, -22%, 0) rotateZ(3deg);
- transform: translate3d(80%, -22%, 0) rotateZ(3deg);
- }
-}
-@-webkit-keyframes body-movement {
- 0% {
- height: 160px;
- margin-top: 5px;
- }
- 50% {
- height: 162.5px;
- margin-top: 2.5px;
- }
- 100% {
- height: 160px;
- margin-top: 5px;
- }
-}
-@keyframes body-movement {
- 0% {
- height: 160px;
- margin-top: 5px;
- }
- 50% {
- height: 162.5px;
- margin-top: 2.5px;
- }
- 100% {
- height: 160px;
- margin-top: 5px;
- }
-}
-@-webkit-keyframes ear-movement {
- 0% {
- height: 115px;
- }
- 50% {
- height: 110px;
- }
- 100% {
- height: 115px;
- }
-}
-@keyframes ear-movement {
- 0% {
- height: 115px;
- }
- 50% {
- height: 110px;
- }
- 100% {
- height: 115px;
- }
-}
-@-webkit-keyframes eyebrows-movement {
- 0% {
- height: 18px;
- }
- 50% {
- height: 20px;
- }
- 100% {
- height: 18px;
- }
-}
-@keyframes eyebrows-movement {
- 0% {
- height: 18px;
- }
- 50% {
- height: 20px;
- }
- 100% {
- height: 18px;
- }
-}
\ No newline at end of file
diff --git a/src/assets/404/styles.less b/src/assets/404/styles.less
new file mode 100644
index 0000000..719aaf9
--- /dev/null
+++ b/src/assets/404/styles.less
@@ -0,0 +1,890 @@
+
+.my404 {
+ table {
+ border-collapse: collapse;
+ border-spacing: 0;
+ }
+
+ caption,
+ th,
+ td {
+ text-align: left;
+ font-weight: normal;
+ vertical-align: middle;
+ }
+
+ q,
+ blockquote {
+ quotes: none;
+ }
+
+ q:before,
+ q:after,
+ blockquote:before,
+ blockquote:after {
+ content: "";
+ content: none;
+ }
+
+ a img {
+ border: none;
+ }
+
+ article,
+ aside,
+ details,
+ figcaption,
+ figure,
+ footer,
+ header,
+ hgroup,
+ main,
+ menu,
+ nav,
+ section,
+ summary {
+ display: block;
+ }
+
+ /***********VARIABLES***********/
+ /*Movement*/
+ /*Colors*/
+ /***********STYLES***********/
+ /* body {
+ background-color: #d4e7ba;
+} */
+
+ /*.ele-container {
+ background: -webkit-linear-gradient(top, rgba(0, 141, 210, 0.63) 0%, transparent 100%);
+ background: linear-gradient(to bottom, rgba(0, 141, 210, 0.63) 0%, transparent 100%);
+ height: 500px;
+ overflow: hidden;
+ position: relative;
+ width: 100%;
+}*/
+
+ .ele-wrapper {
+ -webkit-animation: ele-movement 1s infinite linear;
+ animation: ele-movement 1s infinite linear;
+ left: 40%;
+ position: absolute;
+ top: 30%;
+ margin: auto 0px;
+ -webkit-transform: translate3D(-50%, -75%, 0);
+ -ms-transform: translate3D(-50%, -75%, 0);
+ transform: translate3D(-50%, -75%, 0);
+ width: 200px;
+ }
+
+ .ele-body {
+ -webkit-animation: body-movement 1s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93);
+ animation: body-movement 1s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93);
+ background: -webkit-linear-gradient(top, #cfcfcf 0%, #9c9c9c 70%);
+ background: linear-gradient(to bottom, #cfcfcf 0%, #9c9c9c 70%);
+ border: 1px solid #808080;
+ border-radius: 100px 50px 70px 60px;
+ height: 165px;
+ position: relative;
+ width: 100%;
+ z-index: 1;
+ }
+
+ .ele-tail {
+ -webkit-animation: tail-movement 1s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93);
+ animation: tail-movement 1s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93);
+ border-top: 7px solid #808080;
+ border-radius: 50%;
+ height: 50px;
+ position: absolute;
+ -webkit-transform: translate3d(-3%, 69%, 0) rotateZ(-20deg);
+ transform: translate3d(-3%, 69%, 0) rotateZ(-20deg);
+ width: 64px;
+ }
+
+ .ele-tail:before {
+ border-top: 5px solid #C2C2C2;
+ border-radius: 50%;
+ content: '';
+ height: 50px;
+ position: absolute;
+ width: 64px;
+ top: -6px;
+ }
+
+ .ele-head {
+ -webkit-animation: head-movement 2s infinite linear;
+ animation: head-movement 2s infinite linear;
+ background: #C2C2C2;
+ border-radius: 50%;
+ border-top: 1px solid #808080;
+ box-shadow: -1px 1px 2px #808080;
+ height: 150px;
+ position: absolute;
+ -webkit-transform: translate3d(80%, -25%, 0);
+ transform: translate3d(80%, -25%, 0);
+ width: 155px;
+ }
+
+ .ele-eyes:before,
+ .ele-eyes:after {
+ -webkit-animation: eyes-blink 3.5s infinite linear;
+ animation: eyes-blink 3.5s infinite linear;
+ background-color: #FDFDFD;
+ border-radius: 50%;
+ bottom: -48px;
+ content: '';
+ height: 10px;
+ position: absolute;
+ width: 10px;
+ }
+
+ .ele-eyebrows {
+ -webkit-animation: eyebrows-movement 1s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93);
+ animation: eyebrows-movement 1s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93);
+ background: -webkit-linear-gradient(bottom, #C2C2C2 20%, #9c9c9c 100%);
+ background: linear-gradient(to top, #C2C2C2 20%, #9c9c9c 100%);
+ border-radius: 10px;
+ border-top: 1px solid #808080;
+ bottom: 88px;
+ height: 20px;
+ left: 92px;
+ position: absolute;
+ width: 60px;
+ }
+
+ .ele-eyes {
+ left: 60%;
+ position: absolute;
+ top: 6%;
+ }
+
+ .ele-eyes:before {
+ left: 41px;
+ }
+
+ .ele-eyes:after {
+ left: 10px;
+ }
+
+ .ele-ear {
+ -webkit-animation: ear-movement 1s infinite linear;
+ animation: ear-movement 1s infinite linear;
+ background: -webkit-linear-gradient(right, #C2C2C2 10%, darkgray 100%);
+ background: linear-gradient(to left, #C2C2C2 10%, darkgray 100%);
+ border-bottom: 1px solid #808080;
+ border-left: 1px solid #808080;
+ border-top: 1px solid #808080;
+ border-radius: 60px 0 0 50%;
+ height: 110px;
+ left: -22px;
+ position: absolute;
+ top: 25px;
+ -webkit-transform: rotateZ(-10deg);
+ transform: rotateZ(-10deg);
+ width: 60px;
+ }
+
+ .ele-mouth {
+ -webkit-animation: mouth-movement 1s infinite linear;
+ animation: mouth-movement 1s infinite linear;
+ background: -webkit-linear-gradient(top, #C2C2C2 50%, darkgray 100%);
+ background: linear-gradient(to bottom, #C2C2C2 50%, darkgray 100%);
+ border-radius: 0px 100% 0px 0px;
+ border-top: 2px solid #808080;
+ height: 160px;
+ left: 83%;
+ position: absolute;
+ top: 35%;
+ width: 30px;
+ }
+
+ .ele-mouth:before {
+ -webkit-animation: mouth-after-movement 1s infinite linear;
+ animation: mouth-after-movement 1s infinite linear;
+ background-color: darkgray;
+ border-bottom: 1px solid #808080;
+ border-left: 1px solid #808080;
+ border-radius: 8px;
+ bottom: 0;
+ content: '';
+ height: 15px;
+ left: -5px;
+ position: absolute;
+ width: 40px;
+ }
+
+ .ele-fang-front,
+ .ele-fang-back {
+ border-bottom: 12px solid #FFF;
+ border-radius: 50%;
+ height: 40px;
+ position: absolute;
+ -webkit-transform: rotateZ(20deg);
+ transform: rotateZ(20deg);
+ width: 50px;
+ }
+
+ .ele-fang-front {
+ box-shadow: 0px 1px 0px #808080;
+ left: 100px;
+ top: 100px;
+ }
+
+ .ele-fang-front:before {
+ background-color: #C2C2C2;
+ bottom: -10px;
+ content: '';
+ height: 45px;
+ left: -5px;
+ position: absolute;
+ width: 15px;
+ }
+
+ .ele-fang-front:after {
+ background-color: #C2C2C2;
+ border-radius: 0 50% 50% 0;
+ bottom: -14px;
+ box-shadow: 1px 1px 0px #808080;
+ content: '';
+ height: 21px;
+ left: 6px;
+ position: absolute;
+ -webkit-transform: rotateZ(20deg);
+ transform: rotateZ(20deg);
+ width: 15px;
+ }
+
+ .ele-fang-back {
+ border-bottom-color: #e6e6e6;
+ left: 115px;
+ top: 95px;
+ z-index: -1;
+ }
+
+ .ele-fang-back:before {
+ background-color: #C2C2C2;
+ bottom: -10px;
+ content: '';
+ height: 25px;
+ position: absolute;
+ width: 30px;
+ }
+
+ div[class^="ele-leg-"] {
+ border-left: 1px solid #808080;
+ height: 88px;
+ position: absolute;
+ width: 50px;
+ }
+
+ div[class^="ele-leg-"]:before {
+ background-color: rgba(74, 74, 74, 0.53);
+ border-radius: 50%;
+ bottom: -30px;
+ box-shadow: 0 0 2px rgba(74, 74, 74, 0.53);
+ content: '';
+ height: 10px;
+ left: 50%;
+ position: absolute;
+ -webkit-transform: translateX(-50%) rotateZ(0deg);
+ transform: translateX(-50%) rotateZ(0deg);
+ width: 50px;
+ }
+
+ .ele-leg-front {
+ background-color: #9c9c9c;
+ top: 100%;
+ z-index: 1;
+ }
+
+ .ele-leg-front .ele-foot {
+ background-color: #9c9c9c;
+ }
+
+ .ele-leg-back {
+ background-color: #828282;
+ top: 95%;
+ }
+
+ .ele-leg-back .ele-foot {
+ background-color: #828282;
+ }
+
+ .ele-leg-back .ele-foot:before,
+ .ele-leg-back .ele-foot:after {
+ background-color: #bababa;
+ }
+
+ .ele-leg-1 {
+ -webkit-animation: leg-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) 0s;
+ animation: leg-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) 0s;
+ right: 57.5%;
+ }
+
+ .ele-leg-1:before {
+ -webkit-animation: foot-shadow-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) 0s;
+ animation: foot-shadow-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) 0s;
+ }
+
+ .ele-leg-1 .ele-foot {
+ -webkit-animation: foot-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) 0s;
+ animation: foot-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) 0s;
+ }
+
+ .ele-leg-2 {
+ -webkit-animation: leg-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) -1s;
+ animation: leg-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) -1s;
+ right: 67.5%;
+ }
+
+ .ele-leg-2:before {
+ -webkit-animation: foot-shadow-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) -1s;
+ animation: foot-shadow-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) -1s;
+ }
+
+ .ele-leg-2 .ele-foot {
+ -webkit-animation: foot-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) -1s;
+ animation: foot-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) -1s;
+ }
+
+ .ele-leg-3 {
+ -webkit-animation: leg-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) -1s;
+ animation: leg-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) -1s;
+ right: 5%;
+ }
+
+ .ele-leg-3:before {
+ -webkit-animation: foot-shadow-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) -1s;
+ animation: foot-shadow-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) -1s;
+ }
+
+ .ele-leg-3 .ele-foot {
+ -webkit-animation: foot-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) -1s;
+ animation: foot-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) -1s;
+ }
+
+ .ele-leg-4 {
+ -webkit-animation: leg-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) 0s;
+ animation: leg-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) 0s;
+ right: 15%;
+ }
+
+ .ele-leg-4:before {
+ -webkit-animation: foot-shadow-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) 0s;
+ animation: foot-shadow-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) 0s;
+ }
+
+ .ele-leg-4 .ele-foot {
+ -webkit-animation: foot-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) 0s;
+ animation: foot-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) 0s;
+ }
+
+ .ele-foot:before,
+ .ele-foot:after {
+ background-color: #E0E0E0;
+ border-radius: 10px 10px 0 0;
+ bottom: 0;
+ content: '';
+ height: 15px;
+ position: absolute;
+ width: 11px;
+ }
+
+ .ele-foot {
+ border-radius: 25px 25px 35% 40%;
+ bottom: -17.5px;
+ box-shadow: -1px 1px 0px #808080;
+ height: 35px;
+ left: 50%;
+ overflow: hidden;
+ position: absolute;
+ -webkit-transform: translateX(-49%) rotateZ(0deg);
+ transform: translateX(-49%) rotateZ(0deg);
+ width: 55px;
+ }
+
+ .ele-foot:before {
+ right: -7.5px;
+ }
+
+ .ele-foot:after {
+ bottom: -3px;
+ right: 5px;
+ }
+
+ @-webkit-keyframes leg-animation {
+ 0% {
+ height: 65px;
+ -webkit-transform: translate3d(0, -90%, 0) rotate3d(0, 0, 1, 10deg) translate3d(0, 30%, 0);
+ transform: translate3d(0, -90%, 0) rotate3d(0, 0, 1, 10deg) translate3d(0, 30%, 0);
+ }
+
+ 25% {
+ height: 40px;
+ }
+
+ 50% {
+ height: 65px;
+ -webkit-transform: translate3d(0, -90%, 0) rotate3d(0, 0, 1, -15deg) translate3d(0, 30%, 0);
+ transform: translate3d(0, -90%, 0) rotate3d(0, 0, 1, -15deg) translate3d(0, 30%, 0);
+ }
+
+ 75% {
+ height: 65px;
+ }
+
+ 100% {
+ height: 65px;
+ -webkit-transform: translate3d(0, -90%, 0) rotate3d(0, 0, 1, 10deg) translate3d(0, 30%, 0);
+ transform: translate3d(0, -90%, 0) rotate3d(0, 0, 1, 10deg) translate3d(0, 30%, 0);
+ }
+ }
+
+ @keyframes leg-animation {
+ 0% {
+ height: 65px;
+ -webkit-transform: translate3d(0, -90%, 0) rotate3d(0, 0, 1, 10deg) translate3d(0, 30%, 0);
+ transform: translate3d(0, -90%, 0) rotate3d(0, 0, 1, 10deg) translate3d(0, 30%, 0);
+ }
+
+ 25% {
+ height: 40px;
+ }
+
+ 50% {
+ height: 65px;
+ -webkit-transform: translate3d(0, -90%, 0) rotate3d(0, 0, 1, -15deg) translate3d(0, 30%, 0);
+ transform: translate3d(0, -90%, 0) rotate3d(0, 0, 1, -15deg) translate3d(0, 30%, 0);
+ }
+
+ 75% {
+ height: 65px;
+ }
+
+ 100% {
+ height: 65px;
+ -webkit-transform: translate3d(0, -90%, 0) rotate3d(0, 0, 1, 10deg) translate3d(0, 30%, 0);
+ transform: translate3d(0, -90%, 0) rotate3d(0, 0, 1, 10deg) translate3d(0, 30%, 0);
+ }
+ }
+
+ @-webkit-keyframes foot-animation {
+ 0% {
+ -webkit-transform: translateX(-49%) rotateZ(-10deg);
+ transform: translateX(-49%) rotateZ(-10deg);
+ }
+
+ 15% {
+ -webkit-transform: translateX(-49%) rotateZ(5deg);
+ transform: translateX(-49%) rotateZ(5deg);
+ }
+
+ 40% {
+ -webkit-transform: translateX(-49%) rotateZ(0deg);
+ transform: translateX(-49%) rotateZ(0deg);
+ }
+
+ 50% {
+ -webkit-transform: translateX(-49%) rotateZ(15deg);
+ transform: translateX(-49%) rotateZ(15deg);
+ }
+
+ 100% {
+ -webkit-transform: translateX(-49%) rotateZ(-10deg);
+ transform: translateX(-49%) rotateZ(-10deg);
+ }
+ }
+
+ @keyframes foot-animation {
+ 0% {
+ -webkit-transform: translateX(-49%) rotateZ(-10deg);
+ transform: translateX(-49%) rotateZ(-10deg);
+ }
+
+ 15% {
+ -webkit-transform: translateX(-49%) rotateZ(5deg);
+ transform: translateX(-49%) rotateZ(5deg);
+ }
+
+ 40% {
+ -webkit-transform: translateX(-49%) rotateZ(0deg);
+ transform: translateX(-49%) rotateZ(0deg);
+ }
+
+ 50% {
+ -webkit-transform: translateX(-49%) rotateZ(15deg);
+ transform: translateX(-49%) rotateZ(15deg);
+ }
+
+ 100% {
+ -webkit-transform: translateX(-49%) rotateZ(-10deg);
+ transform: translateX(-49%) rotateZ(-10deg);
+ }
+ }
+
+ @-webkit-keyframes foot-shadow-animation {
+ 0% {
+ -webkit-transform: translateX(-50%) rotateZ(-8deg);
+ transform: translateX(-50%) rotateZ(-8deg);
+ bottom: -20px;
+ width: 50px;
+ }
+
+ 25% {
+ bottom: -30px;
+ width: 40px;
+ }
+
+ 50% {
+ -webkit-transform: translateX(-50%) rotateZ(13deg);
+ transform: translateX(-50%) rotateZ(13deg);
+ bottom: -20px;
+ width: 50px;
+ }
+
+ 100% {
+ -webkit-transform: translateX(-50%) rotateZ(-8deg);
+ transform: translateX(-50%) rotateZ(-8deg);
+ bottom: -20px;
+ width: 50px;
+ }
+ }
+
+ @keyframes foot-shadow-animation {
+ 0% {
+ -webkit-transform: translateX(-50%) rotateZ(-8deg);
+ transform: translateX(-50%) rotateZ(-8deg);
+ bottom: -20px;
+ width: 50px;
+ }
+
+ 25% {
+ bottom: -30px;
+ width: 40px;
+ }
+
+ 50% {
+ -webkit-transform: translateX(-50%) rotateZ(13deg);
+ transform: translateX(-50%) rotateZ(13deg);
+ bottom: -20px;
+ width: 50px;
+ }
+
+ 100% {
+ -webkit-transform: translateX(-50%) rotateZ(-8deg);
+ transform: translateX(-50%) rotateZ(-8deg);
+ bottom: -20px;
+ width: 50px;
+ }
+ }
+
+ @-webkit-keyframes eyes-blink {
+ 0% {
+ height: 10px;
+ }
+
+ 3% {
+ height: 1px;
+ }
+
+ 5% {
+ height: 10px;
+ }
+
+ 100% {
+ height: 10px;
+ }
+ }
+
+ @keyframes eyes-blink {
+ 0% {
+ height: 10px;
+ }
+
+ 3% {
+ height: 1px;
+ }
+
+ 5% {
+ height: 10px;
+ }
+
+ 100% {
+ height: 10px;
+ }
+ }
+
+ @-webkit-keyframes ele-movement {
+ 0% {
+ -webkit-transform: translate3D(-50%, -54%, 0);
+ transform: translate3D(-50%, -54%, 0);
+ }
+
+ 50% {
+ -webkit-transform: translate3D(-50%, -57%, 0);
+ transform: translate3D(-50%, -57%, 0);
+ }
+
+ 100% {
+ -webkit-transform: translate3D(-50%, -54%, 0);
+ transform: translate3D(-50%, -54%, 0);
+ }
+ }
+
+ @keyframes ele-movement {
+ 0% {
+ -webkit-transform: translate3D(-50%, -54%, 0);
+ transform: translate3D(-50%, -54%, 0);
+ }
+
+ 50% {
+ -webkit-transform: translate3D(-50%, -57%, 0);
+ transform: translate3D(-50%, -57%, 0);
+ }
+
+ 100% {
+ -webkit-transform: translate3D(-50%, -54%, 0);
+ transform: translate3D(-50%, -54%, 0);
+ }
+ }
+
+ @-webkit-keyframes mouth-movement {
+ 0% {
+ height: 160px;
+ width: 28px;
+ }
+
+ 50% {
+ height: 150px;
+ width: 30px;
+ }
+
+ 100% {
+ height: 160px;
+ width: 28px;
+ }
+ }
+
+ @keyframes mouth-movement {
+ 0% {
+ height: 160px;
+ width: 28px;
+ }
+
+ 50% {
+ height: 150px;
+ width: 30px;
+ }
+
+ 100% {
+ height: 160px;
+ width: 28px;
+ }
+ }
+
+ @-webkit-keyframes mouth-after-movement {
+ 0% {
+ width: 37px;
+ }
+
+ 50% {
+ width: 40px;
+ }
+
+ 100% {
+ width: 37px;
+ }
+ }
+
+ @keyframes mouth-after-movement {
+ 0% {
+ width: 37px;
+ }
+
+ 50% {
+ width: 40px;
+ }
+
+ 100% {
+ width: 37px;
+ }
+ }
+
+ @-webkit-keyframes tail-movement {
+ 0% {
+ -webkit-transform: translate3d(-3%, 69%, 0) rotateZ(-20deg);
+ transform: translate3d(-3%, 69%, 0) rotateZ(-20deg);
+ }
+
+ 50% {
+ -webkit-transform: translate3d(-5%, 65%, 0) rotateZ(-18deg);
+ transform: translate3d(-5%, 65%, 0) rotateZ(-18deg);
+ }
+
+ 100% {
+ -webkit-transform: translate3d(-3%, 69%, 0) rotateZ(-20deg);
+ transform: translate3d(-3%, 69%, 0) rotateZ(-20deg);
+ }
+ }
+
+ @keyframes tail-movement {
+ 0% {
+ -webkit-transform: translate3d(-3%, 69%, 0) rotateZ(-20deg);
+ transform: translate3d(-3%, 69%, 0) rotateZ(-20deg);
+ }
+
+ 50% {
+ -webkit-transform: translate3d(-5%, 65%, 0) rotateZ(-18deg);
+ transform: translate3d(-5%, 65%, 0) rotateZ(-18deg);
+ }
+
+ 100% {
+ -webkit-transform: translate3d(-3%, 69%, 0) rotateZ(-20deg);
+ transform: translate3d(-3%, 69%, 0) rotateZ(-20deg);
+ }
+ }
+
+ @-webkit-keyframes head-movement {
+ 0% {
+ -webkit-transform: translate3d(80%, -22%, 0) rotateZ(3deg);
+ transform: translate3d(80%, -22%, 0) rotateZ(3deg);
+ }
+
+ 25% {
+ -webkit-transform: translate3d(80%, -22.5%, 0) rotateZ(0deg);
+ transform: translate3d(80%, -22.5%, 0) rotateZ(0deg);
+ }
+
+ 50% {
+ -webkit-transform: translate3d(80%, -23%, 0) rotateZ(-3deg);
+ transform: translate3d(80%, -23%, 0) rotateZ(-3deg);
+ }
+
+ 75% {
+ -webkit-transform: translate3d(80%, -22.5%, 0) rotateZ(0deg);
+ transform: translate3d(80%, -22.5%, 0) rotateZ(0deg);
+ }
+
+ 100% {
+ -webkit-transform: translate3d(80%, -22%, 0) rotateZ(3deg);
+ transform: translate3d(80%, -22%, 0) rotateZ(3deg);
+ }
+ }
+
+ @keyframes head-movement {
+ 0% {
+ -webkit-transform: translate3d(80%, -22%, 0) rotateZ(3deg);
+ transform: translate3d(80%, -22%, 0) rotateZ(3deg);
+ }
+
+ 25% {
+ -webkit-transform: translate3d(80%, -22.5%, 0) rotateZ(0deg);
+ transform: translate3d(80%, -22.5%, 0) rotateZ(0deg);
+ }
+
+ 50% {
+ -webkit-transform: translate3d(80%, -23%, 0) rotateZ(-3deg);
+ transform: translate3d(80%, -23%, 0) rotateZ(-3deg);
+ }
+
+ 75% {
+ -webkit-transform: translate3d(80%, -22.5%, 0) rotateZ(0deg);
+ transform: translate3d(80%, -22.5%, 0) rotateZ(0deg);
+ }
+
+ 100% {
+ -webkit-transform: translate3d(80%, -22%, 0) rotateZ(3deg);
+ transform: translate3d(80%, -22%, 0) rotateZ(3deg);
+ }
+ }
+
+ @-webkit-keyframes body-movement {
+ 0% {
+ height: 160px;
+ margin-top: 5px;
+ }
+
+ 50% {
+ height: 162.5px;
+ margin-top: 2.5px;
+ }
+
+ 100% {
+ height: 160px;
+ margin-top: 5px;
+ }
+ }
+
+ @keyframes body-movement {
+ 0% {
+ height: 160px;
+ margin-top: 5px;
+ }
+
+ 50% {
+ height: 162.5px;
+ margin-top: 2.5px;
+ }
+
+ 100% {
+ height: 160px;
+ margin-top: 5px;
+ }
+ }
+
+ @-webkit-keyframes ear-movement {
+ 0% {
+ height: 115px;
+ }
+
+ 50% {
+ height: 110px;
+ }
+
+ 100% {
+ height: 115px;
+ }
+ }
+
+ @keyframes ear-movement {
+ 0% {
+ height: 115px;
+ }
+
+ 50% {
+ height: 110px;
+ }
+
+ 100% {
+ height: 115px;
+ }
+ }
+
+ @-webkit-keyframes eyebrows-movement {
+ 0% {
+ height: 18px;
+ }
+
+ 50% {
+ height: 20px;
+ }
+
+ 100% {
+ height: 18px;
+ }
+ }
+
+ @keyframes eyebrows-movement {
+ 0% {
+ height: 18px;
+ }
+
+ 50% {
+ height: 20px;
+ }
+
+ 100% {
+ height: 18px;
+ }
+ }
+}
diff --git a/src/components/group/tool.vue b/src/components/group/tool.vue
index 18522b5..cb4ca7b 100644
--- a/src/components/group/tool.vue
+++ b/src/components/group/tool.vue
@@ -63,13 +63,5 @@
</script>
<style lang="less">
- .fade-enter-active,
- .fade-leave-active {
- transition: opacity .5s;
- }
-
- .fade-enter,
- .fade-leave-to {
- opacity: 0;
- }
+
</style>
diff --git a/src/components/mini/box14-video.vue b/src/components/mini/box14-video.vue
index fc7360c..d7bc140 100644
--- a/src/components/mini/box14-video.vue
+++ b/src/components/mini/box14-video.vue
@@ -1,27 +1,13 @@
<template>
- <div class="test_wow">
+ <div>
+ <div class="test_wow" v-for="(temp,index) in [1,2,1,1,1,1]">
- <section class="wow animate__slideOutUp test_wow" data-wow-duration="5s" data-wow-de>
+ <section class="wow animate__slideInUp test_wow" data-wow-delay="0.8s" data-wow-duration="0.8s">
+ temp,index
+ </section>
- </section>
-
- <section class="wow animate__slideOutUp test_wow1" data-wow-duration="5s">
-
- </section>
-
- <section class="wow animate__slideOutUp test_wow2" data-wow-duration="5s">
-
- </section>
-
- <section class="wow animate__slideOutUp test_wow3" data-wow-duration="5s">
-
- </section>
-
- <section class="wow animate__slideOutUp test_wow4" data-wow-duration="5s">
-
- </section>
-
+ </div>
</div>
@@ -59,7 +45,7 @@
height: 400px;
- background: #212121;
+ /* background: #212121; */
margin: 0 auto;
diff --git a/src/components/mini/mdDetail.vue b/src/components/mini/mdDetail.vue
index af4e2c2..f22bcdb 100644
--- a/src/components/mini/mdDetail.vue
+++ b/src/components/mini/mdDetail.vue
@@ -31,16 +31,17 @@
</div>
<div class="articleInfoMiniData">
- <div class="smallOption" @click="articleOptionHandle('like')">
- <a-icon type="like" class="samllPadding" />
- <span>{{articelMeta.likeCount==null?'0':articelMeta.likeCount}}</span>
+
+ <div class="smallOption" @click="articleOptionHandle('dislike')">
+ <a-icon type="dislike" style="margin-top: 2px;" />
</div>
<div>
<a-icon type="read" class="samllPadding" />
<span>{{articelMeta.readCount==null?'--':articelMeta.readCount}}</span>
</div>
- <div class="smallOption" @click="articleOptionHandle('dislike')">
- <a-icon type="dislike" style="margin-top: 2px;" />
+ <div class="smallOption" @click="articleOptionHandle('like')">
+ <a-icon type="like" class="samllPadding" />
+ <span>{{articelMeta.likeCount==null?'0':articelMeta.likeCount}}</span>
</div>
<div>
<!-- <a-icon type="folder-open" class="samllPadding" /> -->
diff --git a/src/components/swichLabel/main1-home.vue b/src/components/swichLabel/main1-home.vue
index ae58261..2dc536d 100644
--- a/src/components/swichLabel/main1-home.vue
+++ b/src/components/swichLabel/main1-home.vue
@@ -25,14 +25,16 @@
<a-col v-bind="colApiMain">
<a-col v-bind="colMini" :style="{'position':'absolute','right':'5px'}">
- <a-affix :offset-top="600">
+ <a-affix :offset-top="550">
<a-button @click="showDrawer" style="padding:0px 10px">
<a-icon type="left-circle" />
</a-button>
</a-affix>
</a-col>
<keep-alive>
- <router-view class="fade"></router-view>
+ <transition name="fade">
+ <router-view></router-view>
+ </transition>
</keep-alive>
</a-col>
diff --git a/src/views/exception/404.vue b/src/views/exception/404.vue
index 3dea25d..cb3c233 100644
--- a/src/views/exception/404.vue
+++ b/src/views/exception/404.vue
@@ -40,8 +40,8 @@
}
</script>
-<style scoped>
- @import '../../assets/404/styles.css';
+<style scoped lang="less">
+ @import '../../assets/404/styles.less';
.my404 {
margin-top: 30%;
--
Gitblit v1.9.1