dashbord 增加c3动画 取消card展示

QMPlusVuePage/src/style/animition.scss

@@ -0,0 +1,1044 @@
+body {
+    background-color: #fffaf0;
+}
+
+ul {
+    padding: 0;
+}
+
+li {
+    list-style: none;
+}
+
+.container {
+    background-image: linear-gradient(to top, #fcf3d8 30%, #eaafc8, #654ea3);
+    background-image: -webkit-linear-gradient(to bottom, #fcf3d8 30%, #eaafc8, #654ea3);
+    background-color: #654ea3;
+    height: 450px;
+    width: 450px;
+    border-radius: 100%;
+    position: absolute;
+    transform: translate(-50%, -50%);
+    left: 50%;
+    top: 50%;
+    overflow: hidden;
+}
+
+.mountain-range {
+    position: absolute;
+    width: 100%;
+    height: 100px;
+    top: 50%;
+    display: flex;
+    justify-content: center;
+    padding: 0;
+}
+
+.mountain-range .mountain:nth-child(1) {
+    width: 0;
+    height: 0;
+    margin-top: 32px;
+    margin-left: -60%;
+    border-left: 183px solid transparent;
+    border-right: 183px solid transparent;
+    border-bottom: 91.5px solid #75bbff;
+}
+
+.mountain-range .mountain:nth-child(2) {
+    width: 0;
+    height: 0;
+    margin-top: 27px;
+    margin-left: -60%;
+    border-left: 195px solid transparent;
+    border-right: 195px solid transparent;
+    border-bottom: 97.5px solid #75bbff;
+}
+
+.mountain-range .mountain:nth-child(3) {
+    width: 0;
+    height: 0;
+    margin-top: 24px;
+    margin-left: -60%;
+    border-left: 198px solid transparent;
+    border-right: 198px solid transparent;
+    border-bottom: 99px solid #75bbff;
+}
+
+.mountain-range .mountain:nth-child(4) {
+    width: 0;
+    height: 0;
+    margin-top: 35px;
+    margin-left: -60%;
+    border-left: 154px solid transparent;
+    border-right: 154px solid transparent;
+    border-bottom: 77px solid #75bbff;
+}
+
+.mountain-range .mountain:nth-child(5) {
+    width: 0;
+    height: 0;
+    margin-top: 20px;
+    margin-left: -60%;
+    border-left: 150px solid transparent;
+    border-right: 150px solid transparent;
+    border-bottom: 75px solid #75bbff;
+}
+
+.mountain-range .mountain:nth-child(6) {
+    width: 0;
+    height: 0;
+    margin-top: 33px;
+    margin-left: -60%;
+    border-left: 198px solid transparent;
+    border-right: 198px solid transparent;
+    border-bottom: 99px solid #75bbff;
+}
+
+.mountain-range .mountain:nth-child(7) {
+    width: 0;
+    height: 0;
+    margin-top: 37px;
+    margin-left: -60%;
+    border-left: 152px solid transparent;
+    border-right: 152px solid transparent;
+    border-bottom: 76px solid #75bbff;
+}
+
+.mountain-range .mountain:nth-child(8) {
+    width: 0;
+    height: 0;
+    margin-top: 27px;
+    margin-left: -60%;
+    border-left: 166px solid transparent;
+    border-right: 166px solid transparent;
+    border-bottom: 83px solid #75bbff;
+}
+
+.forest {
+    position: absolute;
+    width: 100%;
+    height: 100px;
+    top: 65%;
+}
+
+.forest .hill {
+    position: absolute;
+    background-color: #82d9a2;
+}
+
+.forest .hill:nth-child(1) {
+    width: 600px;
+    height: 300px;
+    top: -10px;
+    left: -150px;
+    border-top-left-radius: 300px 150px;
+    border-top-right-radius: 300px 150px;
+    border-bottom-left-radius: 300px 150px;
+    border-bottom-right-radius: 300px 150px;
+    box-shadow: inset 20px 30px 50px #2d79a0;
+}
+
+.forest .hill:nth-child(2) {
+    width: 500px;
+    height: 250px;
+    top: -5px;
+    left: 100px;
+    border-top-left-radius: 250px 125px;
+    border-top-right-radius: 250px 125px;
+    border-bottom-left-radius: 250px 125px;
+    border-bottom-right-radius: 250px 125px;
+    box-shadow: inset 20px 30px 50px #2d79a0;
+}
+
+.forest .hill:nth-child(3) {
+    width: 500px;
+    height: 250px;
+    top: 17px;
+    left: -180px;
+    border-top-left-radius: 250px 125px;
+    border-top-right-radius: 250px 125px;
+    border-bottom-left-radius: 250px 125px;
+    border-bottom-right-radius: 250px 125px;
+    box-shadow: inset 20px 30px 50px #2d79a0;
+}
+
+.grass {
+    position: absolute;
+    width: 600px;
+    height: 300px;
+    border-radius: 300px / 150px;
+    top: 75%;
+    left: -100px;
+    background: #82d9a2;
+    box-shadow: inset 20px 30px 60px #2d79a0;
+}
+
+.pokemon {
+    position: absolute;
+    width: 300px;
+    height: 110px;
+    left: calc(53% - 150px);
+}
+
+.poke {
+    position: absolute;
+    width: 100px;
+    height: 100px;
+}
+
+#bulbasaur:before {
+    content: '';
+    position: absolute;
+    width: 100px;
+    height: 50px;
+    background: rgba(0, 0, 0, 0.2);
+    border-radius: 100%;
+    top: 50px;
+    left: 15px;
+    transform: rotate(-15deg);
+}
+
+#bulbasaur .head {
+    position: absolute;
+    width: 60px;
+    height: 45px;
+    background-color: #00efd0;
+    border-top-left-radius: 50% 25px;
+    border-top-right-radius: 50% 25px;
+    border-bottom-left-radius: 18px;
+    border-bottom-right-radius: 18px;
+    left: 55px;
+}
+
+#bulbasaur .ear {
+    position: absolute;
+    height: 20px;
+    width: 23px;
+    background-color: #00efd0;
+    border-top-left-radius: 50px 90px;
+    border-top-right-radius: 50px 90px;
+    transform-origin: center bottom;
+}
+
+#bulbasaur .ear:nth-child(1) {
+    transform: rotate(-45deg);
+    left: 52px;
+    top: -5px;
+    animation: rotateLeftBulbEar 2s alternate infinite;
+}
+
+#bulbasaur .ear:nth-child(2) {
+    transform: rotate(45deg);
+    left: 87px;
+    top: -5px;
+    animation: rotateRightBulbEar 2s alternate infinite;
+}
+
+#bulbasaur .bulba-body {
+    position: relative;
+    width: 65px;
+    height: 55px;
+    background-color: #00efd0;
+    left: 42px;
+    top: 20px;
+    border-radius: 100%;
+    box-shadow: inset 10px -10px #00dbbe;
+    animation: bodyBreathe 2s alternate infinite;
+}
+
+#bulbasaur .bulba-body:before,
+#bulbasaur .bulba-body:after {
+    content: '';
+    position: absolute;
+}
+
+#bulbasaur .bulba-body:before {
+    width: 10px;
+    height: 13px;
+    top: 33px;
+    left: 8px;
+    background-color: #00c6ac;
+    border-bottom-left-radius: 100%;
+    border-bottom-right-radius: 30%;
+    border-top-right-radius: 30%;
+    border-top-left-radius: 50%;
+    transform: rotate(-45deg);
+}
+
+#bulbasaur .bulba-body:after {
+    width: 8px;
+    height: 8px;
+    top: 30px;
+    left: 53px;
+    background-color: #00dbbe;
+    border-bottom-left-radius: 100%;
+    border-bottom-right-radius: 30%;
+    border-top-right-radius: 30%;
+    border-top-left-radius: 50%;
+    transform: rotate(65deg);
+}
+
+#bulbasaur .leg {
+    position: absolute;
+    width: 20px;
+    height: 40px;
+    background-color: #00efd0;
+    border-bottom-left-radius: 35px 110%;
+    border-bottom-right-radius: 35px 110%;
+    box-shadow: inset 10px -20px #00d6ba;
+    left: 90px;
+    top: 30px;
+}
+
+#bulbasaur .bulbs {
+    position: absolute;
+    top: -1px;
+    width: 55px;
+    height: 55px;
+    left: 50px;
+    transform-origin: center;
+    transform: rotate(45deg);
+    z-index: 3;
+    animation: bulbaBreathe 2s alternate infinite;
+}
+
+#bulbasaur .bulbs:before,
+#bulbasaur .bulbs:after {
+    content: '';
+    position: absolute;
+    height: 45px;
+    width: 45px;
+    border-radius: 0 50% 50% 50%;
+}
+
+#bulbasaur .bulbs:before {
+    transform: translate(-5px, 10px) rotate(7deg);
+    background-color: #007061;
+}
+
+#bulbasaur .bulbs:after {
+    transform: translate(10px, -5px) rotate(-7deg);
+    background-color: #008a78;
+}
+
+#bulbasaur .bulb {
+    position: absolute;
+    top: 10px;
+    right: 2px;
+    left: 3px;
+    width: 90%;
+    height: 90%;
+    border-radius: 0 50% 100% 50%;
+    background-color: #00a38e;
+    z-index: 4;
+    box-shadow: inset 1px -5px #009480;
+}
+
+#pikachu {
+    left: -.1em;
+}
+
+#pikachu:before {
+    content: '';
+    position: absolute;
+    width: 60px;
+    height: 80px;
+    background: rgba(0, 0, 0, 0.2);
+    border-radius: 100%;
+    top: 50px;
+    left: 115px;
+    transform: rotate(40deg);
+}
+
+#pikachu .ear {
+    position: absolute;
+    height: 40px;
+    width: 18px;
+    background-color: #fff069;
+    border-top-left-radius: 60px 150px;
+    border-top-right-radius: 60px 150px;
+    transform-origin: center bottom;
+    overflow: hidden;
+}
+
+#pikachu .ear:nth-child(1) {
+    transform: rotate(-35deg);
+    left: 125px;
+    top: -35px;
+    animation: rotateLeftEar 1s alternate infinite;
+}
+
+#pikachu .ear:nth-child(1):after {
+    content: '';
+    position: absolute;
+    background-color: #444;
+    width: 150%;
+    height: 15px;
+    left: -8px;
+    transform: rotate(-30deg);
+}
+
+#pikachu .ear:nth-child(2) {
+    transform: rotate(50deg);
+    left: 157px;
+    top: -30px;
+    animation: rotateRightEar 1s alternate infinite;
+}
+
+#pikachu .ear:nth-child(2):after {
+    content: '';
+    position: absolute;
+    background-color: #444;
+    width: 150%;
+    height: 15px;
+    left: 2px;
+    transform: rotate(30deg);
+}
+
+#pikachu .hand {
+    position: absolute;
+    height: 38px;
+    width: 15px;
+    background-color: #fff069;
+    border-top-left-radius: 60px 150px;
+    border-top-right-radius: 60px 150px;
+    transform-origin: center bottom;
+    left: 123px;
+    top: 5px;
+    z-index: 5;
+    transform: rotate(-40deg);
+    animation: pikaPat .7s alternate infinite;
+}
+
+#pikachu .head {
+    position: absolute;
+    width: 60px;
+    height: 45px;
+    background-color: #fff069;
+    border-top-left-radius: 50% 25px;
+    border-top-right-radius: 50% 25px;
+    border-bottom-left-radius: 18px;
+    border-bottom-right-radius: 18px;
+    left: 120px;
+    width: 60px;
+    height: 55px;
+    top: -12px;
+}
+
+#pikachu .pika-body {
+    position: absolute;
+    width: 55px;
+    height: 55px;
+    background-color: #fff069;
+    left: 122px;
+    top: 20px;
+    border-radius: 22px;
+}
+
+#pikachu .pika-body:before,
+#pikachu .pika-body:after {
+    content: '';
+    position: absolute;
+    background-color: #9c5200;
+    width: 70%;
+    height: 7px;
+    left: 13px;
+    border-radius: 100%;
+}
+
+#pikachu .pika-body:before {
+    top: 15px;
+    z-index: 2;
+}
+
+#pikachu .pika-body:after {
+    top: 30px;
+}
+
+#pikachu .pika-tail {
+    position: absolute;
+    height: 25px;
+    width: 16px;
+    background: #9c5200;
+    border-radius: 5px;
+    left: 150px;
+    top: 40px;
+    transform-origin: bottom center;
+    transform: rotate(55deg);
+    box-shadow: -2px 2px 1px rgba(68, 68, 68, 0.2);
+    z-index: 2;
+    animation: rotateTail 2s alternate infinite;
+}
+
+#pikachu .pika-tail:before,
+#pikachu .pika-tail:after {
+    content: '';
+    transform-origin: bottom center;
+    position: absolute;
+    background-color: #fff069;
+}
+
+#pikachu .pika-tail:before {
+    height: 1.45rem;
+    width: 1.4rem;
+    top: -2rem;
+    left: 0.25rem;
+    transform: rotate(-90deg);
+    border: 1px solid #9c5200;
+    border-bottom-right-radius: 5px;
+    z-index: 4;
+    border-top: 1px solid #fff069;
+}
+
+#pikachu .pika-tail:after {
+    background: #fff069;
+    height: 3rem;
+    width: 2rem;
+    top: -2.8rem;
+    left: -2.5rem;
+    border-radius: 5px 5px 0 5px;
+    border: 1px solid #9c5200;
+}
+
+.moon {
+    position: absolute;
+    width: 75px;
+    height: 75px;
+    background: #FFEFBA;
+    background: -webkit-linear-gradient(135deg, #FFFFFF, #FFEFBA);
+    background: linear-gradient(135deg, #FFFFFF, #FFEFBA);
+    border: 5px solid #fffaf0;
+    top: 10%;
+    left: calc(50% - 45px);
+    padding: 0;
+    border-radius: 100%;
+}
+
+.moon li {
+    position: absolute;
+    border-radius: 100%;
+}
+
+.moon li:nth-child(1) {
+    background: #ffe691;
+    background: -webkit-linear-gradient(45deg, rgba(255, 250, 240, 0.1), #ffe691);
+    background: linear-gradient(45deg, rgba(255, 250, 240, 0.1), #ffe691);
+    width: 20px;
+    height: 20px;
+    left: 5px;
+    top: 30px;
+}
+
+.moon li:nth-child(2) {
+    background: #ffe691;
+    background: -webkit-linear-gradient(to left, rgba(255, 250, 240, 0.1), #ffe691);
+    background: linear-gradient(to left, rgba(255, 250, 240, 0.1), #ffe691);
+    width: 35px;
+    height: 35px;
+    left: 35px;
+    top: 35px;
+}
+
+.moon li:nth-child(3) {
+    background: #ffe691;
+    background: -webkit-linear-gradient(-120deg, rgba(255, 250, 240, 0.1), #ffe691);
+    background: linear-gradient(-120deg, rgba(255, 250, 240, 0.1), #ffe691);
+    width: 25px;
+    height: 25px;
+    left: 25px;
+    top: 5px;
+}
+
+.sparkles {
+    position: absolute;
+    width: 120%;
+    height: 190px;
+    top: 30%;
+    left: -45px;
+}
+
+.sparkles .sparkle {
+    position: absolute;
+    width: 11px;
+    height: 11px;
+    border-radius: 100%;
+}
+
+.sparkles .sparkle:nth-child(1) {
+    background-color: #e9fbff;
+    box-shadow: 0px 0px 10px #e9fbff;
+}
+
+.sparkles .sparkle:nth-child(2) {
+    background-color: #e9fbff;
+    box-shadow: 0px 0px 10px #e9fbff;
+}
+
+.sparkles .sparkle:nth-child(3) {
+    background-color: #fffce6;
+    box-shadow: 0px 0px 10px #fffce6;
+}
+
+.sparkles .sparkle:nth-child(4) {
+    background-color: #e9fbff;
+    box-shadow: 0px 0px 10px #e9fbff;
+}
+
+.sparkles .sparkle:nth-child(5) {
+    background-color: #f3ffe4;
+    box-shadow: 0px 0px 10px #f3ffe4;
+}
+
+.sparkles .sparkle:nth-child(6) {
+    background-color: #fffce6;
+    box-shadow: 0px 0px 10px #fffce6;
+}
+
+.sparkles .sparkle:nth-child(7) {
+    background-color: #f3ffe4;
+    box-shadow: 0px 0px 10px #f3ffe4;
+}
+
+.sparkles .sparkle:nth-child(8) {
+    background-color: #f3ffe4;
+    box-shadow: 0px 0px 10px #f3ffe4;
+}
+
+.sparkles .sparkle:nth-child(9) {
+    background-color: #ffeefc;
+    box-shadow: 0px 0px 10px #ffeefc;
+}
+
+.sparkles .sparkle:nth-child(10) {
+    background-color: #fffce6;
+    box-shadow: 0px 0px 10px #fffce6;
+}
+
+.sparkles .sparkle:nth-child(11) {
+    background-color: #ffeefc;
+    box-shadow: 0px 0px 10px #ffeefc;
+}
+
+.sparkles .sparkle:nth-child(12) {
+    background-color: #f3ffe4;
+    box-shadow: 0px 0px 10px #f3ffe4;
+}
+
+.sparkles .sparkle:nth-child(13) {
+    background-color: #e9fbff;
+    box-shadow: 0px 0px 10px #e9fbff;
+}
+
+.sparkles .sparkle:nth-child(14) {
+    background-color: #f3ffe4;
+    box-shadow: 0px 0px 10px #f3ffe4;
+}
+
+.sparkles .sparkle:nth-child(15) {
+    background-color: #ffeefc;
+    box-shadow: 0px 0px 10px #ffeefc;
+}
+
+.sparkles .sparkle:nth-child(16) {
+    background-color: #f3ffe4;
+    box-shadow: 0px 0px 10px #f3ffe4;
+}
+
+.sparkles .sparkle:nth-child(17) {
+    background-color: #f3ffe4;
+    box-shadow: 0px 0px 10px #f3ffe4;
+}
+
+.sparkles .sparkle:nth-child(18) {
+    background-color: #ffeefc;
+    box-shadow: 0px 0px 10px #ffeefc;
+}
+
+.sparkles .sparkle:nth-child(19) {
+    background-color: #f3ffe4;
+    box-shadow: 0px 0px 10px #f3ffe4;
+}
+
+.sparkles .sparkle:nth-child(20) {
+    background-color: #ffeefc;
+    box-shadow: 0px 0px 10px #ffeefc;
+}
+
+.sparkles .sparkle:nth-child(21) {
+    background-color: #fffce6;
+    box-shadow: 0px 0px 10px #fffce6;
+}
+
+.sparkles .sparkle:nth-child(22) {
+    background-color: #f3ffe4;
+    box-shadow: 0px 0px 10px #f3ffe4;
+}
+
+.sparkles .sparkle:nth-child(23) {
+    background-color: #e9fbff;
+    box-shadow: 0px 0px 10px #e9fbff;
+}
+
+.sparkles .sparkle:nth-child(24) {
+    background-color: #fffce6;
+    box-shadow: 0px 0px 10px #fffce6;
+}
+
+.sparkles .sparkle:nth-child(25) {
+    background-color: #e9fbff;
+    box-shadow: 0px 0px 10px #e9fbff;
+}
+
+.sparkles .sparkle:nth-child(26) {
+    background-color: #ffeefc;
+    box-shadow: 0px 0px 10px #ffeefc;
+}
+
+.sparkles .sparkle:nth-child(27) {
+    background-color: #fffce6;
+    box-shadow: 0px 0px 10px #fffce6;
+}
+
+.sparkles .sparkle:nth-child(28) {
+    background-color: #e9fbff;
+    box-shadow: 0px 0px 10px #e9fbff;
+}
+
+.sparkles .sparkle:nth-child(29) {
+    background-color: #e9fbff;
+    box-shadow: 0px 0px 10px #e9fbff;
+}
+
+.sparkles .sparkle:nth-child(30) {
+    background-color: #ffeefc;
+    box-shadow: 0px 0px 10px #ffeefc;
+}
+
+.sparkles .sparkle:nth-child(31) {
+    background-color: #f3ffe4;
+    box-shadow: 0px 0px 10px #f3ffe4;
+}
+
+.sparkles .sparkle:nth-child(32) {
+    background-color: #f3ffe4;
+    box-shadow: 0px 0px 10px #f3ffe4;
+}
+
+.one {
+    left: 0;
+    top: 0;
+}
+
+@keyframes flyOne {
+    95% {
+        opacity: 1;
+    }
+    100% {
+        transform: translate(270px, 75px) scale(0);
+        opacity: 0;
+    }
+}
+
+.one:nth-child(1) {
+    animation: flyOne 15s 0s infinite;
+}
+
+.one:nth-child(2) {
+    animation: flyOne 15s 6.44s infinite;
+}
+
+.one:nth-child(3) {
+    animation: flyOne 15s 12.88s infinite;
+}
+
+.one:nth-child(4) {
+    animation: flyOne 15s 19.32s infinite;
+}
+
+.two {
+    right: 0;
+}
+
+@keyframes flyTwo {
+    95% {
+        opacity: 1;
+    }
+    100% {
+        transform: translate(-270px, 75px) scale(0);
+        opacity: 0;
+    }
+}
+
+.two:nth-child(5) {
+    animation: flyTwo 21s 2.7s infinite;
+}
+
+.two:nth-child(6) {
+    animation: flyTwo 21s 8s infinite;
+}
+
+.two:nth-child(7) {
+    animation: flyTwo 21s 13.3s infinite;
+}
+
+.two:nth-child(8) {
+    animation: flyTwo 21s 18.6s infinite;
+}
+
+.three {
+    left: 0;
+    top: 100%;
+}
+
+@keyframes flyThree {
+    95% {
+        opacity: 1;
+    }
+    100% {
+        transform: translate(270px, -75px) scale(0);
+        opacity: 0;
+    }
+}
+
+.three:nth-child(9) {
+    animation: flyThree 17s 1.4s infinite;
+}
+
+.three:nth-child(10) {
+    animation: flyThree 17s 9.9s infinite;
+}
+
+.three:nth-child(11) {
+    animation: flyThree 17s 18.4s infinite;
+}
+
+.three:nth-child(12) {
+    animation: flyThree 17s 26.9s infinite;
+}
+
+.four {
+    right: 0;
+    top: 100%;
+}
+
+@keyframes flyFour {
+    95% {
+        opacity: 1;
+    }
+    100% {
+        transform: translate(-270px, -75px) scale(0);
+        opacity: 0;
+    }
+}
+
+.four:nth-child(13) {
+    animation: flyFour 25s 5.8s infinite;
+}
+
+.four:nth-child(14) {
+    animation: flyFour 25s 10.4s infinite;
+}
+
+.four:nth-child(15) {
+    animation: flyFour 25s 15s infinite;
+}
+
+.four:nth-child(16) {
+    animation: flyFour 25s 19.6s infinite;
+}
+
+.five {
+    left: 0;
+    top: 50%;
+}
+
+@keyframes flyFive {
+    95% {
+        opacity: 1;
+    }
+    100% {
+        transform: translate(270px, 0px) scale(0);
+        opacity: 0;
+    }
+}
+
+.five:nth-child(17) {
+    animation: flyFive 35s 8.7s infinite;
+}
+
+.five:nth-child(18) {
+    animation: flyFive 35s 14.4s infinite;
+}
+
+.five:nth-child(19) {
+    animation: flyFive 35s 20.1s infinite;
+}
+
+.five:nth-child(20) {
+    animation: flyFive 35s 25.8s infinite;
+}
+
+.six {
+    right: 0;
+    top: 50%;
+}
+
+@keyframes flySix {
+    95% {
+        opacity: 1;
+    }
+    100% {
+        transform: translate(-270px, 0px) scale(0);
+        opacity: 0;
+    }
+}
+
+.six:nth-child(21) {
+    animation: flySix 23.5s 10.6s infinite;
+}
+
+.six:nth-child(22) {
+    animation: flySix 23.5s 15s infinite;
+}
+
+.six:nth-child(23) {
+    animation: flySix 23.5s 19.4s infinite;
+}
+
+.six:nth-child(24) {
+    animation: flySix 23.5s 23.8s infinite;
+}
+
+.seven {
+    left: 0;
+    top: 25%;
+}
+
+@keyframes flySeven {
+    95% {
+        opacity: 1;
+    }
+    100% {
+        transform: translate(270px, 37px) scale(0);
+        opacity: 0;
+    }
+}
+
+.seven:nth-child(25) {
+    animation: flySeven 29s 5s infinite;
+}
+
+.seven:nth-child(26) {
+    animation: flySeven 29s 12.67s infinite;
+}
+
+.seven:nth-child(27) {
+    animation: flySeven 29s 20.34s infinite;
+}
+
+.seven:nth-child(28) {
+    animation: flySeven 29s 28.01s infinite;
+}
+
+.eight {
+    right: 0;
+    top: 25%;
+}
+
+@keyframes flyEight {
+    95% {
+        opacity: 1;
+    }
+    100% {
+        transform: translate(-270px, 37px) scale(0);
+        opacity: 0;
+    }
+}
+
+.eight:nth-child(29) {
+    animation: flyEight 28.5s 1.6s infinite;
+}
+
+.eight:nth-child(30) {
+    animation: flyEight 28.5s 5.34s infinite;
+}
+
+.eight:nth-child(31) {
+    animation: flyEight 28.5s 9.08s infinite;
+}
+
+.eight:nth-child(32) {
+    animation: flyEight 28.5s 12.82s infinite;
+}
+
+@keyframes pikaPat {
+    from {
+        transform: rotate(-40deg);
+    }
+    to {
+        transform: rotate(-50deg);
+    }
+}
+
+@keyframes rotateTail {
+    from {
+        transform: rotate(55deg);
+    }
+    to {
+        transform: rotate(65deg);
+    }
+}
+
+@keyframes rotateLeftEar {
+    from {
+        transform: rotate(-35deg);
+    }
+    to {
+        transform: rotate(-40deg);
+    }
+}
+
+@keyframes rotateRightEar {
+    from {
+        transform: rotate(50deg);
+    }
+    to {
+        transform: rotate(60deg);
+    }
+}
+
+@keyframes bulbaBreathe {
+    from {
+        transform: rotate(45deg) scale(1);
+    }
+    to {
+        transform: rotate(45deg) scale(1.01);
+    }
+}
+
+@keyframes bodyBreathe {
+    from {
+        transform: scale(1);
+    }
+    to {
+        transform: scale(1.05);
+    }
+}
+
+@keyframes rotateLeftBulbEar {
+    from {
+        transform: rotate(-45deg);
+    }
+    to {
+        transform: rotate(-55deg);
+    }
+}
+
+@keyframes rotateRightBulbEar {
+    from {
+        transform: rotate(45deg);
+    }
+    to {
+        transform: rotate(55deg);
+    }
+}

QMPlusVuePage/src/view/dashbord/component/animition.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="container">
+    <ul class="moon">
+      <li class="crater"></li>
+      <li class="crater"></li>
+      <li class="crater"></li>
+    </ul>
+    <ul class="mountain-range">
+      <li class="mountain"></li>
+      <li class="mountain"></li>
+      <li class="mountain"></li>
+      <li class="mountain"></li>
+      <li class="mountain"></li>
+      <li class="mountain"></li>
+      <li class="mountain"></li>
+      <li class="mountain"></li>
+      <li class="mountain"></li>
+      <li class="mountain"></li>
+      <li class="mountain"></li>
+    </ul>
+    <div class="mountain-range-mask"></div>
+    <ul class="forest">
+      <li class="hill"></li>
+      <li class="hill"></li>
+      <li class="hill"></li>
+    </ul>
+    <ul class="sparkles">
+      <li class="sparkle one"></li>
+      <li class="sparkle one"></li>
+      <li class="sparkle one"></li>
+      <li class="sparkle one"></li>
+      <li class="sparkle two"></li>
+      <li class="sparkle two"></li>
+      <li class="sparkle two"></li>
+      <li class="sparkle two"></li>
+      <li class="sparkle three"></li>
+      <li class="sparkle three"></li>
+      <li class="sparkle three"></li>
+      <li class="sparkle three"></li>
+      <li class="sparkle four"></li>
+      <li class="sparkle four"></li>
+      <li class="sparkle four"></li>
+      <li class="sparkle four"></li>
+      <li class="sparkle five"></li>
+      <li class="sparkle five"></li>
+      <li class="sparkle five"></li>
+      <li class="sparkle five"></li>
+      <li class="sparkle six"></li>
+      <li class="sparkle six"></li>
+      <li class="sparkle six"></li>
+      <li class="sparkle six"></li>
+      <li class="sparkle seven"></li>
+      <li class="sparkle seven"></li>
+      <li class="sparkle seven"></li>
+      <li class="sparkle seven"></li>
+      <li class="sparkle eight"></li>
+      <li class="sparkle eight"></li>
+      <li class="sparkle eight"></li>
+      <li class="sparkle eight"></li>
+    </ul>
+    <div class="grass">
+      <div class="pokemon">
+        <div class="poke" id="bulbasaur">
+          <div class="ear"></div>
+          <div class="ear"></div>
+          <div class="head"></div>
+          <div class="leg"></div>
+          <div class="bulba-body"></div>
+          <div class="bulbs">
+            <div class="bulb"></div>
+          </div>
+        </div>
+        <div class="poke" id="pikachu">
+          <div class="ear"></div>
+          <div class="ear"></div>
+          <div class="hand"></div>
+          <div class="pika-body"></div>
+          <div class="head"></div>
+          <div class="pika-tail"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'Animition'
+}
+</script>
+<style lang="scss">
+  @import '@/style/animition.scss';
+
+</style>

QMPlusVuePage/src/view/dashbord/index.vue

@@ -1,33 +1,46 @@
 <template>
-  <el-card class="box-card" shadow="hover">
-    <div class="clearfix" slot="header">
-      <span>用户信息</span>
-    </div>
-    <el-row>
-      <div class="fl-left left-mg-xs">
-        <el-avatar :size="120" :src="userInfo.headerImg" shape="square"></el-avatar>
+  <div>
+    <h2 style="text-align:center">
+    gin-vue-admin by 奇淼 And Spike
+    </h2>
+    <h4 style="text-align:center">
+      微信：shouzi_1994
+    </h4>
+    <!-- <el-card class="box-card" shadow="hover">
+      <div class="clearfix" slot="header">
+        <span>用户信息</span>
       </div>
-      <div class="fl-left left-mg-lg">
-        <div>用户ID：{{userInfo.uuid}}</div>
-        <div>用户昵称：{{userInfo.nickName}}</div>
-        <div>用户组：{{userInfo.authority&&userInfo.authority.authorityName}}</div>
-      </div>
-    </el-row>
-  </el-card>
+      <el-row>
+        <div class="fl-left left-mg-xs">
+          <el-avatar :size="120" :src="userInfo.headerImg" shape="square"></el-avatar>
+        </div>
+        <div class="fl-left left-mg-lg">
+          <div>用户ID：{{userInfo.uuid}}</div>
+          <div>用户昵称：{{userInfo.nickName}}</div>
+          <div>用户组：{{userInfo.authority&&userInfo.authority.authorityName}}</div>
+        </div>
+      </el-row>
+    </el-card> -->
+    <Animition />
+  </div>
 </template>
 
 <script>
 import { mapGetters } from 'vuex'
+import Animition from '@/view/dashbord/component/animition.vue'
 export default {
   name: 'Dashbord',
   computed: {
     ...mapGetters('user', ['userInfo'])
+  },
+  components: {
+    Animition
   }
 }
 </script>
 
 <style scoped>
-.box-card{
-    width: 600px;
+.box-card {
+  width: 600px;
 }
 </style>