SCHISANDRA/schisandra-cloud-album-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ login page

Browse Source
This commit is contained in:
landaiqing
2024-08-11 15:21:16 +08:00
parent 438965f2a2
commit ff6a4a5d09
54 changed files with 2731 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
src/components/BoxDog/BoxDog.vue Normal file
View File

@@ -0,0 +1,99 @@
<script lang="ts">
import {defineComponent} from 'vue';
export default defineComponent({
name: "BoxDog"
});
</script>
<template>
<body translate="no">
<div class="container">
<div class="box">
<div class="sign"></div>
</div>
<div class="dog">
<div class="dog-group">
<div class="tongue-open"></div>
<div class="body-group">
<div class="dog-box">
<div class="dog-box-sign">
<div class="content"></div>
</div>
<div class="bottom-shadow"></div>
<div class="top-left-shadow"></div>
</div>
<div class="tail-group">
<div class="tail">
<div class="tail">
<div class="tail">
<div class="tail">
<div class="tail">
<div class="tail">
<div class="tail last"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="dog-shape"></div>
</div>
<div class="head-group">
<div class="ear">
<div class="ear-container">
<div class="ear-left"></div>
</div>
</div>
<div class="head"></div>
<div class="ear right">
<div class="ear-container">
<div class="ear-right"></div>
</div>
</div>
<div class="face">
<div class="muzzle">
<div class="nose"></div>
<div class="mouth-close"></div>
<div class="mouth-open">
<div class="teeth"></div>
</div>
<div class="mouth-barks"></div>
</div>
<div class="eyes">
<div class="eye-left">
<div class="pupil"></div>
</div>
<div class="eye-right">
<div class="pupil"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="plant-group">
<div class="pot"></div>
<div class="plant">
<div class="stem">
<div class="leaf"></div>
<div class="leaf"></div>
<div class="leaf"></div>
<div class="leaf"></div>
<div class="leaf"></div>
</div>
</div>
</div>
<div class="shapes">
<div class="red-shape"></div>
<div class="blue-shape"></div>
<div class="yellow-shape"></div>
</div>
</div>
</body>
</template>
<style src="./index.scss" scoped>
</style>

1173
src/components/BoxDog/index.scss Normal file
View File

File diff suppressed because it is too large Load Diff

19
src/components/DynamicTitle/DynamicTitle.vue Normal file
View File

@@ -0,0 +1,19 @@
<script lang="ts">
import {defineComponent} from 'vue';
export default defineComponent({
name: "DynamicTitle"
});
</script>
<template>
<div>
<h1>
<span>五</span><span>味</span><span>子</span><span>云</span><span>相</span><span>册</span>
</h1>
</div>
</template>
<style src="./index.scss" scoped>
</style>

80
src/components/DynamicTitle/fonts.scss Normal file
View File

@@ -0,0 +1,80 @@
/* vietnamese */
@font-face {
font-family: 'Signika';
font-style: normal;
font-weight: 300;
src: url("@/assets/fonts/vEFO2_JTCgwQ5ejvMV0Ox_Kg1UwJ0tKfX6bOjM7sfA.woff2") format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Signika';
font-style: normal;
font-weight: 300;
src: url("@/assets/fonts/vEFO2_JTCgwQ5ejvMV0Ox_Kg1UwJ0tKfX6bPjM7sfA.woff2") format('woff2');
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Signika';
font-style: normal;
font-weight: 300;
src: url("@/assets/fonts/vEFO2_JTCgwQ5ejvMV0Ox_Kg1UwJ0tKfX6bBjM4.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
font-family: 'Signika';
font-style: normal;
font-weight: 600;
src: url("@/assets/fonts/vEFO2_JTCgwQ5ejvMV0Ox_Kg1UwJ0tKfX6bOjM7sfA.woff2") format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Signika';
font-style: normal;
font-weight: 600;
src: url("@/assets/fonts/vEFO2_JTCgwQ5ejvMV0Ox_Kg1UwJ0tKfX6bPjM7sfA.woff2") format('woff2');
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Signika';
font-style: normal;
font-weight: 600;
src: url("@/assets/fonts/vEFO2_JTCgwQ5ejvMV0Ox_Kg1UwJ0tKfX6bBjM4.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
font-family: 'Signika';
font-style: normal;
font-weight: 700;
src: url("@/assets/fonts/vEFO2_JTCgwQ5ejvMV0Ox_Kg1UwJ0tKfX6bOjM7sfA.woff2") format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Signika';
font-style: normal;
font-weight: 700;
src: url("@/assets/fonts/vEFO2_JTCgwQ5ejvMV0Ox_Kg1UwJ0tKfX6bPjM7sfA.woff2") format('woff2');
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Signika';
font-style: normal;
font-weight: 700;
src: url("@/assets/fonts/vEFO2_JTCgwQ5ejvMV0Ox_Kg1UwJ0tKfX6bBjM4.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

155
src/components/DynamicTitle/index.scss Normal file
View File

@@ -0,0 +1,155 @@
@import url("fonts.scss");
h1 {
font-size: 5em;
font: bold 2.5vw/1.6 'Signika', sans-serif;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
h1 span {
display: inline-block;
-webkit-animation: float .2s ease-in-out infinite;
animation: float .2s ease-in-out infinite;
}
@-webkit-keyframes float {
0%, 100% {
transform: none;
}
33% {
transform: translateY(-1px) rotate(-2deg);
}
66% {
transform: translateY(1px) rotate(2deg);
}
}
@keyframes float {
0%, 100% {
transform: none;
}
33% {
transform: translateY(-1px) rotate(-2deg);
}
66% {
transform: translateY(1px) rotate(2deg);
}
}
body:hover span {
-webkit-animation: bounce .6s;
animation: bounce .6s;
}
@-webkit-keyframes bounce {
0%, 100% {
transform: translate(0);
}
25% {
transform: rotateX(20deg) translateY(2px) rotate(-3deg);
}
50% {
transform: translateY(-20px) rotate(3deg) scale(1.1);
}
}
@keyframes bounce {
0%, 100% {
transform: translate(0);
}
25% {
transform: rotateX(20deg) translateY(2px) rotate(-3deg);
}
50% {
transform: translateY(-20px) rotate(3deg) scale(1.1);
}
}
span:nth-child(4n) {
color: hsl(50, 75%, 55%);
text-shadow: 1px 1px hsl(50, 75%, 45%), 2px 2px hsl(50, 45%, 45%), 3px 3px hsl(50, 45%, 45%), 4px 4px hsl(50, 75%, 45%);
}
span:nth-child(4n-1) {
color: hsl(135, 35%, 55%);
text-shadow: 1px 1px hsl(135, 35%, 45%), 2px 2px hsl(135, 35%, 45%), 3px 3px hsl(135, 35%, 45%), 4px 4px hsl(135, 35%, 45%);
}
span:nth-child(4n-2) {
color: hsl(155, 35%, 60%);
text-shadow: 1px 1px hsl(155, 25%, 50%), 2px 2px hsl(155, 25%, 50%), 3px 3px hsl(155, 25%, 50%), 4px 4px hsl(140, 25%, 50%);
}
span:nth-child(4n-3) {
color: hsl(30, 65%, 60%);
text-shadow: 1px 1px hsl(30, 45%, 50%), 2px 2px hsl(30, 45%, 50%), 3px 3px hsl(30, 45%, 50%), 4px 4px hsl(30, 45%, 50%);
}
h1 span:nth-child(2) {
-webkit-animation-delay: .05s;
animation-delay: .05s;
}
h1 span:nth-child(3) {
-webkit-animation-delay: .1s;
animation-delay: .1s;
}
h1 span:nth-child(4) {
-webkit-animation-delay: .15s;
animation-delay: .15s;
}
h1 span:nth-child(5) {
-webkit-animation-delay: .2s;
animation-delay: .2s;
}
h1 span:nth-child(6) {
-webkit-animation-delay: .25s;
animation-delay: .25s;
}
h1 span:nth-child(7) {
-webkit-animation-delay: .3s;
animation-delay: .3s;
}
h1 span:nth-child(8) {
-webkit-animation-delay: .35s;
animation-delay: .35s;
}
h1 span:nth-child(9) {
-webkit-animation-delay: .4s;
animation-delay: .4s;
}
h1 span:nth-child(10) {
-webkit-animation-delay: .45s;
animation-delay: .45s;
}
h1 span:nth-child(11) {
-webkit-animation-delay: .5s;
animation-delay: .5s;
}
h1 span:nth-child(12) {
-webkit-animation-delay: .55s;
animation-delay: .55s;
}
h1 span:nth-child(13) {
-webkit-animation-delay: .6s;
animation-delay: .6s;
}
h1 span:nth-child(14) {
-webkit-animation-delay: .65s;
animation-delay: .65s;
}