让她/他心动的告白，页面制作（9个页面+链接+代码，原生HTML+CSS+JS实现）

效果1

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>universe love</title>
</head>
<body>
<link href='https://fonts.googleapis.com/css?family=Nothing+You+Could+Do' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Playfair+Display&text=°//.'rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Codystar' rel='stylesheet' type='text/css'><link rel="stylesheet" href="../css/index.css"><p>In our lifetime, we will see the <span>u</span><span>n</span><span>i</span><span>v</span><span>e</span><span>r</span><span>s</span><span>e</span>; from a nebula of happiness to a galaxy of <span>l</span><span>o</span><span>v</span><span>e</span>. °//.</p>
<ul class="stars"><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
</ul>
<div class="universe"><div class="earth"></div><div class="heart"></div><div class="cutie girl"></div><div class="cutie boy"></div>
</div>
</body>
</html>
@charset "UTF-8";
p {margin: 0 auto;max-width: 22em;padding: 1em;font-size: 4vmin;text-align: justify; }span:nth-of-type(1) {animation: shine-1 4s infinite linear;text-shadow: 0 0 0.25em #33ff96, 0 0 0.5em #33ff96, 0 0 0.75em #33ff96; }
span:nth-of-type(2) {animation: shine-2 4s infinite linear;text-shadow: 0 0 0.25em #ccff33, 0 0 0.5em #ccff33, 0 0 0.75em #ccff33; }
span:nth-of-type(3) {animation: shine-3 4s infinite linear;text-shadow: 0 0 0.25em #ffdd33, 0 0 0.5em #ffdd33, 0 0 0.75em #ffdd33; }
span:nth-of-type(4) {animation: shine-4 4s infinite linear;text-shadow: 0 0 0.25em #33b1ff, 0 0 0.5em #33b1ff, 0 0 0.75em #33b1ff; }
span:nth-of-type(5) {animation: shine-5 4s infinite linear;text-shadow: 0 0 0.25em #44ff33, 0 0 0.5em #44ff33, 0 0 0.75em #44ff33; }
span:nth-of-type(6) {animation: shine-6 4s infinite linear;text-shadow: 0 0 0.25em #333aff, 0 0 0.5em #333aff, 0 0 0.75em #333aff; }
span:nth-of-type(7) {animation: shine-7 4s infinite linear;text-shadow: 0 0 0.25em #33c9ff, 0 0 0.5em #33c9ff, 0 0 0.75em #33c9ff; }
span:nth-of-type(8) {animation: shine-8 4s infinite linear;text-shadow: 0 0 0.25em #ff8b33, 0 0 0.5em #ff8b33, 0 0 0.75em #ff8b33; }
span:nth-of-type(9) {animation: shine-9 4s infinite linear;text-shadow: 0 0 0.25em #33ffcf, 0 0 0.5em #33ffcf, 0 0 0.75em #33ffcf; }
span:nth-of-type(10) {animation: shine-10 4s infinite linear;text-shadow: 0 0 0.25em #ff5833, 0 0 0.5em #ff5833, 0 0 0.75em #ff5833; }
span:nth-of-type(11) {animation: shine-11 4s infinite linear;text-shadow: 0 0 0.25em #33b4ff, 0 0 0.5em #33b4ff, 0 0 0.75em #33b4ff; }
span:nth-of-type(12) {animation: shine-12 4s infinite linear;text-shadow: 0 0 0.25em #d3ff33, 0 0 0.5em #d3ff33, 0 0 0.75em #d3ff33; }@keyframes shine-1 {10% {text-shadow: 0 0 0.25em #ff6333, 0 0 0.5em #ff6333, 0 0 0.75em #ff6333; }20% {text-shadow: 0 0 0.25em #33adff, 0 0 0.5em #33adff, 0 0 0.75em #33adff; }30% {text-shadow: 0 0 0.25em #ffe733, 0 0 0.5em #ffe733, 0 0 0.75em #ffe733; }40% {text-shadow: 0 0 0.25em #33ff81, 0 0 0.5em #33ff81, 0 0 0.75em #33ff81; }50% {text-shadow: 0 0 0.25em #4e33ff, 0 0 0.5em #4e33ff, 0 0 0.75em #4e33ff; }60% {text-shadow: 0 0 0.25em #ffbe33, 0 0 0.5em #ffbe33, 0 0 0.75em #ffbe33; }70% {text-shadow: 0 0 0.25em #33ff5c, 0 0 0.5em #33ff5c, 0 0 0.75em #33ff5c; }80% {text-shadow: 0 0 0.25em #7eff33, 0 0 0.5em #7eff33, 0 0 0.75em #7eff33; }90% {text-shadow: 0 0 0.25em #96ff33, 0 0 0.5em #96ff33, 0 0 0.75em #96ff33; } }
@keyframes shine-2 {10% {text-shadow: 0 0 0.25em #3347ff, 0 0 0.5em #3347ff, 0 0 0.75em #3347ff; }20% {text-shadow: 0 0 0.25em #33ffeb, 0 0 0.5em #33ffeb, 0 0 0.75em #33ffeb; }30% {text-shadow: 0 0 0.25em #33ff96, 0 0 0.5em #33ff96, 0 0 0.75em #33ff96; }40% {text-shadow: 0 0 0.25em #ebff33, 0 0 0.5em #ebff33, 0 0 0.75em #ebff33; }50% {text-shadow: 0 0 0.25em #ccff33, 0 0 0.5em #ccff33, 0 0 0.75em #ccff33; }60% {text-shadow: 0 0 0.25em #ff9c33, 0 0 0.5em #ff9c33, 0 0 0.75em #ff9c33; }70% {text-shadow: 0 0 0.25em #c5ff33, 0 0 0.5em #c5ff33, 0 0 0.75em #c5ff33; }80% {text-shadow: 0 0 0.25em #69ff33, 0 0 0.5em #69ff33, 0 0 0.75em #69ff33; }90% {text-shadow: 0 0 0.25em #33c9ff, 0 0 0.5em #33c9ff, 0 0 0.75em #33c9ff; } }
@keyframes shine-3 {10% {text-shadow: 0 0 0.25em #33beff, 0 0 0.5em #33beff, 0 0 0.75em #33beff; }20% {text-shadow: 0 0 0.25em #33ff85, 0 0 0.5em #33ff85, 0 0 0.75em #33ff85; }30% {text-shadow: 0 0 0.25em #33fff8, 0 0 0.5em #33fff8, 0 0 0.75em #33fff8; }40% {text-shadow: 0 0 0.25em #b1ff33, 0 0 0.5em #b1ff33, 0 0 0.75em #b1ff33; }50% {text-shadow: 0 0 0.25em #33beff, 0 0 0.5em #33beff, 0 0 0.75em #33beff; }60% {text-shadow: 0 0 0.25em #6dff33, 0 0 0.5em #6dff33, 0 0 0.75em #6dff33; }70% {text-shadow: 0 0 0.25em #33ffa7, 0 0 0.5em #33ffa7, 0 0 0.75em #33ffa7; }80% {text-shadow: 0 0 0.25em #33ff44, 0 0 0.5em #33ff44, 0 0 0.75em #33ff44; }90% {text-shadow: 0 0 0.25em #338bff, 0 0 0.5em #338bff, 0 0 0.75em #338bff; } }
@keyframes shine-4 {10% {text-shadow: 0 0 0.25em #5cff33, 0 0 0.5em #5cff33, 0 0 0.75em #5cff33; }20% {text-shadow: 0 0 0.25em #ffe033, 0 0 0.5em #ffe033, 0 0 0.75em #ffe033; }30% {text-shadow: 0 0 0.25em #33ffe0, 0 0 0.5em #33ffe0, 0 0 0.75em #33ffe0; }40% {text-shadow: 0 0 0.25em #33f8ff, 0 0 0.5em #33f8ff, 0 0 0.75em #33f8ff; }50% {text-shadow: 0 0 0.25em #6333ff, 0 0 0.5em #6333ff, 0 0 0.75em #6333ff; }60% {text-shadow: 0 0 0.25em #33ffe7, 0 0 0.5em #33ffe7, 0 0 0.75em #33ffe7; }70% {text-shadow: 0 0 0.25em #33a3ff, 0 0 0.5em #33a3ff, 0 0 0.75em #33a3ff; }80% {text-shadow: 0 0 0.25em #66ff33, 0 0 0.5em #66ff33, 0 0 0.75em #66ff33; }90% {text-shadow: 0 0 0.25em #33ffb8, 0 0 0.5em #33ffb8, 0 0 0.75em #33ffb8; } }
@keyframes shine-5 {10% {text-shadow: 0 0 0.25em #33b1ff, 0 0 0.5em #33b1ff, 0 0 0.75em #33b1ff; }20% {text-shadow: 0 0 0.25em #33ff74, 0 0 0.5em #33ff74, 0 0 0.75em #33ff74; }30% {text-shadow: 0 0 0.25em #5c33ff, 0 0 0.5em #5c33ff, 0 0 0.75em #5c33ff; }40% {text-shadow: 0 0 0.25em #c2ff33, 0 0 0.5em #c2ff33, 0 0 0.75em #c2ff33; }50% {text-shadow: 0 0 0.25em #33d6ff, 0 0 0.5em #33d6ff, 0 0 0.75em #33d6ff; }60% {text-shadow: 0 0 0.25em #5533ff, 0 0 0.5em #5533ff, 0 0 0.75em #5533ff; }70% {text-shadow: 0 0 0.25em #33ff96, 0 0 0.5em #33ff96, 0 0 0.75em #33ff96; }80% {text-shadow: 0 0 0.25em #ff5833, 0 0 0.5em #ff5833, 0 0 0.75em #ff5833; }90% {text-shadow: 0 0 0.25em #44ff33, 0 0 0.5em #44ff33, 0 0 0.75em #44ff33; } }
@keyframes shine-6 {10% {text-shadow: 0 0 0.25em #33ffcc, 0 0 0.5em #33ffcc, 0 0 0.75em #33ffcc; }20% {text-shadow: 0 0 0.25em #c2ff33, 0 0 0.5em #c2ff33, 0 0 0.75em #c2ff33; }30% {text-shadow: 0 0 0.25em #fff533, 0 0 0.5em #fff533, 0 0 0.75em #fff533; }40% {text-shadow: 0 0 0.25em #ff7e33, 0 0 0.5em #ff7e33, 0 0 0.75em #ff7e33; }50% {text-shadow: 0 0 0.25em #6633ff, 0 0 0.5em #6633ff, 0 0 0.75em #6633ff; }60% {text-shadow: 0 0 0.25em #b8ff33, 0 0 0.5em #b8ff33, 0 0 0.75em #b8ff33; }70% {text-shadow: 0 0 0.25em #3344ff, 0 0 0.5em #3344ff, 0 0 0.75em #3344ff; }80% {text-shadow: 0 0 0.25em #33ff81, 0 0 0.5em #33ff81, 0 0 0.75em #33ff81; }90% {text-shadow: 0 0 0.25em #ffdd33, 0 0 0.5em #ffdd33, 0 0 0.75em #ffdd33; } }
@keyframes shine-7 {10% {text-shadow: 0 0 0.25em #33ffe4, 0 0 0.5em #33ffe4, 0 0 0.75em #33ffe4; }20% {text-shadow: 0 0 0.25em #ffa733, 0 0 0.5em #ffa733, 0 0 0.75em #ffa733; }30% {text-shadow: 0 0 0.25em #33ff74, 0 0 0.5em #33ff74, 0 0 0.75em #33ff74; }40% {text-shadow: 0 0 0.25em #ffbb33, 0 0 0.5em #ffbb33, 0 0 0.75em #ffbb33; }50% {text-shadow: 0 0 0.25em #d6ff33, 0 0 0.5em #d6ff33, 0 0 0.75em #d6ff33; }60% {text-shadow: 0 0 0.25em #ff8533, 0 0 0.5em #ff8533, 0 0 0.75em #ff8533; }70% {text-shadow: 0 0 0.25em #ffa733, 0 0 0.5em #ffa733, 0 0 0.75em #ffa733; }80% {text-shadow: 0 0 0.25em #9cff33, 0 0 0.5em #9cff33, 0 0 0.75em #9cff33; }90% {text-shadow: 0 0 0.25em #ff4433, 0 0 0.5em #ff4433, 0 0 0.75em #ff4433; } }
@keyframes shine-8 {10% {text-shadow: 0 0 0.25em #ff8533, 0 0 0.5em #ff8533, 0 0 0.75em #ff8533; }20% {text-shadow: 0 0 0.25em #9cff33, 0 0 0.5em #9cff33, 0 0 0.75em #9cff33; }30% {text-shadow: 0 0 0.25em #33f5ff, 0 0 0.5em #33f5ff, 0 0 0.75em #33f5ff; }40% {text-shadow: 0 0 0.25em #ffb833, 0 0 0.5em #ffb833, 0 0 0.75em #ffb833; }50% {text-shadow: 0 0 0.25em #ffcc33, 0 0 0.5em #ffcc33, 0 0 0.75em #ffcc33; }60% {text-shadow: 0 0 0.25em #3381ff, 0 0 0.5em #3381ff, 0 0 0.75em #3381ff; }70% {text-shadow: 0 0 0.25em #33ff8f, 0 0 0.5em #33ff8f, 0 0 0.75em #33ff8f; }80% {text-shadow: 0 0 0.25em #ff6333, 0 0 0.5em #ff6333, 0 0 0.75em #ff6333; }90% {text-shadow: 0 0 0.25em #33ffe0, 0 0 0.5em #33ffe0, 0 0 0.75em #33ffe0; } }
@keyframes shine-9 {10% {text-shadow: 0 0 0.25em #333dff, 0 0 0.5em #333dff, 0 0 0.75em #333dff; }20% {text-shadow: 0 0 0.25em #33ffa0, 0 0 0.5em #33ffa0, 0 0 0.75em #33ffa0; }30% {text-shadow: 0 0 0.25em #47ff33, 0 0 0.5em #47ff33, 0 0 0.75em #47ff33; }40% {text-shadow: 0 0 0.25em #ff4733, 0 0 0.5em #ff4733, 0 0 0.75em #ff4733; }50% {text-shadow: 0 0 0.25em #41ff33, 0 0 0.5em #41ff33, 0 0 0.75em #41ff33; }60% {text-shadow: 0 0 0.25em #3370ff, 0 0 0.5em #3370ff, 0 0 0.75em #3370ff; }70% {text-shadow: 0 0 0.25em #333dff, 0 0 0.5em #333dff, 0 0 0.75em #333dff; }80% {text-shadow: 0 0 0.25em #33c5ff, 0 0 0.5em #33c5ff, 0 0 0.75em #33c5ff; }90% {text-shadow: 0 0 0.25em #33eeff, 0 0 0.5em #33eeff, 0 0 0.75em #33eeff; } }
@keyframes shine-10 {10% {text-shadow: 0 0 0.25em #8bff33, 0 0 0.5em #8bff33, 0 0 0.75em #8bff33; }20% {text-shadow: 0 0 0.25em #ff6333, 0 0 0.5em #ff6333, 0 0 0.75em #ff6333; }30% {text-shadow: 0 0 0.25em #ff7e33, 0 0 0.5em #ff7e33, 0 0 0.75em #ff7e33; }40% {text-shadow: 0 0 0.25em #8bff33, 0 0 0.5em #8bff33, 0 0 0.75em #8bff33; }50% {text-shadow: 0 0 0.25em #e7ff33, 0 0 0.5em #e7ff33, 0 0 0.75em #e7ff33; }60% {text-shadow: 0 0 0.25em #ffb833, 0 0 0.5em #ffb833, 0 0 0.75em #ffb833; }70% {text-shadow: 0 0 0.25em #5f33ff, 0 0 0.5em #5f33ff, 0 0 0.75em #5f33ff; }80% {text-shadow: 0 0 0.25em #33ffa7, 0 0 0.5em #33ffa7, 0 0 0.75em #33ffa7; }90% {text-shadow: 0 0 0.25em #ff4433, 0 0 0.5em #ff4433, 0 0 0.75em #ff4433; } }
@keyframes shine-11 {10% {text-shadow: 0 0 0.25em #cfff33, 0 0 0.5em #cfff33, 0 0 0.75em #cfff33; }20% {text-shadow: 0 0 0.25em #33ffc5, 0 0 0.5em #33ffc5, 0 0 0.75em #33ffc5; }30% {text-shadow: 0 0 0.25em #ff8f33, 0 0 0.5em #ff8f33, 0 0 0.75em #ff8f33; }40% {text-shadow: 0 0 0.25em #3374ff, 0 0 0.5em #3374ff, 0 0 0.75em #3374ff; }50% {text-shadow: 0 0 0.25em #3a33ff, 0 0 0.5em #3a33ff, 0 0 0.75em #3a33ff; }60% {text-shadow: 0 0 0.25em #99ff33, 0 0 0.5em #99ff33, 0 0 0.75em #99ff33; }70% {text-shadow: 0 0 0.25em #ffeb33, 0 0 0.5em #ffeb33, 0 0 0.75em #ffeb33; }80% {text-shadow: 0 0 0.25em #3363ff, 0 0 0.5em #3363ff, 0 0 0.75em #3363ff; }90% {text-shadow: 0 0 0.25em #77ff33, 0 0 0.5em #77ff33, 0 0 0.75em #77ff33; } }
@keyframes shine-12 {10% {text-shadow: 0 0 0.25em #5c33ff, 0 0 0.5em #5c33ff, 0 0 0.75em #5c33ff; }20% {text-shadow: 0 0 0.25em #ffeb33, 0 0 0.5em #ffeb33, 0 0 0.75em #ffeb33; }30% {text-shadow: 0 0 0.25em #ffb833, 0 0 0.5em #ffb833, 0 0 0.75em #ffb833; }40% {text-shadow: 0 0 0.25em #e4ff33, 0 0 0.5em #e4ff33, 0 0 0.75em #e4ff33; }50% {text-shadow: 0 0 0.25em #ff9933, 0 0 0.5em #ff9933, 0 0 0.75em #ff9933; }60% {text-shadow: 0 0 0.25em #52ff33, 0 0 0.5em #52ff33, 0 0 0.75em #52ff33; }70% {text-shadow: 0 0 0.25em #33ff4b, 0 0 0.5em #33ff4b, 0 0 0.75em #33ff4b; }80% {text-shadow: 0 0 0.25em #33d3ff, 0 0 0.5em #33d3ff, 0 0 0.75em #33d3ff; }90% {text-shadow: 0 0 0.25em #ffb433, 0 0 0.5em #ffb433, 0 0 0.75em #ffb433; } }
.stars {position: fixed;top: 0;left: 0;height: 100%;width: 100%;margin: 0;padding: 0;list-style: none; }
.stars li {position: absolute;top: 0;left: 0;height: 1vmin;width: 1vmin;content: '';border-radius: 100%; }
.stars li:nth-child(1) {animation: twinkle-1 1s 0.1s infinite linear;background: #85ff33;transform: translate(6vw, 70vh) scale(1.8); }
.stars li:nth-child(2) {animation: twinkle-2 1s 0.2s infinite linear;background: #beff33;transform: translate(70vw, 93vh) scale(1.4); }
.stars li:nth-child(3) {animation: twinkle-3 1s 0.3s infinite linear;background: #3347ff;transform: translate(31vw, 65vh) scale(1.2); }
.stars li:nth-child(4) {animation: twinkle-4 1s 0.6s infinite linear;background: #33f1ff;transform: translate(77vw, 61vh) scale(1.2); }
.stars li:nth-child(5) {animation: twinkle-5 1s 0.9s infinite linear;background: #33ff3a;transform: translate(49vw, 71vh) scale(0.6); }
.stars li:nth-child(6) {animation: twinkle-6 1s 0.4s infinite linear;background: #58ff33;transform: translate(97vw, 67vh) scale(1.4); }
.stars li:nth-child(7) {animation: twinkle-7 1s 0.4s infinite linear;background: #ffa733;transform: translate(39vw, 59vh) scale(1.4); }
.stars li:nth-child(8) {animation: twinkle-8 1s 0.8s infinite linear;background: #33ffeb;transform: translate(25vw, 10vh) scale(0.8); }
.stars li:nth-child(9) {animation: twinkle-9 1s 1s infinite linear;background: #33ffad;transform: translate(30vw, 53vh) scale(1.6); }
.stars li:nth-child(10) {animation: twinkle-10 1s 0.2s infinite linear;background: #ff7033;transform: translate(91vw, 41vh) scale(0.6); }
.stars li:nth-child(11) {animation: twinkle-11 1s 0.2s infinite linear;background: #33ff5f;transform: translate(78vw, 41vh) scale(1.6); }
.stars li:nth-child(12) {animation: twinkle-12 1s 0.7s infinite linear;background: #58ff33;transform: translate(20vw, 53vh) scale(0.6); }
.stars li:nth-child(13) {animation: twinkle-13 1s 1s infinite linear;background: #33ff3a;transform: translate(62vw, 54vh) scale(1.6); }
.stars li:nth-child(14) {animation: twinkle-14 1s 0.7s infinite linear;background: #6333ff;transform: translate(77vw, 95vh) scale(2); }
.stars li:nth-child(15) {animation: twinkle-15 1s 0.8s infinite linear;background: #33ffda;transform: translate(18vw, 1vh) scale(1.6); }
.stars li:nth-child(16) {animation: twinkle-16 1s 0.4s infinite linear;background: #3358ff;transform: translate(11vw, 19vh) scale(1); }
.stars li:nth-child(17) {animation: twinkle-17 1s 0.8s infinite linear;background: #d6ff33;transform: translate(28vw, 97vh) scale(0.8); }
.stars li:nth-child(18) {animation: twinkle-18 1s 1s infinite linear;background: #33fff1;transform: translate(5vw, 4vh) scale(1.4); }
.stars li:nth-child(19) {animation: twinkle-19 1s 0.1s infinite linear;background: #81ff33;transform: translate(8vw, 9vh) scale(0.8); }
.stars li:nth-child(20) {animation: twinkle-20 1s 0.1s infinite linear;background: #adff33;transform: translate(35vw, 46vh) scale(1.2); }
.stars li:nth-child(21) {animation: twinkle-21 1s 0.8s infinite linear;background: #339cff;transform: translate(60vw, 13vh) scale(1.8); }
.stars li:nth-child(22) {animation: twinkle-22 1s 0.4s infinite linear;background: #33ffff;transform: translate(59vw, 78vh) scale(0.8); }@keyframes twinkle-1 {75% {box-shadow: 0 0 0 0.5vmin #3d33ff; }100% {box-shadow: 0 0 0 1.5vmin rgba(129, 255, 51, 0); } }
@keyframes twinkle-2 {75% {box-shadow: 0 0 0 0.4vmin #3352ff; }100% {box-shadow: 0 0 0 1.4vmin rgba(51, 255, 173, 0); } }
@keyframes twinkle-3 {75% {box-shadow: 0 0 0 0.7vmin #ff8f33; }100% {box-shadow: 0 0 0 1.7vmin rgba(116, 255, 51, 0); } }
@keyframes twinkle-4 {75% {box-shadow: 0 0 0 0.7vmin #33ff44; }100% {box-shadow: 0 0 0 1.7vmin rgba(61, 51, 255, 0); } }
@keyframes twinkle-5 {75% {box-shadow: 0 0 0 0.2vmin #33ff88; }100% {box-shadow: 0 0 0 1.2vmin rgba(255, 190, 51, 0); } }
@keyframes twinkle-6 {75% {box-shadow: 0 0 0 0.8vmin #33ff7e; }100% {box-shadow: 0 0 0 1.8vmin rgba(126, 255, 51, 0); } }
@keyframes twinkle-7 {75% {box-shadow: 0 0 0 0.1vmin #33a3ff; }100% {box-shadow: 0 0 0 1.1vmin rgba(146, 255, 51, 0); } }
@keyframes twinkle-8 {75% {box-shadow: 0 0 0 0.3vmin #daff33; }100% {box-shadow: 0 0 0 1.3vmin rgba(170, 255, 51, 0); } }
@keyframes twinkle-9 {75% {box-shadow: 0 0 0 1vmin #3341ff; }100% {box-shadow: 0 0 0 2vmin rgba(51, 255, 184, 0); } }
@keyframes twinkle-10 {75% {box-shadow: 0 0 0 0.1vmin #d6ff33; }100% {box-shadow: 0 0 0 1.1vmin rgba(51, 255, 252, 0); } }
@keyframes twinkle-11 {75% {box-shadow: 0 0 0 0.8vmin #44ff33; }100% {box-shadow: 0 0 0 1.8vmin rgba(255, 177, 51, 0); } }
@keyframes twinkle-12 {75% {box-shadow: 0 0 0 1vmin #33ff85; }100% {box-shadow: 0 0 0 2vmin rgba(99, 255, 51, 0); } }
@keyframes twinkle-13 {75% {box-shadow: 0 0 0 0.3vmin #33ffc5; }100% {box-shadow: 0 0 0 1.3vmin rgba(197, 255, 51, 0); } }
@keyframes twinkle-14 {75% {box-shadow: 0 0 0 0.9vmin #ff6633; }100% {box-shadow: 0 0 0 1.9vmin rgba(255, 71, 51, 0); } }
@keyframes twinkle-15 {75% {box-shadow: 0 0 0 0.9vmin #ffeb33; }100% {box-shadow: 0 0 0 1.9vmin rgba(51, 255, 201, 0); } }
@keyframes twinkle-16 {75% {box-shadow: 0 0 0 0.8vmin #33fffc; }100% {box-shadow: 0 0 0 1.8vmin rgba(184, 255, 51, 0); } }
@keyframes twinkle-17 {75% {box-shadow: 0 0 0 0.4vmin #33ff88; }100% {box-shadow: 0 0 0 1.4vmin rgba(51, 228, 255, 0); } }
@keyframes twinkle-18 {75% {box-shadow: 0 0 0 0.4vmin #33a3ff; }100% {box-shadow: 0 0 0 1.4vmin rgba(51, 255, 136, 0); } }
@keyframes twinkle-19 {75% {box-shadow: 0 0 0 0.7vmin #f5ff33; }100% {box-shadow: 0 0 0 1.7vmin rgba(51, 95, 255, 0); } }
@keyframes twinkle-20 {75% {box-shadow: 0 0 0 0.4vmin #e7ff33; }100% {box-shadow: 0 0 0 1.4vmin rgba(197, 255, 51, 0); } }
.earth {height: 50vmin;width: 50vmin;margin: 1em auto 0;animation: glow 10s infinite linear;background: rgba(170, 170, 238, 0.05);border-radius: 100%;box-shadow: inset 0 0 0 2px #fff, 0 0 2em 0 rgba(180, 255, 51, 0.5); }@keyframes glow {10% {box-shadow: inset 0 0 0 2px #fff, 0 0 2em 0 rgba(82, 51, 255, 0.5); }20% {box-shadow: inset 0 0 0 2px #fff, 0 0 2em 0 rgba(51, 160, 255, 0.5); }30% {box-shadow: inset 0 0 0 2px #fff, 0 0 2em 0 rgba(51, 248, 255, 0.5); }40% {box-shadow: inset 0 0 0 2px #fff, 0 0 2em 0 rgba(255, 197, 51, 0.5); }50% {box-shadow: inset 0 0 0 2px #fff, 0 0 2em 0 rgba(51, 78, 255, 0.5); }60% {box-shadow: inset 0 0 0 2px #fff, 0 0 2em 0 rgba(51, 88, 255, 0.5); }70% {box-shadow: inset 0 0 0 2px #fff, 0 0 2em 0 rgba(51, 255, 177, 0.5); }80% {box-shadow: inset 0 0 0 2px #fff, 0 0 2em 0 rgba(51, 255, 150, 0.5); }90% {box-shadow: inset 0 0 0 2px #fff, 0 0 2em 0 rgba(255, 95, 51, 0.5); } }
.heart {position: absolute;top: 102%;left: 50%;font-size: 8vmin;transform: translate(-50%, 0); }
.heart:before {display: block;content: '❤';animation: wiggle 2s infinite;color: #ff7777;transform-origin: center bottom; }@keyframes wiggle {25% {text-shadow: -0.1em -0.1em 0 rgba(88, 51, 255, 0.5), -0.1em -0.1em 1em rgba(51, 218, 255, 0.5);transform: rotate(-5deg); }75% {text-shadow: 0.1em -0.1em 0 rgba(51, 211, 255, 0.5), 0.1em -0.1em 1em rgba(51, 167, 255, 0.5);transform: rotate(5deg); } }
.cutie {position: absolute;top: 122%;left: 50%;height: 2vmin;width: 2vmin;animation: kiss 1s infinite;border-radius: 100%;transform-origin: center top; }
.cutie:before {position: absolute;top: 100%;left: 50%;border: 4vmin solid transparent;content: '';transform: translate(-50%, -50%) scaleX(0.35); }.girl {margin-left: -1vmin;animation: kiss-boy 3s infinite;box-shadow: inset 0 0 0 2px #fffc33, 0 0 1em 0 #3377ff;transform: translate(-50%, 0) rotate(12deg); }
.girl:before {border-bottom-color: #33ff7e; }@keyframes kiss-boy {50% {transform: translate(-40%, 0) rotate(15deg); } }
.boy {margin-left: 1vmin;animation: kiss-girl 3s infinite;box-shadow: inset 0 0 0 2px #33ff85, 0 0 1em 0 #333aff;transform: translate(-50%, 0) rotate(-12deg); }
.boy:before {border-bottom-color: #b8ff33; }@keyframes kiss-girl {50% {transform: translate(-60%, 0) rotate(-15deg); } }
*,
*:before,
*:after {position: relative;box-sizing: border-box; }html {height: 100%;font-family: 'Nothing You Could Do';background: #000;color: #fff; }body {height: 100%;font-size: 1.25em;background: rgba(170, 170, 238, 0.25); }/*# sourceMappingURL=index.css.map */

效果2

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>envelope</title><link rel="stylesheet" href="../css/envelope.css">
</head>
<body>
<div class="container" ><div class="envelope" ></div><div class="card" id="test"><!--      添加文案--><h1 class="message" >WILL YOU BE MY VALENTINE?</h1><div class="pikachu"><div class="limbs"></div><div class="heart"></div><div class="arms"></div><div class="smile"></div></div></div><div class="cover"></div><div class="lid"></div><div class="shadow"></div>
</div>
<script>window.onload = function (){var go = document.getElementById("test");go.onclick = function (){location.href = "pikachu.html"}}
</script>
</body>
</html>
@import url('https://fonts.googleapis.com/css2?family=Pangolin&display=swap');
/*重置浏览器样式*/
* {margin: 0;padding: 0;
}
/*使主体居中vw：视窗宽度的百分比（1vw 代表视窗的宽度为 1%）vh：视窗高度的百分比
*/
body {height: 100vh;width: 100vw;background: #FFE3EC;font-family: 'Pangolin', cursive;font-size: 1vmin;/*弹性布局*/display: flex;/*设置flex子项在每个flex行的交叉轴上的中心对齐，交叉轴方向为column，即垂直方向**/align-items: center;/*设置flex子项在主轴上的中心对齐*/justify-content: center;
}
/*
使用相对定位（什么时候用相对定位或绝对定位？在文档流中相对定位的元素占有位置，而且会影响后面的元素（块元素、行内块元素），比如两个div并排，另外一个会换行。而绝对定位就是把该元素从文档流中踢出，不会占用文档流的位置，也不会影响后面的元素。）
vmin：当前 vw 和 vh 中较小的一个值
vmax：当前 vw 和 vh 中较大的一个值
*/
.container {position: relative;top: 0vmin;
}
/*相对定位，并设置背景色和大小*/
.envelope {position: relative;background: #eb7885;height: 30vmin;width: 48vmin;
}/*.cover {*/
/*    position: absolute;*/
/*    height: 0;*/
/*    width: 0;*//*    border-bottom: 15vmin solid #f5b5bb;*/
/*    border-left: 24vmin solid transparent;*/
/*    border-right: 24vmin solid transparent;*/
/*    top: 15vmin;*/
/*    z-index: 3;*/
/*}*//*.cover::after { !*left triangle*!*/
/*    position: absolute;*/
/*    content: '';*/
/*    border-left: 24.5vmin solid #0a0a0a;*/
/*    border-bottom: 15vmin solid transparent;*/
/*    border-top: 15vmin solid transparent;*/
/*    top: -15vmin;*/
/*    left: -24vmin;*/
/*}*//*.cover::before {*/
/*    position: absolute;*/
/*    content: '';*/
/*    border-right: 24.5vmin solid #0a0a0a;*/
/*    border-bottom: 15vmin solid transparent;*/
/*    border-top: 15vmin solid transparent;*/
/*    top: -15vmin;*/
/*    left: -0.5vmin;*/
/*}*/.cover {position: absolute;height: 0;width: 0;border-bottom: 15vmin solid #f5b5bb;border-left: 24vmin solid transparent;border-right: 24vmin solid transparent;top: 15vmin;z-index: 3;
}.cover::after { /*left triangle*/position: absolute;content: '';border-left: 24.5vmin solid #ffbbc1;border-bottom: 15vmin solid transparent;border-top: 15vmin solid transparent;top: -15vmin;left: -24vmin;
}.cover::before {position: absolute;content: '';border-right: 24.5vmin solid #ffbbc1;border-bottom: 15vmin solid transparent;border-top: 15vmin solid transparent;top: -15vmin;left: -0.5vmin;
}/*创建信件打开的动画，使用rotateX()，围绕其在给定的度数在x轴旋转*/
@keyframes open {100% {transform: rotatex(180deg);}
}
/*信件合上的动画*/
@keyframes open-rev {from {transform: rotatex(-180deg);}
}.lid {position: absolute;height: 0;width: 0;border-top: 15vmin solid #ff8896;border-left: 24vmin solid transparent;border-right: 24vmin solid transparent;top: 0;/*设置旋转元素的基点位置，为盒子的顶部边缘*/transform-origin: top;animation: open-rev 2s;
}.container:hover .lid {animation: open 0.5s;animation-fill-mode: forwards;
}@keyframes slide {100% {transform: translatey(-15vmin);z-index: 2;}
}@keyframes slide-rev {from {transform: translatey(-15vmin);}
}.card {position: absolute;/*白色的卡片*/background: white;height: 25vmin;width: 43vmin;display: flex;/*设置div水平显示*/flex-direction: column;/*设置flex子项在每个flex行的交叉轴上的中心对齐，交叉轴方向为column，即垂直方向**/align-items: center;/*设置flex子项在主轴上的中心对齐*/justify-content: center;left: 2.5vmin;top: 0vmin;animation: slide-rev 0.2s ease-out;
}.message {position: absolute;top: 5vmin;
}.pikachu {position: absolute;background: #f9ebaa;height: 8vmin;width: 10vmin;border-radius: 40%;top: 15vmin;display: flex;
}
.pikachu::before {content: '';position: absolute;background: #f9ebaa;height: 6vmin;width: 9vmin;border-radius: 90% 90% 60% 60%;top: -4vmin;left: 0.5vmin;
}
.pikachu::after {content: '';position: absolute;background: transparent;height: 1vmin;width: 1vmin;top: 2vmin;left: -1.5vmin;color: #4a4947;border-radius: 50%;box-shadow:4vmin -3.5vmin, 8vmin -3.5vmin,2vmin -2vmin #fad598, 10vmin -2vmin #fad598,3vmin 5vmin #f9ebaa, 9.3vmin 5vmin #f9ebaa;
}
.limbs {position: relative;width: 0;height: 0;border-left: 1vmin solid transparent;border-right: 1vmin solid transparent;border-bottom: 6vmin solid #f9ebaa;border-radius: 80%;top: -6vmin;left: 1vmin;transform: rotate(-20deg);
}.limbs::before {content: '';position: absolute;background: #f9ebaa;width: 5vmin;height: 2vmin;border-radius: 40%;top: 10vmin;left: 4vmin;box-shadow:-1vmin 1.5vmin #f9ebaa;
}.limbs::after {content: '';position: absolute;width: 0;height: 0;border-left: 1vmin solid transparent;border-right: 1vmin solid transparent;border-bottom: 6vmin solid #f9ebaa;border-radius: 80%;top: 3vmin;left: 5vmin;transform: rotate(40deg);
}.heart {position: relative;width: 5vmin;height: 4vmin;top: 2vmin;left: 0.6vmin;
}
.heart:before,
.heart:after {position: absolute;content: "";left: 2.5vmin;top: 0;width: 2.5vmin;height: 4vmin;background: #fc978b;border-radius: 2.5vmin 2.5vmin 0 0;transform: rotate(-45deg);transform-origin: 0 100%;
}
.heart:after {left: 0;transform: rotate(45deg);transform-origin: 100% 100%;
}.smile {position: relative;background: transparent;height: 1vmin;width: 1vmin;border-radius: 50%;border-bottom: 0.3vmin solid #4a4947;left: -5vmin;top: -1.3vmin;
}.smile::before {position: absolute;content: '';background: transparent;height: 1vmin;width: 1vmin;border-radius: 50%;border-bottom: 0.3vmin solid #4a4947;left: 0.7vmin;
}.arms {position: relative;background: #f9ebaa;width: 4.2vmin;height: 2vmin;border-radius: 60% 60% 90% 60% / 50% 50% 90% 90%;top: 3vmin;left: -5vmin;
}
.arms::after {content: '';position: absolute;background: #f9ebaa;width: 4vmin;height: 2vmin;border-radius: 60% 60% 90% 60% / 50% 50% 90% 90%;left: 5vmin;top: 0vmin;
}.container:hover .card {animation: slide 0.2s;animation-delay: 0.5s;animation-fill-mode: forwards;
}.shadow {position: relative;top: 3vmin;border-radius: 50%;opacity: 0.7;height: 2vmin;width: 48vmin;background: #e8c5d0;
}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>pikachu</title><link rel="stylesheet" href="../css/pikachu.css">
</head>
<body>
<div class="wrapper"><h2>Will you be my valentine?</h2><div class="pikachu"><div class="head"><div class="ears left brown"><div class="ears-inside yellow"></div></div><div class="ears right brown"><div class="ears-inside yellow"></div></div><div class="face yellow"><span class="eye left brown"></span><span class="eye right brown"></span><span class="mouth">w</span><span class="cachete left"></span><span class="cachete right"></span></div></div><div class="body yellow"><div class="heart"></div><div class="paw left yellow"></div><div class="paw right yellow"></div></div><div class="leg left yellow-dark"></div><div class="leg right yellow-dark"></div><div class="tail yellow-dark"></div></div></div></body>
</html>
@import url(https://fonts.googleapis.com/css?family=Loved+by+the+King);body,html {background: #FFE3EC;height:100%;font-family: 'Loved by the King', cursive;
}div, ul, span{display: block; position: absolute;margin: auto; padding: 0;top: 0; bottom: 0; right: 0; left: 0;
}.brown { background-color: #452211;}
.yellow { background-color: #ffd814}
.yellow-dark { background-color: #e0a100}.wrapper {height: 450px;width: 300px;
}h2 {text-transform: uppercase;text-align: center;font-size: 2em;color: #452211;
}.pikachu{top: auto;height: 65%;width: 140px;
}.pikachu::before {position: absolute;content: '';background: rgba(0,0,0,0.15);height: 10px;width: 90%;margin: auto;left: 0;right: 0;bottom: 95px;border-radius: 50%;
}.pikachu .head {bottom: auto;height: 120px;width: 120px;z-index: 3;
}.pikachu .head .face{width: 120px;height: 70px;top: auto;border-radius:  40px 40px 30px 30px;z-index: 2;
}.face .eye {width: 14px;height: 14px;border-radius: 50%;bottom: auto;top: 28px;-webkit-animation: blink 4s infinite;
}.eye.left {right: auto;left: 32px;
}.eye.right {left: auto;right: 32px;
}.face .mouth {text-align: center;height: 10px;
}.face .cachete {width: 16px;height: 16px;border-radius: 50%;bottom: auto;top: 38px;background-color: #e64900;z-index: 9;
}.cachete.left {right: auto;left: 10px;
}.cachete.right {left: auto;right: 10px;
}.pikachu .head .ears{width: 20px;height: 90px;bottom: auto;border-radius: 50%;overflow: hidden;z-index: 1;
}.ears.left{right: auto;left: 10px;
}.ears.right{left: auto;right: 10px;
}.ears .ears-inside{top: auto;height: 70px;width: 30px;border-radius: 50%;
}.ears.right .ears-inside{position: absolute;left: -50%;
}.pikachu .body {bottom: auto;top: 80px;height: 105px;width: 130px;border-radius: 80px 80px 40px 40px;overflow: hidden;z-index: 2;
}.pikachu .body .paw{bottom: auto;top: 50px;height: 15px;width: 30px;z-index: 9;border-bottom: 1px solid #e0a100;border-top: 1px solid #FFFFFF;
}.pikachu .body .paw.left{right: auto;left: 15px;border-radius: 0 50% 50% 0;
}.pikachu .body .paw.right{left: auto;right: 15px;border-radius: 50% 0 0 50%;
}.pikachu .body .heart {width: 40px;height: 40px;bottom: auto;top: 10px;z-index: 8;animation:beat 0.45s infinite;-webkit-animation:beat 0.45s infinite;
}.pikachu .body .heart:before,
.pikachu .body .heart:after {position: absolute;content: "";left: 20px;top: 30px;width: 50%;height: 100%;background: #e64900;-moz-border-radius: 20px 20px 0 0;border-radius: 10px 10px 0 0;-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-ms-transform: rotate(-45deg);-o-transform: rotate(-45deg);transform: rotate(-45deg);-webkit-transform-origin: 0 100%;-moz-transform-origin: 0 100%;-ms-transform-origin: 0 100%;-o-transform-origin: 0 100%;transform-origin: 0 100%;
}
.pikachu .body .heart:after {left: 0px;-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);-o-transform: rotate(45deg);transform: rotate(45deg);-webkit-transform-origin: 100% 100%;-moz-transform-origin: 100% 100%;-ms-transform-origin: 100% 100%;-o-transform-origin: 100% 100%;transform-origin :100% 100%;
}.pikachu .leg {z-index: 1;bottom: auto;top: 172px;height: 20px;width: 30px;
}.pikachu .leg.left {right: auto;left: 20px;border-radius: 80px 10px 80px 10px;
}.pikachu .leg.right {left: auto;right: 20px;border-radius: 10px 80px 10px 80px;
}.pikachu .tail {z-index: 1;height: 40px;width: 50px;left:auto;bottom: auto;top: 70px;border-radius: 10% 30%;
}.signature {position: absolute;margin: auto;bottom: 0;top: auto;
}.signature p{text-align: center;font-family: Helvetica, Arial, Sans-Serif;font-size: 0.85em;
}.signature .much-heart{display: inline-block;position: relative;margin: 0 4px;height: 10px;width: 10px;background: #AC1D3F;border-radius: 4px;-ms-transform: rotate(45deg);-webkit-transform: rotate(45deg);transform: rotate(45deg);
}.signature .much-heart::before,
.signature .much-heart::after {display: block;content: '';position: absolute;margin: auto;height: 10px;width: 10px;border-radius: 5px;background: #AC1D3F;top: -4px;
}.signature .much-heart::after {bottom: 0;top: auto;left: -4px;
}.signature a {color: #333;text-decoration: none;font-weight: bold;
}@keyframes blink{0% {  height: 14px; top: 28px;}5% {  height: 2px; top: 34px;}10% {  height: 14px; top: 28px;}40% {  height: 14px; top: 28px;}50% {  height: 2px; top: 34px;}55% {  height: 14px; top: 28px;}100% {  height: 14px; top: 28px;}
}

效果3

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>body {background-color: #000;margin: 0;overflow: hidden;background-repeat: no-repeat;}</style>
</head>
<body>
<canvas id="canvas" width="1400" height="600"></canvas>
<script src="../js/index.js"></script>
</body>
</html>
var canvas = document.getElementById("canvas");canvas.width = window.innerWidth;
canvas.height = window.innerHeight;// Initialize the GL context
var gl = canvas.getContext("webgl");
if (!gl) {console.error("Unable to initialize WebGL.");
}//Time
var time = 0.0;//************** Shader sources **************var vertexSource = `
attribute vec2 position;
void main() {gl_Position = vec4(position, 0.0, 1.0);
}
`;var fragmentSource = `
precision highp float;uniform float width;
uniform float height;
vec2 resolution = vec2(width, height);uniform float time;#define POINT_COUNT 8vec2 points[POINT_COUNT];
const float speed = -0.5;
const float len = 0.25;
float intensity = 1.3;
float radius = 0.008;//https://www.shadertoy.com/view/MlKcDD
//Signed distance to a quadratic bezier
float sdBezier(vec2 pos, vec2 A, vec2 B, vec2 C){    vec2 a = B - A;vec2 b = A - 2.0*B + C;vec2 c = a * 2.0;vec2 d = A - pos;float kk = 1.0 / dot(b,b);float kx = kk * dot(a,b);float ky = kk * (2.0*dot(a,a)+dot(d,b)) / 3.0;float kz = kk * dot(d,a);      float res = 0.0;float p = ky - kx*kx;float p3 = p*p*p;float q = kx*(2.0*kx*kx - 3.0*ky) + kz;float h = q*q + 4.0*p3;if(h >= 0.0){ h = sqrt(h);vec2 x = (vec2(h, -h) - q) / 2.0;vec2 uv = sign(x)*pow(abs(x), vec2(1.0/3.0));float t = uv.x + uv.y - kx;t = clamp( t, 0.0, 1.0 );// 1 rootvec2 qos = d + (c + b*t)*t;res = length(qos);}else{float z = sqrt(-p);float v = acos( q/(p*z*2.0) ) / 3.0;float m = cos(v);float n = sin(v)*1.732050808;vec3 t = vec3(m + m, -n - m, n - m) * z - kx;t = clamp( t, 0.0, 1.0 );// 3 rootsvec2 qos = d + (c + b*t.x)*t.x;float dis = dot(qos,qos);res = dis;qos = d + (c + b*t.y)*t.y;dis = dot(qos,qos);res = min(res,dis);qos = d + (c + b*t.z)*t.z;dis = dot(qos,qos);res = min(res,dis);res = sqrt( res );}return res;
}//http://mathworld.wolfram.com/HeartCurve.html
vec2 getHeartPosition(float t){return vec2(16.0 * sin(t) * sin(t) * sin(t),-(13.0 * cos(t) - 5.0 * cos(2.0*t)- 2.0 * cos(3.0*t) - cos(4.0*t)));
}//https://www.shadertoy.com/view/3s3GDn
float getGlow(float dist, float radius, float intensity){return pow(radius/dist, intensity);
}float getSegment(float t, vec2 pos, float offset, float scale){for(int i = 0; i < POINT_COUNT; i++){points[i] = getHeartPosition(offset + float(i)*len + fract(speed * t) * 6.28);}vec2 c = (points[0] + points[1]) / 2.0;vec2 c_prev;float dist = 10000.0;for(int i = 0; i < POINT_COUNT-1; i++){//https://tinyurl.com/y2htbwkmc_prev = c;c = (points[i] + points[i+1]) / 2.0;dist = min(dist, sdBezier(pos, scale * c_prev, scale * points[i], scale * c));}return max(0.0, dist);
}void main(){vec2 uv = gl_FragCoord.xy/resolution.xy;float widthHeightRatio = resolution.x/resolution.y;vec2 centre = vec2(0.5, 0.5);vec2 pos = centre - uv;pos.y /= widthHeightRatio;//Shift upwards to centre heartpos.y += 0.02;float scale = 0.000015 * height;float t = time;//Get first segmentfloat dist = getSegment(t, pos, 0.0, scale);float glow = getGlow(dist, radius, intensity);vec3 col = vec3(0.0);//White corecol += 10.0*vec3(smoothstep(0.003, 0.001, dist));//Pink glowcol += glow * vec3(1.0,0.05,0.3);//Get second segmentdist = getSegment(t, pos, 3.4, scale);glow = getGlow(dist, radius, intensity);//White corecol += 10.0*vec3(smoothstep(0.003, 0.001, dist));//Blue glowcol += glow * vec3(0.1,0.4,1.0);//Tone mappingcol = 1.0 - exp(-col);//Gammacol = pow(col, vec3(0.4545));//Output to screengl_FragColor = vec4(col,1.0);
}
`;//************** Utility functions **************window.addEventListener("resize", onWindowResize, false);function onWindowResize() {canvas.width = window.innerWidth;canvas.height = window.innerHeight;gl.viewport(0, 0, canvas.width, canvas.height);gl.uniform1f(widthHandle, window.innerWidth);gl.uniform1f(heightHandle, window.innerHeight);
}//Compile shader and combine with source
function compileShader(shaderSource, shaderType) {var shader = gl.createShader(shaderType);gl.shaderSource(shader, shaderSource);gl.compileShader(shader);if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {throw "Shader compile failed with: " + gl.getShaderInfoLog(shader);}return shader;
}//From https://codepen.io/jlfwong/pen/GqmroZ
//Utility to complain loudly if we fail to find the attribute/uniform
function getAttribLocation(program, name) {var attributeLocation = gl.getAttribLocation(program, name);if (attributeLocation === -1) {throw "Cannot find attribute " + name + ".";}return attributeLocation;
}function getUniformLocation(program, name) {var attributeLocation = gl.getUniformLocation(program, name);if (attributeLocation === -1) {throw "Cannot find uniform " + name + ".";}return attributeLocation;
}//************** Create shaders **************//Create vertex and fragment shaders
var vertexShader = compileShader(vertexSource, gl.VERTEX_SHADER);
var fragmentShader = compileShader(fragmentSource, gl.FRAGMENT_SHADER);//Create shader programs
var program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);gl.useProgram(program);//Set up rectangle covering entire canvas
var vertexData = new Float32Array([-1.0,1.0, // top left-1.0,-1.0, // bottom left1.0,1.0, // top right1.0,-1.0 // bottom right
]);//Create vertex buffer
var vertexDataBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexDataBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertexData, gl.STATIC_DRAW);// Layout of our data in the vertex buffer
var positionHandle = getAttribLocation(program, "position");gl.enableVertexAttribArray(positionHandle);
gl.vertexAttribPointer(positionHandle,2, // position is a vec2 (2 values per component)gl.FLOAT, // each component is a floatfalse, // don't normalize values2 * 4, // two 4 byte float components per vertex (32 bit float is 4 bytes)0 // how many bytes inside the buffer to start from
);//Set uniform handle
var timeHandle = getUniformLocation(program, "time");
var widthHandle = getUniformLocation(program, "width");
var heightHandle = getUniformLocation(program, "height");gl.uniform1f(widthHandle, window.innerWidth);
gl.uniform1f(heightHandle, window.innerHeight);var lastFrame = Date.now();
var thisFrame;function draw() {//Update timethisFrame = Date.now();time += (thisFrame - lastFrame) / 1000;lastFrame = thisFrame;//Send uniforms to programgl.uniform1f(timeHandle, time);//Draw a triangle strip connecting vertices 0-4gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);requestAnimationFrame(draw);
}draw();

HTML+CSS实现告白信的效果相关推荐

  1. HTML+CSS+JavaScript制作3D云效果，叼炸天！可用鼠标控制方向！

    HTML+CSS+JavaScript制作3D云效果,叼炸天!可用鼠标控制方向! 作品介绍 1.网页作品简介方面 :3D云效果,叼炸天!可用鼠标控制方向! 2.网页作品编辑方面:此作品为学生个人主页网 ...

  2. 使用css实现瀑布流的效果

    使用css实现瀑布流的效果主要是通过display:flex弹性布局的方式. 注意要设置列数 图片的宽度要一致,否则图片显示会有问题 <!DOCTYPE html> <html la ...

  3. css有些效果不显示,css导入成功但没有效果怎么办

    css导入成功但没有效果的解决办法:1.打开网页调试工具,根据显示错误进行修改:2.查看link标签的"rel="stylesheet""是否有错,并修改即可. ...

  4. CSS如何实现内凹角效果 By 大漠

    记得@Lea Verou的<CSS Secrets>一书和前几天@Chris Coyier刚发的帖子都介绍了CSS怎么实现元素斜切口的效果.我也尝试着借助Vue的能力,把这种效果构建成一个 ...

  5. html 下拉列表美化,JS+CSS实现美化的下拉列表框效果

    本文实例讲述了JS+CSS实现美化的下拉列表框效果.分享给大家供大家参考.具体如下: 一款经过JS+CSS美化的下拉列表,效果很不错,但代码有点偏多,学习CSS的朋友可以学习一下方法,然后自己变通一下 ...

  6. 仅使用HTML和CSS实现的标签云效果

    标签云的效果在博客和网站上不难见到,它其实就是带有超链接的某些关键字,为了达到强调主题的作用.通常出现概率比较大或者受欢迎的标签文字显示比较大,相反的就显示的小. 来源于TagCrowd.com 我们 ...

  7. [css] 使用css实现对话气泡的效果

    [css] 使用css实现对话气泡的效果 方法:使用圆角矩形作为对话的主体框,左侧或右侧增加附加三角形,三角形使用border样式设置来实现,相对定位和绝对定位结合使三角形附于圆角矩形左侧或右侧: h ...

  8. [css] 使用css实现一个loading的效果

    [css] 使用css实现一个loading的效果 <div class="donut"></div> @Keyframes donut-spin {0% ...

  9. [css] 使用css实现气泡框的效果

    [css] 使用css实现气泡框的效果 <!DOCTYPE html> <html lang="en"><head> <meta char ...

最新文章

  1. 【知识发现】python开源哈夫曼编码库huffman
  2. PHP使用swoole来实现实时异步任务队列
  3. java定义变量的输入_Terraform中输入变量
  4. Linux 文件IO管理 - POSIX
  5. 游戏筑基开发之C语言回调函数使用实例及其.h库封装实例
  6. php_字符串按汉字拆分,php分割中文字符串
  7. 台式机和笔记本快速互拷超大文件
  8. ArcGIS中ObjectID，FID和OID字段区别
  9. html毕业设计任务要求,毕业设计任务书(学生填写).doc
  10. PS小知识（三）——画圆滑线及虚线
  11. 【独行秀才】macOS Monterey 12.3.1正式版（21E258）
  12. xamarin.forms之 button图片位置的设置
  13. C++基础入门（一）
  14. 微机原理课程设计--计算器
  15. message的警告弹窗放在最上层
  16. SvnAnt authentication cancelled 的解决
  17. linux 课程标准,《Linux操作系统及应用》课程标准.doc
  18. 2020国内十大优秀炒外汇平台最新排名
  19. CAN-BUS协议粗浅学习
  20. 叔本华系列之（一）论独立的思考

热门文章

  1. win7计算机管理对话框功能,win7如何打开运行对话框_win7电脑系统运行窗口怎么打开...
  2. EasyNVR使用详情功能-通道配置Excel
  3. 【原创】C#List线程安全相关解决方案
  4. Wind River Workbench VxWorks项目开发流程
  5. 专用打印机的全球与中国市场2022-2028年：技术、参与者、趋势、市场规模及占有率研究报告
  6. 腾讯微信面试题(难）
  7. 一个网站一级域名已经备案，二级域名还要不要备案啊？
  8. 查找论文文献的途径有哪些
  9. 计算机网络学习笔记之数据链路层的介质访问控制
  10. 翻转组织——通用医疗敏捷转型案例