黑夜模式的好处（暗夜发光,独自闪耀,盘点网页暗黑模式(DarkMode)下的特效和动效,CSS3实现）
导读：众所周知，网页的暗黑模式可以减少屏幕反射和蓝光辐射，减少眼睛的疲劳感，特别是在夜间使用时更为明显。其实暗黑模式也给霓虹灯效应（Neon Effect）提供了发挥的环境。...
众所周知 ，网页的暗黑模式可以减少屏幕反射和蓝光辐射 ，减少眼睛的疲劳感 ，特别是在夜间使用时更为明显 。其实暗黑模式也给霓虹灯效应（Neon Effect）提供了发挥的环境 。
霓虹灯效应是一种视觉效果 ，其特点是在深色背景上使用鲜艳的颜色来产生强烈的视觉冲击 。这种效应通常用于设计海报 、广告 、标志和网页等 。霓虹灯效应的作用在于吸引人们的注意力和增强品牌形象的辨识度 ，因为这种效果让人印象深刻且易于记忆 ，本次我们盘点适合暗色模式的网页特效 ，还是喜欢 ，暗夜的你 。
发光特效
暗黑模式下最炫酷的效果无外乎发光 ，基本上页面元素的发光需要依赖box-shadow属性：
logo { width: 150px; height: 150px; background-color: #fff; box-shadow: 120px 80px 40px 20px #0ff; /* in order: x offset, y offset, blur size, spread size, color */ /* blur size and spread size are optional (they default to 0) */ }这里使用多个阴影值来创建分层效果 。您可以用逗号分隔多个阴影值 ，它们将叠加在彼此上面 。
但是这种效果比较单调 ，box-shadow属性只会保持所在的元素的形状上发光 ，如果我们想让一个元素的发光效果比较有层次感 ，那么就需要border-radius属性的配合 。
我们可以通过给出多组值（用逗号分隔）来在一个元素上堆叠多个发光效果 。发光效果将首先堆叠在顶部 ，最后一个堆叠在底部：
div { width: 40px; height: 40px; border-radius: 50%; background-color: #fff; box-shadow: 0 0 60px 30px #fff, /* inner white */ 0 0 100px 60px #f0f, /* middle magenta */ 0 0 140px 90px #0ff; /* outer cyan */ }说白了就是渐进的光晕效果 ，最内层往最内层逐渐减淡：
配合动画特效 ，比如animation属性：
.logo { pointer-events: auto; font-size: 1rem; width: 2.5em; height: 9em; transform-origin: center top; animation: swing 3s ease-in-out infinite alternate; position: absolute; left: calc(50% - 1.3rem); top: calc(clamp(4em,8vmin,12vw) + .5rem); transform-style: preserve3d; transition: transform .5s ease-out; cursor: pointer; display: block; background: 0 0; border: none; -webkit-appearance: none; padding: 0; }随后结合box-shadow：
.light-bulb__image:before { content: ""; position: absolute; left: calc(50% - 1px); bottom: 0; width: .625em; height: .625em; background: 0 0; border-radius: 50%; z-index: -1; box-shadow: 0 0 6.375em 4em #00fdcf; opacity: .6; transform: scaleY(.7) translateY(-1em) translateX(.4em); transform-origin: center top; }我们就可以营造出这种“冷灯看剑 ，剑上几番功名 ”的特效：
对于SVG图片来说 ，不建议使用box-shadow ，因为没法应用到path实体 ，这里建议使用filter属性：
.shadow_filter{ filter: drop-shadow(0px 0px 25px #116466); }这里通过第三个参数25px来控制发光的亮度 ，第四个参数可以改变颜色 ，暗色发光与亮色不发光的对比：
发光体与动画结合
除了静态的发光体 ，我们也可以让发光体“动 ”起来 ，首先建立发光体容器：
<div class="glowing"> <span></span> <span></span> <span></span> </div> <div class="glowing"> <span></span> <span></span> <span></span> </div> <div class="glowing"> <span></span> <span></span> <span></span> </div> <div class="glowing"> <span></span> <span></span> <span></span> </div>随后针对glowing容器添加动效：
.glowing { position: relative; min-width: 700px; height: 550px; margin: -150px; transform-origin: right; animation: colorChange 5s linear infinite; } .glowing:nth-child(even) { transform-origin: left; } @keyframes colorChange { 0% { filter: hue-rotate(0deg); transform: rotate(0deg); } 100% { filter: hue-rotate(360deg); transform: rotate(360deg); } } .glowing span { position: absolute; top: calc(80px * var(--i)); left: calc(80px * var(--i)); bottom: calc(80px * var(--i)); right: calc(80px * var(--i)); } .glowing span::before { content: ""; position: absolute; top: 50%; left: -8px; width: 15px; height: 15px; background: #f00; border-radius: 50%; } .glowing span:nth-child(3n + 1)::before { background: rgba(134,255,0,1); box-shadow: 0 0 20px rgba(134,255,0,1), 0 0 40px rgba(134,255,0,1), 0 0 60px rgba(134,255,0,1), 0 0 80px rgba(134,255,0,1), 0 0 0 8px rgba(134,255,0,.1); } .glowing span:nth-child(3n + 2)::before { background: rgba(255,214,0,1); box-shadow: 0 0 20px rgba(255,214,0,1), 0 0 40px rgba(255,214,0,1), 0 0 60px rgba(255,214,0,1), 0 0 80px rgba(255,214,0,1), 0 0 0 8px rgba(255,214,0,.1); } .glowing span:nth-child(3n + 3)::before { background: rgba(0,226,255,1); box-shadow: 0 0 20px rgba(0,226,255,1), 0 0 40px rgba(0,226,255,1), 0 0 60px rgba(0,226,255,1), 0 0 80px rgba(0,226,255,1), 0 0 0 8px rgba(0,226,255,.1); } .glowing span:nth-child(3n + 1) { animation: animate 10s alternate infinite; } .glowing span:nth-child(3n + 2) { animation: animate-reverse 3s alternate infinite; } .glowing span:nth-child(3n + 3) { animation: animate 8s alternate infinite; } @keyframes animate { 0% { transform: rotate(180deg); } 50% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes animate-reverse { 0% { transform: rotate(360deg); } 50% { transform: rotate(180deg); } 100% { transform: rotate(0deg); } }这里通过colorChange方法来动态改变容器的位置和颜色 ，效果如下：
萤火虫特效
在移动发光体的基础上 ，我们可以继续精进 ，打造萤火虫的效果 ，首先创建元素容器：
<div class="firefly"></div> <div class="firefly"></div> <div class="firefly"></div> <div class="firefly"></div> <div class="firefly"></div> <div class="firefly"></div> <div class="firefly"></div> <div class="firefly"></div> <div class="firefly"></div> <div class="firefly"></div> <div class="firefly"></div> <div class="firefly"></div> <div class="firefly"></div> <div class="firefly"></div> <div class="firefly"></div>这里容器越多 ，萤火虫越密集 。
随后将容器样式改成fixed定位 ，让萤火虫跟随窗口移动：
firefly { position: fixed; left: 50%; top: 50%; width: 0.4vw; height: 0.4vw; margin: -0.2vw 0 0 9.8vw; animation: ease 200s alternate infinite; pointer-events: none; } .firefly::before, .firefly::after { content: ""; position: absolute; width: 100%; height: 100%; border-radius: 50%; transform-origin: -10vw; } .firefly::before { background: black; opacity: 0.4; animation: drift ease alternate infinite; } .firefly::after { background: white; opacity: 0; box-shadow: 0 0 0vw 0vw yellow; animation: drift ease alternate infinite, flash ease infinite; } .firefly:nth-child(1) { animation-name: move1; } .firefly:nth-child(1)::before { animation-duration: 10s; } .firefly:nth-child(1)::after { animation-duration: 10s, 10206ms; animation-delay: 0ms, 8110ms; }随后编写移动动画 ，让萤火虫进行不规则运动：
@keyframes move1 { 0% { transform: translateX(-2vw) translateY(49vh) scale(0.6); } 4.7619047619% { transform: translateX(-21vw) translateY(-20vh) scale(0.88); } 9.5238095238% { transform: translateX(19vw) translateY(-20vh) scale(0.95); } 14.2857142857% { transform: translateX(-13vw) translateY(7vh) scale(0.66); } 19.0476190476% { transform: translateX(12vw) translateY(23vh) scale(0.35); } 23.8095238095% { transform: translateX(10vw) translateY(2vh) scale(0.83); } 28.5714285714% { transform: translateX(-22vw) translateY(29vh) scale(0.89); } 33.3333333333% { transform: translateX(26vw) translateY(7vh) scale(0.61); } 38.0952380952% { transform: translateX(45vw) translateY(9vh) scale(0.73); } 42.8571428571% { transform: translateX(8vw) translateY(-24vh) scale(0.97); } 47.619047619% { transform: translateX(43vw) translateY(40vh) scale(0.96); } 52.380952381% { transform: translateX(-32vw) translateY(-44vh) scale(0.84); } 57.1428571429% { transform: translateX(18vw) translateY(32vh) scale(0.53); } 61.9047619048% { transform: translateX(5vw) translateY(-9vh) scale(0.96); } 66.6666666667% { transform: translateX(-46vw) translateY(3vh) scale(0.58); } 71.4285714286% { transform: translateX(-3vw) translateY(-21vh) scale(0.74); } 76.1904761905% { transform: translateX(16vw) translateY(2vh) scale(0.9); } 80.9523809524% { transform: translateX(20vw) translateY(46vh) scale(0.77); } 85.7142857143% { transform: translateX(12vw) translateY(-23vh) scale(0.8); } 90.4761904762% { transform: translateX(8vw) translateY(-24vh) scale(0.73); } 95.2380952381% { transform: translateX(-35vw) translateY(-11vh) scale(0.47); } 100% { transform: translateX(22vw) translateY(24vh) scale(0.93); } } .firefly:nth-child(2) { animation-name: move2; } .firefly:nth-child(2)::before { animation-duration: 10s; } .firefly:nth-child(2)::after { animation-duration: 10s, 6664ms; animation-delay: 0ms, 4112ms; } @keyframes move2 { 0% { transform: translateX(-3vw) translateY(13vh) scale(1); } 4% { transform: translateX(0vw) translateY(-4vh) scale(0.79); } 8% { transform: translateX(-1vw) translateY(-41vh) scale(0.84); } 12% { transform: translateX(-43vw) translateY(3vh) scale(0.73); } 16% { transform: translateX(17vw) translateY(-39vh) scale(0.26); } 20% { transform: translateX(9vw) translateY(34vh) scale(0.57); } 24% { transform: translateX(25vw) translateY(-44vh) scale(0.42); } 28% { transform: translateX(-15vw) translateY(-1vh) scale(0.62); } 32% { transform: translateX(36vw) translateY(10vh) scale(0.89); } 36% { transform: translateX(-12vw) translateY(-41vh) scale(0.82); } 40% { transform: translateX(-1vw) translateY(42vh) scale(0.35); } 44% { transform: translateX(6vw) translateY(9vh) scale(0.93); } 48% { transform: translateX(12vw) translateY(35vh) scale(0.87); } 52% { transform: translateX(-10vw) translateY(-33vh) scale(0.85); } 56% { transform: translateX(17vw) translateY(-24vh) scale(0.6); } 60% { transform: translateX(26vw) translateY(-4vh) scale(0.59); } 64% { transform: translateX(8vw) translateY(-42vh) scale(0.71); } 68% { transform: translateX(-22vw) translateY(16vh) scale(0.79); } 72% { transform: translateX(2vw) translateY(17vh) scale(0.42); } 76% { transform: translateX(22vw) translateY(-35vh) scale(0.68); } 80% { transform: translateX(-19vw) translateY(17vh) scale(0.36); } 84% { transform: translateX(-42vw) translateY(-12vh) scale(0.96); } 88% { transform: translateX(-29vw) translateY(-9vh) scale(0.46); } 92% { transform: translateX(-41vw) translateY(19vh) scale(0.27); } 96% { transform: translateX(-7vw) translateY(32vh) scale(0.65); } 100% { transform: translateX(-2vw) translateY(-40vh) scale(0.92); } } .firefly:nth-child(3) { animation-name: move3; } .firefly:nth-child(3)::before { animation-duration: 10s; } .firefly:nth-child(3)::after { animation-duration: 10s, 6237ms; animation-delay: 0ms, 6828ms; } @keyframes move3 { 0% { transform: translateX(6vw) translateY(-31vh) scale(0.94); } 5.5555555556% { transform: translateX(-5vw) translateY(36vh) scale(0.61); } 11.1111111111% { transform: translateX(0vw) translateY(18vh) scale(0.32); } 16.6666666667% { transform: translateX(-34vw) translateY(-43vh) scale(0.36); } 22.2222222222% { transform: translateX(24vw) translateY(6vh) scale(0.92); } 27.7777777778% { transform: translateX(16vw) translateY(-20vh) scale(0.43); } 33.3333333333% { transform: translateX(1vw) translateY(27vh) scale(0.46); } 38.8888888889% { transform: translateX(7vw) translateY(50vh) scale(0.8); } 44.4444444444% { transform: translateX(24vw) translateY(10vh) scale(0.89); } 50% { transform: translateX(48vw) translateY(23vh) scale(0.71); } 55.5555555556% { transform: translateX(43vw) translateY(-5vh) scale(0.81); } 61.1111111111% { transform: translateX(27vw) translateY(-40vh) scale(0.94); } 66.6666666667% { transform: translateX(48vw) translateY(-39vh) scale(0.78); } 72.2222222222% { transform: translateX(-10vw) translateY(-40vh) scale(0.77); } 77.7777777778% { transform: translateX(2vw) translateY(4vh) scale(0.55); } 83.3333333333% { transform: translateX(41vw) translateY(-26vh) scale(0.67); } 88.8888888889% { transform: translateX(-20vw) translateY(41vh) scale(0.61); } 94.4444444444% { transform: translateX(14vw) translateY(-6vh) scale(0.66); } 100% { transform: translateX(-17vw) translateY(-20vh) scale(0.91); } } .firefly:nth-child(4) { animation-name: move4; } .firefly:nth-child(4)::before { animation-duration: 11s; } .firefly:nth-child(4)::after { animation-duration: 11s, 6607ms; animation-delay: 0ms, 8453ms; } @keyframes move4 { 0% { transform: translateX(-4vw) translateY(21vh) scale(0.76); } 4.1666666667% { transform: translateX(50vw) translateY(-3vh) scale(0.37); } 8.3333333333% { transform: translateX(-15vw) translateY(-5vh) scale(0.65); } 12.5% { transform: translateX(-47vw) translateY(-43vh) scale(0.29); } 16.6666666667% { transform: translateX(32vw) translateY(21vh) scale(0.56); } 20.8333333333% { transform: translateX(45vw) translateY(-39vh) scale(0.68); } 25% { transform: translateX(-5vw) translateY(24vh) scale(0.72); } 29.1666666667% { transform: translateX(-20vw) translateY(-46vh) scale(0.53); } 33.3333333333% { transform: translateX(22vw) translateY(-36vh) scale(1); } 37.5% { transform: translateX(41vw) translateY(-39vh) scale(0.62); } 41.6666666667% { transform: translateX(14vw) translateY(-28vh) scale(0.47); } 45.8333333333% { transform: translateX(-11vw) translateY(-22vh) scale(0.39); } 50% { transform: translateX(11vw) translateY(12vh) scale(0.37); } 54.1666666667% { transform: translateX(10vw) translateY(34vh) scale(0.69); } 58.3333333333% { transform: translateX(-26vw) translateY(1vh) scale(0.94); } 62.5% { transform: translateX(-42vw) translateY(-23vh) scale(0.83); } 66.6666666667% { transform: translateX(-19vw) translateY(37vh) scale(0.63); } 70.8333333333% { transform: translateX(-48vw) translateY(21vh) scale(0.62); } 75% { transform: translateX(2vw) translateY(-19vh) scale(0.51); } 79.1666666667% { transform: translateX(3vw) translateY(50vh) scale(0.95); } 83.3333333333% { transform: translateX(-2vw) translateY(-4vh) scale(0.62); } 87.5% { transform: translateX(-35vw) translateY(-3vh) scale(0.84); } 91.6666666667% { transform: translateX(35vw) translateY(-49vh) scale(0.46); } 95.8333333333% { transform: translateX(35vw) translateY(41vh) scale(0.73); } 100% { transform: translateX(12vw) translateY(4vh) scale(0.55); } } .firefly:nth-child(5) { animation-name: move5; } .firefly:nth-child(5)::before { animation-duration: 16s; } .firefly:nth-child(5)::after { animation-duration: 16s, 6469ms; animation-delay: 0ms, 7253ms; } @keyframes move5 { 0% { transform: translateX(6vw) translateY(19vh) scale(0.64); } 5.5555555556% { transform: translateX(-24vw) translateY(48vh) scale(1); } 11.1111111111% { transform: translateX(24vw) translateY(-17vh) scale(0.9); } 16.6666666667% { transform: translateX(-45vw) translateY(-25vh) scale(0.38); } 22.2222222222% { transform: translateX(6vw) translateY(11vh) scale(0.92); } 27.7777777778% { transform: translateX(25vw) translateY(-31vh) scale(0.85); } 33.3333333333% { transform: translateX(-36vw) translateY(36vh) scale(1); } 38.8888888889% { transform: translateX(-22vw) translateY(-44vh) scale(0.28); } 44.4444444444% { transform: translateX(-1vw) translateY(-23vh) scale(0.33); } 50% { transform: translateX(-39vw) translateY(34vh) scale(0.35); } 55.5555555556% { transform: translateX(-24vw) translateY(17vh) scale(0.82); } 61.1111111111% { transform: translateX(50vw) translateY(-38vh) scale(0.65); } 66.6666666667% { transform: translateX(-36vw) translateY(19vh) scale(0.43); } 72.2222222222% { transform: translateX(13vw) translateY(-13vh) scale(0.71); } 77.7777777778% { transform: translateX(48vw) translateY(21vh) scale(0.86); } 83.3333333333% { transform: translateX(-14vw) translateY(-48vh) scale(0.49); } 88.8888888889% { transform: translateX(6vw) translateY(-11vh) scale(0.63); } 94.4444444444% { transform: translateX(-40vw) translateY(39vh) scale(0.66); } 100% { transform: translateX(-9vw) translateY(31vh) scale(0.62); } } .firefly:nth-child(6) { animation-name: move6; } .firefly:nth-child(6)::before { animation-duration: 17s; } .firefly:nth-child(6)::after { animation-duration: 17s, 6598ms; animation-delay: 0ms, 5641ms; } @keyframes move6 { 0% { transform: translateX(17vw) translateY(-31vh) scale(0.32); } 3.5714285714% { transform: translateX(-20vw) translateY(1vh) scale(0.66); } 7.1428571429% { transform: translateX(2vw) translateY(42vh) scale(0.32); } 10.7142857143% { transform: translateX(22vw) translateY(-8vh) scale(0.72); } 14.2857142857% { transform: translateX(16vw) translateY(-32vh) scale(0.62); } 17.8571428571% { transform: translateX(14vw) translateY(-37vh) scale(0.98); } 21.4285714286% { transform: translateX(-42vw) translateY(-23vh) scale(0.76); } 25% { transform: translateX(15vw) translateY(24vh) scale(0.91); } 28.5714285714% { transform: translateX(-11vw) translateY(26vh) scale(0.95); } 32.1428571429% { transform: translateX(34vw) translateY(10vh) scale(0.29); } 35.7142857143% { transform: translateX(43vw) translateY(-14vh) scale(0.33); } 39.2857142857% { transform: translateX(5vw) translateY(-49vh) scale(0.48); } 42.8571428571% { transform: translateX(30vw) translateY(32vh) scale(0.52); } 46.4285714286% { transform: translateX(-43vw) translateY(-8vh) scale(0.61); } 50% { transform: translateX(-3vw) translateY(4vh) scale(0.85); } 53.5714285714% { transform: translateX(0vw) translateY(-17vh) scale(0.31); } 57.1428571429% { transform: translateX(-24vw) translateY(-37vh) scale(0.9); } 60.7142857143% { transform: translateX(-22vw) translateY(-30vh) scale(0.87); } 64.2857142857% { transform: translateX(39vw) translateY(10vh) scale(0.98); } 67.8571428571% { transform: translateX(26vw) translateY(-6vh) scale(0.99); } 71.4285714286% { transform: translateX(7vw) translateY(32vh) scale(0.79); } 75% { transform: translateX(-15vw) translateY(47vh) scale(0.28); } 78.5714285714% { transform: translateX(46vw) translateY(49vh) scale(0.92); } 82.1428571429% { transform: translateX(-46vw) translateY(-6vh) scale(0.98); } 85.7142857143% { transform: translateX(-48vw) translateY(-33vh) scale(0.26); } 89.2857142857% { transform: translateX(6vw) translateY(44vh) scale(0.76); } 92.8571428571% { transform: translateX(32vw) translateY(36vh) scale(0.49); } 96.4285714286% { transform: translateX(43vw) translateY(-4vh) scale(0.82); } 100% { transform: translateX(3vw) translateY(-7vh) scale(0.33); } } .firefly:nth-child(7) { animation-name: move7; } .firefly:nth-child(7)::before { animation-duration: 9s; } .firefly:nth-child(7)::after { animation-duration: 9s, 5517ms; animation-delay: 0ms, 648ms; } @keyframes move7 { 0% { transform: translateX(-17vw) translateY(-6vh) scale(0.35); } 4% { transform: translateX(37vw) translateY(36vh) scale(0.33); } 8% { transform: translateX(42vw) translateY(45vh) scale(0.5); } 12% { transform: translateX(-30vw) translateY(-3vh) scale(0.87); } 16% { transform: translateX(43vw) translateY(-38vh) scale(0.27); } 20% { transform: translateX(-3vw) translateY(-14vh) scale(1); } 24% { transform: translateX(6vw) translateY(-4vh) scale(0.31); } 28% { transform: translateX(41vw) translateY(-3vh) scale(0.32); } 32% { transform: translateX(-27vw) translateY(12vh) scale(0.47); } 36% { transform: translateX(31vw) translateY(-42vh) scale(0.99); } 40% { transform: translateX(-3vw) translateY(-2vh) scale(0.3); } 44% { transform: translateX(-9vw) translateY(45vh) scale(0.64); } 48% { transform: translateX(27vw) translateY(-11vh) scale(0.47); } 52% { transform: translateX(-38vw) translateY(16vh) scale(0.55); } 56% { transform: translateX(-18vw) translateY(31vh) scale(0.68); } 60% { transform: translateX(-8vw) translateY(-45vh) scale(0.45); } 64% { transform: translateX(-29vw) translateY(-9vh) scale(0.8); } 68% { transform: translateX(-4vw) translateY(-2vh) scale(0.69); } 72% { transform: translateX(14vw) translateY(42vh) scale(0.34); } 76% { transform: translateX(31vw) translateY(19vh) scale(0.97); } 80% { transform: translateX(-27vw) translateY(3vh) scale(0.83); } 84% { transform: translateX(-25vw) translateY(32vh) scale(0.47); } 88% { transform: translateX(-10vw) translateY(6vh) scale(0.63); } 92% { transform: translateX(-6vw) translateY(-40vh) scale(0.28); } 96% { transform: translateX(10vw) translateY(-18vh) scale(0.92); } 100% { transform: translateX(48vw) translateY(-22vh) scale(0.87); } } .firefly:nth-child(8) { animation-name: move8; } .firefly:nth-child(8)::before { animation-duration: 17s; } .firefly:nth-child(8)::after { animation-duration: 17s, 8764ms; animation-delay: 0ms, 5715ms; } @keyframes move8 { 0% { transform: translateX(-39vw) translateY(-48vh) scale(0.53); } 4.1666666667% { transform: translateX(-34vw) translateY(-14vh) scale(0.32); } 8.3333333333% { transform: translateX(24vw) translateY(-38vh) scale(0.6); } 12.5% { transform: translateX(-24vw) translateY(8vh) scale(0.86); } 16.6666666667% { transform: translateX(21vw) translateY(-38vh) scale(0.5); } 20.8333333333% { transform: translateX(13vw) translateY(-2vh) scale(0.74); } 25% { transform: translateX(38vw) translateY(-5vh) scale(0.79); } 29.1666666667% { transform: translateX(-7vw) translateY(-33vh) scale(0.81); } 33.3333333333% { transform: translateX(-33vw) translateY(34vh) scale(0.31); } 37.5% { transform: translateX(41vw) translateY(24vh) scale(0.97); } 41.6666666667% { transform: translateX(12vw) translateY(8vh) scale(0.34); } 45.8333333333% { transform: translateX(-21vw) translateY(-11vh) scale(0.35); } 50% { transform: translateX(-43vw) translateY(19vh) scale(0.46); } 54.1666666667% { transform: translateX(32vw) translateY(44vh) scale(0.71); } 58.3333333333% { transform: translateX(32vw) translateY(-10vh) scale(0.94); } 62.5% { transform: translateX(-34vw) translateY(-45vh) scale(0.67); } 66.6666666667% { transform: translateX(13vw) translateY(-47vh) scale(0.97); } 70.8333333333% { transform: translateX(0vw) translateY(-10vh) scale(0.27); } 75% { transform: translateX(-25vw) translateY(35vh) scale(0.33); } 79.1666666667% { transform: translateX(-16vw) translateY(33vh) scale(0.84); } 83.3333333333% { transform: translateX(-26vw) translateY(-32vh) scale(0.88); } 87.5% { transform: translateX(38vw) translateY(34vh) scale(0.55); } 91.6666666667% { transform: translateX(46vw) translateY(23vh) scale(0.26); } 95.8333333333% { transform: translateX(-1vw) translateY(32vh) scale(0.73); } 100% { transform: translateX(-24vw) translateY(-8vh) scale(0.61); } } .firefly:nth-child(9) { animation-name: move9; } .firefly:nth-child(9)::before { animation-duration: 17s; } .firefly:nth-child(9)::after { animation-duration: 17s, 6466ms; animation-delay: 0ms, 1191ms; } @keyframes move9 { 0% { transform: translateX(37vw) translateY(50vh) scale(0.91); } 5% { transform: translateX(-7vw) translateY(38vh) scale(0.31); } 10% { transform: translateX(-36vw) translateY(-28vh) scale(0.58); } 15% { transform: translateX(-8vw) translateY(-31vh) scale(0.59); } 20% { transform: translateX(-31vw) translateY(32vh) scale(0.96); } 25% { transform: translateX(-48vw) translateY(-26vh) scale(0.4); } 30% { transform: translateX(-12vw) translateY(-45vh) scale(0.81); } 35% { transform: translateX(-26vw) translateY(35vh) scale(0.37); } 40% { transform: translateX(40vw) translateY(49vh) scale(0.5); } 45% { transform: translateX(1vw) translateY(23vh) scale(0.72); } 50% { transform: translateX(44vw) translateY(-29vh) scale(0.53); } 55% { transform: translateX(30vw) translateY(-2vh) scale(0.9); } 60% { transform: translateX(-17vw) translateY(-38vh) scale(0.5); } 65% { transform: translateX(-34vw) translateY(-40vh) scale(0.69); } 70% { transform: translateX(16vw) translateY(22vh) scale(0.74); } 75% { transform: translateX(-24vw) translateY(-8vh) scale(0.93); } 80% { transform: translateX(30vw) translateY(24vh) scale(0.88); } 85% { transform: translateX(-46vw) translateY(33vh) scale(0.42); } 90% { transform: translateX(-7vw) translateY(24vh) scale(0.8); } 95% { transform: translateX(47vw) translateY(-20vh) scale(0.55); } 100% { transform: translateX(-27vw) translateY(-14vh) scale(0.76); } } .firefly:nth-child(10) { animation-name: move10; } .firefly:nth-child(10)::before { animation-duration: 15s; } .firefly:nth-child(10)::after { animation-duration: 15s, 8188ms; animation-delay: 0ms, 4963ms; } @keyframes move10 { 0% { transform: translateX(-48vw) translateY(26vh) scale(0.62); } 4.7619047619% { transform: translateX(36vw) translateY(-24vh) scale(0.26); } 9.5238095238% { transform: translateX(-19vw) translateY(37vh) scale(0.57); } 14.2857142857% { transform: translateX(21vw) translateY(11vh) scale(0.93); } 19.0476190476% { transform: translateX(38vw) translateY(-16vh) scale(0.31); } 23.8095238095% { transform: translateX(-25vw) translateY(-17vh) scale(0.82); } 28.5714285714% { transform: translateX(7vw)创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！