令我心动的你呀小说免费阅读（让她/他心动的告白，页面制作（9个页面+链接+代码，原生HTML+CSS+JS实现））
导读：一、pikachu告白信件 详细步骤教程（https://blog.csdn.net/weixin_44009656/article/details/124822366?utm_source=app&app_version=5.4.0&code=app_15629162...
一 、pikachu告白信件
详细步骤教程（https://blog.csdn.net/weixin_44009656/article/details/124822366?utm_source=app&app_version=5.4.0&code=app_1562916241&uLinkId=usr1mkqgl919blen）
1.效果图
2.代码
1.envelope.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>envelope</title> <link rel="stylesheet" href="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>2.envelope.css
@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; }3.pikachu.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>pikachu</title> <link rel="stylesheet" href="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>4.pikachu.css
@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;} }二 、告白小宇宙
1.效果图
2.代码
1.index.html
<!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="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>2.index.css
@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创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！