流星雨3D旋转相册

commit 2e2d2eca189df9215914d6cb33e85288d37ef012 Author: RuanJiaFeng Date: Tue Dec 29 15:02:09 2020 +0800 tijiao diff --git a/img/1.jpg b/img/1.jpg new file mode 100644 index 0000000..c50d96a Binary files /dev/null and b/img/1.jpg differ diff --git a/img/10.jpg b/img/10.jpg new file mode 100644 index 0000000..355a5c3 Binary files /dev/null and b/img/10.jpg differ diff --git a/img/2.jpg b/img/2.jpg new file mode 100644 index 0000000..885ec9a Binary files /dev/null and b/img/2.jpg differ diff --git a/img/3.jpg b/img/3.jpg new file mode 100644 index 0000000..ed77d35 Binary files /dev/null and b/img/3.jpg differ diff --git a/img/4.jpg b/img/4.jpg new file mode 100644 index 0000000..35f8fa8 Binary files /dev/null and b/img/4.jpg differ diff --git a/img/5.jpg b/img/5.jpg new file mode 100644 index 0000000..a06a1b8 Binary files /dev/null and b/img/5.jpg differ diff --git a/img/6.jpg b/img/6.jpg new file mode 100644 index 0000000..9afbc29 Binary files /dev/null and b/img/6.jpg differ diff --git a/img/7.jpg b/img/7.jpg new file mode 100644 index 0000000..a99e7dc Binary files /dev/null and b/img/7.jpg differ diff --git a/img/8.jpg b/img/8.jpg new file mode 100644 index 0000000..1ec35bf Binary files /dev/null and b/img/8.jpg differ diff --git a/img/9.jpg b/img/9.jpg new file mode 100644 index 0000000..7148dec Binary files /dev/null and b/img/9.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..7ecd322 --- /dev/null +++ b/index.html @@ -0,0 +1,471 @@ + + + + + 流星雨3D旋转相册 + + + + +

+ +

+ + + + + + + + diff --git a/renxi.mp3 b/renxi.mp3 new file mode 100644 index 0000000..369728e Binary files /dev/null and b/renxi.mp3 differ diff --git a/style.css b/style.css new file mode 100644 index 0000000..c2f7d0b --- /dev/null +++ b/style.css @@ -0,0 +1,413 @@ +/* 流星css */ +:root { + --primary-color: hsl(196, 78%, 61%); + --secondary-color: hsl(217, 15%, 83%); + --success-color: hsl(165, 58%, 55%); + --info-color: hsl(214, 79%, 65%); + --warning-color: hsl(43, 100%, 66%); + --danger-color: hsl(354, 81%, 63%); + --primary-color-darker: hsl(196, 68%, 54%); + --secondary-color-darker: hsl(215, 13%, 70%); + --success-color-darker: hsl(165, 55%, 48%); + --info-color-darker: hsl(214, 68%, 58%); + --warning-color-darker: hsl(39, 97%, 62%); + --danger-color-darker: hsl(354, 67%, 56%); + --primary-color-lighter: hsl(196, 78%, 81%); + --secondary-color-lighter: hsl(214, 16%, 92%); + --success-color-lighter: hsl(165, 58%, 75%); + --info-color-lighter: hsl(214, 79%, 85%); + --warning-color-lighter: hsl(43, 100%, 86%); + --danger-color-lighter: hsl(354, 81%, 83%); + --secondary-color-darkest: hsl(215, 11%, 30%); + --secondary-color-lightest: hsl(220, 1%, 98%); +} + +body { + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + background: radial-gradient(ellipse at bottom, #0d1d31 0%, #0c0d13 100%); + overflow: hidden; +} + +.stars { + z-index: 9999; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 120%; + transform: rotate(-45deg); +} + +.star { + --star-color: var(--primary-color); + --star-tail-length: 6em; + --star-tail-height: 2px; + --star-width: calc(var(--star-tail-length) / 6); + --fall-duration: 9s; + --tail-fade-duration: var(--fall-duration); + position: absolute; + top: var(--top-offset); + left: 0; + width: var(--star-tail-length); + height: var(--star-tail-height); + color: var(--star-color); + background: linear-gradient(45deg, currentColor, transparent); + border-radius: 50%; + filter: drop-shadow(0 0 6px currentColor); + transform: translate3d(104em, 0, 0); + animation: fall var(--fall-duration) var(--fall-delay) linear infinite, + tail-fade var(--tail-fade-duration) var(--fall-delay) ease-out infinite; +} +@media screen and (max-width: 750px) { + .star { + animation: fall var(--fall-duration) var(--fall-delay) linear infinite; + } +} +.star:nth-child(1) { + --star-tail-length: 6.07em; + --top-offset: 18.71vh; + --fall-duration: 6.295s; + --fall-delay: 8.613s; +} +.star:nth-child(2) { + --star-tail-length: 5.87em; + --top-offset: 91.61vh; + --fall-duration: 6.744s; + --fall-delay: 5.299s; +} +.star:nth-child(3) { + --star-tail-length: 7.01em; + --top-offset: 66.77vh; + --fall-duration: 7.356s; + --fall-delay: 8.793s; +} +.star:nth-child(4) { + --star-tail-length: 5.54em; + --top-offset: 3.44vh; + --fall-duration: 11.193s; + --fall-delay: 7.602s; +} +.star:nth-child(5) { + --star-tail-length: 7.37em; + --top-offset: 30.74vh; + --fall-duration: 7.323s; + --fall-delay: 5.879s; +} +.star:nth-child(6) { + --star-tail-length: 5.74em; + --top-offset: 96.44vh; + --fall-duration: 6.375s; + --fall-delay: 6.784s; +} +.star:nth-child(7) { + --star-tail-length: 6.75em; + --top-offset: 53.58vh; + --fall-duration: 11.154s; + --fall-delay: 2.304s; +} +.star:nth-child(8) { + --star-tail-length: 6.93em; + --top-offset: 45.4vh; + --fall-duration: 9.916s; + --fall-delay: 1.499s; +} +.star:nth-child(9) { + --star-tail-length: 6.79em; + --top-offset: 4.57vh; + --fall-duration: 6.47s; + --fall-delay: 3.746s; +} +.star:nth-child(10) { + --star-tail-length: 7.16em; + --top-offset: 87.24vh; + --fall-duration: 10.807s; + --fall-delay: 3.084s; +} +.star:nth-child(11) { + --star-tail-length: 5.29em; + --top-offset: 16.51vh; + --fall-duration: 8.055s; + --fall-delay: 1.882s; +} +.star:nth-child(12) { + --star-tail-length: 5.48em; + --top-offset: 88.17vh; + --fall-duration: 6.439s; + --fall-delay: 4.72s; +} +.star:nth-child(13) { + --star-tail-length: 5.42em; + --top-offset: 99.99vh; + --fall-duration: 10.565s; + --fall-delay: 9.969s; +} +.star:nth-child(14) { + --star-tail-length: 6.45em; + --top-offset: 66.41vh; + --fall-duration: 6.242s; + --fall-delay: 4.135s; +} +.star:nth-child(15) { + --star-tail-length: 6.1em; + --top-offset: 33.08vh; + --fall-duration: 9.203s; + --fall-delay: 5.222s; +} +.star:nth-child(16) { + --star-tail-length: 5.31em; + --top-offset: 71.71vh; + --fall-duration: 8.738s; + --fall-delay: 0.224s; +} +.star:nth-child(17) { + --star-tail-length: 5.18em; + --top-offset: 96.06vh; + --fall-duration: 11.629s; + --fall-delay: 4.021s; +} +.star:nth-child(18) { + --star-tail-length: 6.82em; + --top-offset: 79.65vh; + --fall-duration: 6.07s; + --fall-delay: 0.699s; +} +.star:nth-child(19) { + --star-tail-length: 7.45em; + --top-offset: 50.02vh; + --fall-duration: 9.895s; + --fall-delay: 5.542s; +} +.star:nth-child(20) { + --star-tail-length: 5.29em; + --top-offset: 81.84vh; + --fall-duration: 6.928s; + --fall-delay: 2.042s; +} +.star:nth-child(21) { + --star-tail-length: 5.99em; + --top-offset: 42.27vh; + --fall-duration: 7.946s; + --fall-delay: 4.317s; +} +.star:nth-child(22) { + --star-tail-length: 6.49em; + --top-offset: 0.55vh; + --fall-duration: 10.794s; + --fall-delay: 9.025s; +} +.star:nth-child(23) { + --star-tail-length: 6.42em; + --top-offset: 42vh; + --fall-duration: 8.135s; + --fall-delay: 6.336s; +} +.star:nth-child(24) { + --star-tail-length: 5.07em; + --top-offset: 56.93vh; + --fall-duration: 11.157s; + --fall-delay: 2.912s; +} +.star:nth-child(25) { + --star-tail-length: 6.56em; + --top-offset: 65.69vh; + --fall-duration: 9.641s; + --fall-delay: 0.982s; +} +.star:nth-child(26) { + --star-tail-length: 6.5em; + --top-offset: 80.77vh; + --fall-duration: 6.756s; + --fall-delay: 5.443s; +} +.star:nth-child(27) { + --star-tail-length: 6.01em; + --top-offset: 30.77vh; + --fall-duration: 7.305s; + --fall-delay: 8.435s; +} +.star:nth-child(28) { + --star-tail-length: 6.74em; + --top-offset: 57.09vh; + --fall-duration: 10.082s; + --fall-delay: 9.389s; +} +.star:nth-child(29) { + --star-tail-length: 6.09em; + --top-offset: 65.11vh; + --fall-duration: 6.587s; + --fall-delay: 6.4s; +} +.star:nth-child(30) { + --star-tail-length: 7.49em; + --top-offset: 92.88vh; + --fall-duration: 10.762s; + --fall-delay: 2.241s; +} +.star:nth-child(31) { + --star-tail-length: 5.77em; + --top-offset: 97.66vh; + --fall-duration: 10.42s; + --fall-delay: 4.185s; +} +.star:nth-child(32) { + --star-tail-length: 7.1em; + --top-offset: 48.23vh; + --fall-duration: 9.418s; + --fall-delay: 0.79s; +} +.star:nth-child(33) { + --star-tail-length: 5.06em; + --top-offset: 70.09vh; + --fall-duration: 6.436s; + --fall-delay: 2.047s; +} +.star:nth-child(34) { + --star-tail-length: 5.35em; + --top-offset: 47.6vh; + --fall-duration: 8.384s; + --fall-delay: 4.431s; +} +.star:nth-child(35) { + --star-tail-length: 6.5em; + --top-offset: 35.5vh; + --fall-duration: 9.579s; + --fall-delay: 2.685s; +} +.star:nth-child(36) { + --star-tail-length: 5.31em; + --top-offset: 78.83vh; + --fall-duration: 10.381s; + --fall-delay: 0.631s; +} +.star:nth-child(37) { + --star-tail-length: 7.45em; + --top-offset: 75.7vh; + --fall-duration: 6.924s; + --fall-delay: 6.499s; +} +.star:nth-child(38) { + --star-tail-length: 6.71em; + --top-offset: 50.78vh; + --fall-duration: 8.385s; + --fall-delay: 6.098s; +} +.star:nth-child(39) { + --star-tail-length: 5.03em; + --top-offset: 36.46vh; + --fall-duration: 9.385s; + --fall-delay: 6.252s; +} +.star:nth-child(40) { + --star-tail-length: 5.58em; + --top-offset: 86.88vh; + --fall-duration: 7.07s; + --fall-delay: 0.626s; +} +.star:nth-child(41) { + --star-tail-length: 5.75em; + --top-offset: 16.67vh; + --fall-duration: 8.02s; + --fall-delay: 1.497s; +} +.star:nth-child(42) { + --star-tail-length: 7.08em; + --top-offset: 56.93vh; + --fall-duration: 9.208s; + --fall-delay: 5.358s; +} +.star:nth-child(43) { + --star-tail-length: 5.6em; + --top-offset: 73.67vh; + --fall-duration: 6.207s; + --fall-delay: 3.243s; +} +.star:nth-child(44) { + --star-tail-length: 5.45em; + --top-offset: 25.2vh; + --fall-duration: 10.599s; + --fall-delay: 8.583s; +} +.star:nth-child(45) { + --star-tail-length: 7.14em; + --top-offset: 56.77vh; + --fall-duration: 11.523s; + --fall-delay: 9.923s; +} +.star:nth-child(46) { + --star-tail-length: 5.22em; + --top-offset: 10.01vh; + --fall-duration: 8.072s; + --fall-delay: 0.293s; +} +.star:nth-child(47) { + --star-tail-length: 7.44em; + --top-offset: 87.25vh; + --fall-duration: 9.226s; + --fall-delay: 2.065s; +} +.star:nth-child(48) { + --star-tail-length: 7.43em; + --top-offset: 68.32vh; + --fall-duration: 11.421s; + --fall-delay: 7.182s; +} +.star:nth-child(49) { + --star-tail-length: 5.68em; + --top-offset: 56.42vh; + --fall-duration: 9.508s; + --fall-delay: 7.669s; +} +.star:nth-child(50) { + --star-tail-length: 5.37em; + --top-offset: 93.45vh; + --fall-duration: 10.222s; + --fall-delay: 4.175s; +} +.star::before, +.star::after { + position: absolute; + content: ""; + top: 0; + left: calc(var(--star-width) / -2); + width: var(--star-width); + height: 100%; + background: linear-gradient(45deg, transparent, currentColor, transparent); + border-radius: inherit; + animation: blink 2s linear infinite; +} +.star::before { + transform: rotate(45deg); +} +.star::after { + transform: rotate(-45deg); +} + +@keyframes fall { + to { + transform: translate3d(-30em, 0, 0); + } +} +@keyframes tail-fade { + 0%, + 50% { + width: var(--star-tail-length); + opacity: 1; + } + 70%, + 80% { + width: 0; + opacity: 0.6; + } + 100% { + width: 0; + opacity: 0; + } +} +@keyframes blink { + 50% { + opacity: 0.6; + } +}