整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
馬上我們就要進(jìn)入下一個(gè)階段，也就是HTML和CSS實(shí)現(xiàn)前端界面的階段了，想必很多小伙伴都想給自己的頁(yè)面加點(diǎn)酷炫的特效，今天，我就給大家整理了一些非常酷炫的文字特效來(lái)裝點(diǎn)你的頁(yè)面！有些是從網(wǎng)絡(luò)上找的，有些是自己寫(xiě)出來(lái)的
這里介紹一點(diǎn)寫(xiě)這些特效時(shí)需要用到的屬性，（帶-webkit-開(kāi)頭的是只有Safari和Chrome等使用webkit或chromium內(nèi)核的瀏覽器才可以使用）
這個(gè)屬性用于設(shè)置文本的填充色，與直接設(shè)置顏色（color屬性）不同，它可以設(shè)置transparent（透明）
這個(gè)屬性用于設(shè)置文字的描邊，第一個(gè)值寫(xiě)描邊線的寬度，第二個(gè)寫(xiě)描邊線的顏色
文字陰影，這個(gè)屬性由四個(gè)部分組成：第一個(gè)值寫(xiě)陰影在x軸上的偏移；第二個(gè)值是在y軸上的偏移；第三個(gè)值是模糊程度（可以寫(xiě)0~？）值越大，越模糊，為0時(shí)不模糊；第四個(gè)值是陰影顏色。與box-shadow基本一致
注意：這四個(gè)值直接不需要逗號(hào)分隔，它們四個(gè)作為一個(gè)整體參數(shù)。同時(shí)也可以寫(xiě)多個(gè)參數(shù)用逗號(hào)隔開(kāi)來(lái)實(shí)現(xiàn)更強(qiáng)的效果（下方有多個(gè)效果都運(yùn)用到了這個(gè)技巧）
將背景按照設(shè)定的參數(shù)裁切，一般書(shū)寫(xiě)text（即按照文本的樣式裁切，僅保留文本的部分）然后將文本設(shè)為透明（webkit-text-fill-color屬性）就能實(shí)現(xiàn)漸變色文字等
下面就是一些字體實(shí)例了
.loukong{
/* 設(shè)置文字為透明，設(shè)置文本描邊*/
background-color: #00c4ff;
-webkit-text-fill-color: transparent;
-webkit-text-stroke:1px #000;
} .liti{
/* 文字左上設(shè)置多層淺色陰影，右下設(shè)置多層暗色陰影，文字色同背景色 */
background-color: #d2d500;
color: #d2d500;
text-shadow: -1px -1px 0px #e6e600,-2px -2px 0px #e6e600,
-3px -3px 0px #e6e600,1px 1px 0px #bfbf00,2px 2px 0px #bfbf00,3px 3px 0px #bfbf00;
} .nihong{
/* 深色底色，淺色文字，多層淺色文字陰影，彌散大 */
background-color: darkgray;
color: white;
text-shadow: 0px 0px 15px #00FFFF,0px 0px 15px #00FFFF,0px 0px 15px #00FFFF;
} 英文或者筆畫(huà)稀疏的文本比較適合，筆畫(huà)多看起來(lái)會(huì)不太好
.chongdie{
/* 兩層背景，一層與被背景色相同，一層與文字色相同 */
background-color: gray;
color: #eee;
text-shadow: 5px 5px 0 #666, 7px 7px 0 #eee;
} .huanse{
/* 兩層背景，沒(méi)啥技巧 */
background-color: darkgray;
color: white;
text-shadow: 1px 1px 0px #0000FF,2px 2px 0px #0000FF,-1px -1px 0px #E31B4E,-2px -2px 0px #E31B4E;
} .fangsheng{
/* 要把陰影與大小配合好，一般來(lái)說(shuō)大小都是偏大時(shí)采用 */
font-family: "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif;
text-transform: uppercase;/* 全開(kāi)大寫(xiě) */
font-size: 92px;
color: #f1ebe5;
text-shadow: 0 8px 9px #c4b59d, 0px -2px 1px #fff;
font-weight: bold;
letter-spacing: -4px;
background: linear-gradient(to bottom, #ece4d9 0%,#e9dfd1 100%);
} 因?yàn)樾枰玫奖尘安们校?webkit-background-clip），所以需要再嵌套一個(gè)背景div
.jianbian{
background-color: #009195;
}
.jianbian-inner{
background: linear-gradient(90deg,#f88,#88f);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
/* -webkit-text-stroke: 1px #000000; */
} 以上就是全部?jī)?nèi)容了，靈活運(yùn)用css的屬性，就能創(chuàng)造出很多你想得到的和想都想不到的特效，甚至一些連寫(xiě)腳本都很難實(shí)現(xiàn)的特效，所以，努力探索css吧，沖沖沖！
轉(zhuǎn)自簡(jiǎn)書(shū)：?jiǎn)桃欢2020強(qiáng)化班
原文鏈接：https://www.jianshu.com/p/b7fd3cf53924
擊查看canvas繪制雨滴特效
HTML5/javascript高級(jí)繪圖技術(shù)開(kāi)發(fā)實(shí)戰(zhàn)分享（附源碼視頻）
javascript群內(nèi)每日課題：原生javascript面向?qū)ο蠼Y(jié)合canvas繪制雨滴特效
知識(shí)點(diǎn)：面向?qū)ο笏季S剖析、HTML5/canvas高級(jí)繪圖API詳解，
原生javascript設(shè)計(jì)模式思維，兼容性處理
函數(shù)封裝思維，2017年就業(yè)形勢(shì)分析
PS:最近群內(nèi)很多伙伴想要難一點(diǎn)的特效，所以做了這個(gè)課題，綜合的知識(shí)點(diǎn)較多，幾乎沒(méi)有簡(jiǎn)單布局，考驗(yàn)的是html5的新特性，比如動(dòng)畫(huà)，canvas等方面的知識(shí)，還有對(duì)于原生javascript的考究也是比較全面的，包括獨(dú)立封裝javascript插件，以及原生javascript設(shè)計(jì)模式思維，雖然現(xiàn)在HTML5的兼容比較麻煩，但是未來(lái)HTML5+javascript的配合來(lái)做特效，是不錯(cuò)的，比如這個(gè)特效就是原生javascript配合canvas繪圖！
如果想要更多的企業(yè)求職加分項(xiàng)目，案例，可以來(lái)一下我的前端群216634437，每天都會(huì)精挑細(xì)選一個(gè)特效，項(xiàng)目出來(lái)詳細(xì)講解，分享！
html5/javascript雨滴特效源碼
需要文檔版源碼來(lái)我的前端群216634437，已上傳到群文件
雨滴特效視頻地址：原生javascript面向?qū)ο蠼Y(jié)合canvas繪制雨滴特效
頭條號(hào)里有許多web前端學(xué)習(xí)視頻，企業(yè)常用特效/案例/項(xiàng)目，敬請(qǐng)關(guān)注！
你覺(jué)得canva難嗎？
所周知，網(wǎng)頁(yè)的暗黑模式可以減少屏幕反射和藍(lán)光輻射，減少眼睛的疲勞感，特別是在夜間使用時(shí)更為明顯。其實(shí)暗黑模式也給霓虹燈效應(yīng)（Neon Effect）提供了發(fā)揮的環(huán)境。
霓虹燈效應(yīng)是一種視覺(jué)效果，其特點(diǎn)是在深色背景上使用鮮艷的顏色來(lái)產(chǎn)生強(qiáng)烈的視覺(jué)沖擊。這種效應(yīng)通常用于設(shè)計(jì)海報(bào)、廣告、標(biāo)志和網(wǎng)頁(yè)等。霓虹燈效應(yīng)的作用在于吸引人們的注意力和增強(qiáng)品牌形象的辨識(shí)度，因?yàn)檫@種效果讓人印象深刻且易于記憶，本次我們盤(pán)點(diǎn)適合暗色模式的網(wǎng)頁(yè)特效，還是喜歡，暗夜的你。
暗黑模式下最炫酷的效果無(wú)外乎發(fā)光，基本上頁(yè)面元素的發(fā)光需要依賴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) */
}這里使用多個(gè)陰影值來(lái)創(chuàng)建分層效果。您可以用逗號(hào)分隔多個(gè)陰影值，它們將疊加在彼此上面。
但是這種效果比較單調(diào)，box-shadow屬性只會(huì)保持所在的元素的形狀上發(fā)光，如果我們想讓一個(gè)元素的發(fā)光效果比較有層次感，那么就需要border-radius屬性的配合。
我們可以通過(guò)給出多組值（用逗號(hào)分隔）來(lái)在一個(gè)元素上堆疊多個(gè)發(fā)光效果。發(fā)光效果將首先堆疊在頂部，最后一個(gè)堆疊在底部：
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 */
}說(shuō)白了就是漸進(jìn)的光暈效果，最內(nèi)層往最內(nèi)層逐漸減淡：
配合動(dòng)畫(huà)特效，比如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;
}隨后結(jié)合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;
}我們就可以營(yíng)造出這種“冷燈看劍，劍上幾番功名”的特效：
對(duì)于SVG圖片來(lái)說(shuō)，不建議使用box-shadow，因?yàn)闆](méi)法應(yīng)用到path實(shí)體，這里建議使用filter屬性：
.shadow_filter{
filter: drop-shadow(0px 0px 25px #116466);
}這里通過(guò)第三個(gè)參數(shù)25px來(lái)控制發(fā)光的亮度，第四個(gè)參數(shù)可以改變顏色，暗色發(fā)光與亮色不發(fā)光的對(duì)比：
除了靜態(tài)的發(fā)光體，我們也可以讓發(fā)光體“動(dòng)”起來(lái)，首先建立發(fā)光體容器：
<div class="glowing">
<span style="--i:1;"></span>
<span style="--i:2;"></span>
<span style="--i:3;"></span>
</div>
<div class="glowing">
<span style="--i:1;"></span>
<span style="--i:2;"></span>
<span style="--i:3;"></span>
</div>
<div class="glowing">
<span style="--i:1;"></span>
<span style="--i:2;"></span>
<span style="--i:3;"></span>
</div>
<div class="glowing">
<span style="--i:1;"></span>
<span style="--i:2;"></span>
<span style="--i:3;"></span>
</div>隨后針對(duì)glowing容器添加動(dòng)效：
.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);
}
}這里通過(guò)colorChange方法來(lái)動(dòng)態(tài)改變?nèi)萜鞯奈恢煤皖伾Ч缦拢?/span>
在移動(dòng)發(fā)光體的基礎(chǔ)上，我們可以繼續(xù)精進(jìn)，打造螢火蟲(chóng)的效果，首先創(chuàng)建元素容器：
<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>這里容器越多，螢火蟲(chóng)越密集。
隨后將容器樣式改成fixed定位，讓螢火蟲(chóng)跟隨窗口移動(dòng)：
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;
}隨后編寫(xiě)移動(dòng)動(dòng)畫(huà)，讓螢火蟲(chóng)進(jìn)行不規(guī)則運(yùn)動(dòng)：
@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) translateY(-10vh) scale(0.27);
}
33.3333333333% {
transform: translateX(-12vw) translateY(12vh) scale(0.95);
}
38.0952380952% {
transform: translateX(-14vw) translateY(33vh) scale(0.31);
}
42.8571428571% {
transform: translateX(-38vw) translateY(26vh) scale(0.96);
}
47.619047619% {
transform: translateX(-23vw) translateY(28vh) scale(0.78);
}
52.380952381% {
transform: translateX(39vw) translateY(-46vh) scale(0.45);
}
57.1428571429% {
transform: translateX(45vw) translateY(39vh) scale(0.68);
}
61.9047619048% {
transform: translateX(-34vw) translateY(-40vh) scale(0.4);
}
66.6666666667% {
transform: translateX(49vw) translateY(45vh) scale(0.63);
}
71.4285714286% {
transform: translateX(-36vw) translateY(-8vh) scale(0.85);
}
76.1904761905% {
transform: translateX(3vw) translateY(-44vh) scale(0.92);
}
80.9523809524% {
transform: translateX(-1vw) translateY(22vh) scale(0.49);
}
85.7142857143% {
transform: translateX(47vw) translateY(-29vh) scale(0.74);
}
90.4761904762% {
transform: translateX(20vw) translateY(12vh) scale(0.94);
}
95.2380952381% {
transform: translateX(0vw) translateY(-24vh) scale(0.43);
}
100% {
transform: translateX(34vw) translateY(46vh) scale(0.61);
}
}
.firefly:nth-child(11) {
animation-name: move11;
}
.firefly:nth-child(11)::before {
animation-duration: 11s;
}
.firefly:nth-child(11)::after {
animation-duration: 11s, 9820ms;
animation-delay: 0ms, 3745ms;
}
@keyframes move11 {
0% {
transform: translateX(-3vw) translateY(-22vh) scale(0.8);
}
5.8823529412% {
transform: translateX(-11vw) translateY(34vh) scale(0.66);
}
11.7647058824% {
transform: translateX(-10vw) translateY(-17vh) scale(0.45);
}
17.6470588235% {
transform: translateX(48vw) translateY(-49vh) scale(0.55);
}
23.5294117647% {
transform: translateX(-34vw) translateY(-49vh) scale(0.36);
}
29.4117647059% {
transform: translateX(-18vw) translateY(-15vh) scale(0.48);
}
35.2941176471% {
transform: translateX(9vw) translateY(-8vh) scale(0.36);
}
41.1764705882% {
transform: translateX(42vw) translateY(-38vh) scale(0.93);
}
47.0588235294% {
transform: translateX(45vw) translateY(-28vh) scale(0.71);
}
52.9411764706% {
transform: translateX(44vw) translateY(38vh) scale(0.59);
}
58.8235294118% {
transform: translateX(-19vw) translateY(-15vh) scale(0.61);
}
64.7058823529% {
transform: translateX(-43vw) translateY(-7vh) scale(0.78);
}
70.5882352941% {
transform: translateX(36vw) translateY(-47vh) scale(0.8);
}
76.4705882353% {
transform: translateX(-39vw) translateY(16vh) scale(0.78);
}
82.3529411765% {
transform: translateX(45vw) translateY(-4vh) scale(0.67);
}
88.2352941176% {
transform: translateX(-42vw) translateY(-22vh) scale(0.38);
}
94.1176470588% {
transform: translateX(42vw) translateY(-27vh) scale(0.46);
}
100% {
transform: translateX(9vw) translateY(13vh) scale(0.31);
}
}
.firefly:nth-child(12) {
animation-name: move12;
}
.firefly:nth-child(12)::before {
animation-duration: 17s;
}
.firefly:nth-child(12)::after {
animation-duration: 17s, 7292ms;
animation-delay: 0ms, 5281ms;
}
@keyframes move12 {
0% {
transform: translateX(-9vw) translateY(38vh) scale(0.37);
}
5.8823529412% {
transform: translateX(-23vw) translateY(39vh) scale(0.57);
}
11.7647058824% {
transform: translateX(-48vw) translateY(-28vh) scale(0.72);
}
17.6470588235% {
transform: translateX(20vw) translateY(9vh) scale(0.67);
}
23.5294117647% {
transform: translateX(38vw) translateY(-24vh) scale(0.68);
}
29.4117647059% {
transform: translateX(18vw) translateY(-41vh) scale(0.36);
}
35.2941176471% {
transform: translateX(8vw) translateY(-35vh) scale(0.48);
}
41.1764705882% {
transform: translateX(8vw) translateY(21vh) scale(0.81);
}
47.0588235294% {
transform: translateX(7vw) translateY(36vh) scale(0.69);
}
52.9411764706% {
transform: translateX(-30vw) translateY(8vh) scale(0.75);
}
58.8235294118% {
transform: translateX(-31vw) translateY(0vh) scale(0.27);
}
64.7058823529% {
transform: translateX(32vw) translateY(23vh) scale(0.73);
}
70.5882352941% {
transform: translateX(50vw) translateY(14vh) scale(0.48);
}
76.4705882353% {
transform: translateX(-48vw) translateY(10vh) scale(0.41);
}
82.3529411765% {
transform: translateX(-36vw) translateY(43vh) scale(0.34);
}
88.2352941176% {
transform: translateX(18vw) translateY(-2vh) scale(0.41);
}
94.1176470588% {
transform: translateX(7vw) translateY(19vh) scale(0.38);
}
100% {
transform: translateX(-46vw) translateY(-46vh) scale(0.91);
}
}
.firefly:nth-child(13) {
animation-name: move13;
}
.firefly:nth-child(13)::before {
animation-duration: 13s;
}
.firefly:nth-child(13)::after {
animation-duration: 13s, 10699ms;
animation-delay: 0ms, 6391ms;
}
@keyframes move13 {
0% {
transform: translateX(-36vw) translateY(-25vh) scale(0.62);
}
5.2631578947% {
transform: translateX(11vw) translateY(19vh) scale(0.98);
}
10.5263157895% {
transform: translateX(12vw) translateY(47vh) scale(0.85);
}
15.7894736842% {
transform: translateX(7vw) translateY(-4vh) scale(0.28);
}
21.0526315789% {
transform: translateX(-16vw) translateY(-6vh) scale(1);
}
26.3157894737% {
transform: translateX(-4vw) translateY(48vh) scale(0.75);
}
31.5789473684% {
transform: translateX(-2vw) translateY(-31vh) scale(0.42);
}
36.8421052632% {
transform: translateX(-36vw) translateY(13vh) scale(0.65);
}
42.1052631579% {
transform: translateX(-26vw) translateY(-8vh) scale(0.38);
}
47.3684210526% {
transform: translateX(38vw) translateY(-9vh) scale(0.64);
}
52.6315789474% {
transform: translateX(-19vw) translateY(-32vh) scale(0.27);
}
57.8947368421% {
transform: translateX(-42vw) translateY(41vh) scale(0.53);
}
63.1578947368% {
transform: translateX(38vw) translateY(-25vh) scale(0.39);
}
68.4210526316% {
transform: translateX(-8vw) translateY(31vh) scale(0.58);
}
73.6842105263% {
transform: translateX(5vw) translateY(31vh) scale(0.45);
}
78.9473684211% {
transform: translateX(-12vw) translateY(11vh) scale(0.26);
}
84.2105263158% {
transform: translateX(-23vw) translateY(2vh) scale(0.75);
}
89.4736842105% {
transform: translateX(-32vw) translateY(38vh) scale(0.69);
}
94.7368421053% {
transform: translateX(2vw) translateY(49vh) scale(0.54);
}
100% {
transform: translateX(-24vw) translateY(37vh) scale(0.45);
}
}
.firefly:nth-child(14) {
animation-name: move14;
}
.firefly:nth-child(14)::before {
animation-duration: 16s;
}
.firefly:nth-child(14)::after {
animation-duration: 16s, 7006ms;
animation-delay: 0ms, 8214ms;
}
@keyframes move14 {
0% {
transform: translateX(-44vw) translateY(-5vh) scale(0.56);
}
5% {
transform: translateX(-37vw) translateY(-28vh) scale(0.53);
}
10% {
transform: translateX(-38vw) translateY(-44vh) scale(0.31);
}
15% {
transform: translateX(50vw) translateY(-41vh) scale(0.79);
}
20% {
transform: translateX(-8vw) translateY(26vh) scale(0.78);
}
25% {
transform: translateX(-42vw) translateY(-30vh) scale(0.95);
}
30% {
transform: translateX(1vw) translateY(-22vh) scale(0.65);
}
35% {
transform: translateX(-3vw) translateY(47vh) scale(0.48);
}
40% {
transform: translateX(19vw) translateY(0vh) scale(0.4);
}
45% {
transform: translateX(6vw) translateY(-39vh) scale(0.31);
}
50% {
transform: translateX(45vw) translateY(-1vh) scale(0.84);
}
55% {
transform: translateX(8vw) translateY(-2vh) scale(0.76);
}
60% {
transform: translateX(20vw) translateY(-25vh) scale(0.3);
}
65% {
transform: translateX(-40vw) translateY(-11vh) scale(0.4);
}
70% {
transform: translateX(4vw) translateY(-19vh) scale(0.91);
}
75% {
transform: translateX(-25vw) translateY(-15vh) scale(0.33);
}
80% {
transform: translateX(-9vw) translateY(27vh) scale(0.35);
}
85% {
transform: translateX(-47vw) translateY(-33vh) scale(0.76);
}
90% {
transform: translateX(47vw) translateY(-25vh) scale(0.82);
}
95% {
transform: translateX(-2vw) translateY(23vh) scale(0.33);
}
100% {
transform: translateX(33vw) translateY(45vh) scale(0.61);
}
}
.firefly:nth-child(15) {
animation-name: move15;
}
.firefly:nth-child(15)::before {
animation-duration: 13s;
}
.firefly:nth-child(15)::after {
animation-duration: 13s, 8035ms;
animation-delay: 0ms, 3803ms;
}
@keyframes move15 {
0% {
transform: translateX(0vw) translateY(-48vh) scale(0.7);
}
4.7619047619% {
transform: translateX(-34vw) translateY(-18vh) scale(0.51);
}
9.5238095238% {
transform: translateX(-36vw) translateY(-43vh) scale(0.91);
}
14.2857142857% {
transform: translateX(3vw) translateY(-20vh) scale(0.32);
}
19.0476190476% {
transform: translateX(-41vw) translateY(47vh) scale(0.98);
}
23.8095238095% {
transform: translateX(31vw) translateY(24vh) scale(0.26);
}
28.5714285714% {
transform: translateX(-49vw) translateY(50vh) scale(0.59);
}
33.3333333333% {
transform: translateX(48vw) translateY(17vh) scale(0.3);
}
38.0952380952% {
transform: translateX(39vw) translateY(-18vh) scale(0.84);
}
42.8571428571% {
transform: translateX(-17vw) translateY(-12vh) scale(0.51);
}
47.619047619% {
transform: translateX(34vw) translateY(31vh) scale(0.77);
}
52.380952381% {
transform: translateX(-39vw) translateY(-24vh) scale(0.73);
}
57.1428571429% {
transform: translateX(-43vw) translateY(45vh) scale(0.95);
}
61.9047619048% {
transform: translateX(25vw) translateY(-8vh) scale(0.72);
}
66.6666666667% {
transform: translateX(3vw) translateY(-30vh) scale(0.95);
}
71.4285714286% {
transform: translateX(-36vw) translateY(-23vh) scale(0.98);
}
76.1904761905% {
transform: translateX(23vw) translateY(-46vh) scale(0.7);
}
80.9523809524% {
transform: translateX(38vw) translateY(32vh) scale(0.92);
}
85.7142857143% {
transform: translateX(-47vw) translateY(-37vh) scale(0.57);
}
90.4761904762% {
transform: translateX(-41vw) translateY(-15vh) scale(0.84);
}
95.2380952381% {
transform: translateX(50vw) translateY(44vh) scale(0.61);
}
100% {
transform: translateX(-15vw) translateY(48vh) scale(0.66);
}
}
@keyframes drift {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes flash {
0%, 30%, 100% {
opacity: 0;
box-shadow: 0 0 0vw 0vw yellow;
}
5% {
opacity: 1;
box-shadow: 0 0 2vw 0.4vw yellow;
}
}這里每個(gè)螢火蟲(chóng)的移動(dòng)軌跡都是單獨(dú)定制的，也可以使用Sass進(jìn)行復(fù)用，效果如下：
和螢火蟲(chóng)特效不同，暗夜流星顧名思義，就是璀璨的流星劃過(guò)長(zhǎng)夜，給人以轉(zhuǎn)瞬即逝的美麗，首先還是設(shè)置容器元素：
<div class="star"></div>
<div class="meteor-1"></div>
<div class="meteor-2"></div>
<div class="meteor-3"></div>
<div class="meteor-4"></div>
<div class="meteor-5"></div>
<div class="meteor-6"></div>
<div class="meteor-7"></div>
<div class="meteor-8"></div>
<div class="meteor-9"></div>
<div class="meteor-10"></div>
<div class="meteor-11"></div>
<div class="meteor-12"></div>
<div class="meteor-13"></div>
<div class="meteor-14"></div>
<div class="meteor-15"></div>這里除了流星容器，我們還使用stat容器設(shè)置繁星滿天的效果，和流星特效交相輝映，相得益彰。
隨后設(shè)置CSS樣式:
.star {
width: 1px;
height: 1px;
background: transparent;
box-shadow: 678px 47px #fff, 1218px 895px #fff, 808px 793px #fff, 1059px 585px #fff, 1657px 258px #fff, 1671px 34px #fff, 758px 990px #fff, 290px 246px #fff, 1783px 218px #fff, 968px 883px #fff, 710px 1px #fff, 1785px 533px #fff, 868px 829px #fff, 224px 672px #fff, 1083px 122px #fff, 1539px 180px #fff, 218px 198px #fff, 1460px 661px #fff, 1480px 103px #fff, 1061px 319px #fff, 1676px 566px #fff, 1563px 130px #fff, 98px 63px #fff, 768px 957px #fff, 143px 693px #fff, 846px 363px #fff, 1372px 200px #fff, 1025px 708px #fff, 193px 160px #fff, 955px 262px #fff, 96px 433px #fff, 1628px 30px #fff, 287px 653px #fff, 441px 241px #fff, 1594px 722px #fff, 1803px 743px #fff, 1235px 85px #fff, 1780px 126px #fff, 801px 832px #fff, 1008px 51px #fff, 1552px 610px #fff, 1264px 756px #fff, 429px 980px #fff, 1058px 775px #fff, 759px 999px #fff, 696px 66px #fff, 630px 879px #fff, 1352px 688px #fff, 270px 262px #fff, 825px 821px #fff, 1670px 750px #fff, 623px 165px #fff, 1605px 987px #fff, 1386px 135px #fff, 1480px 136px #fff, 1115px 987px #fff, 783px 212px #fff, 1715px 255px #fff, 151px 339px #fff, 1653px 184px #fff, 1773px 302px #fff, 103px 604px #fff, 492px 218px #fff, 543px 831px #fff, 1137px 855px #fff, 1637px 553px #fff, 1256px 644px #fff, 789px 596px #fff, 336px 829px #fff, 442px 976px #fff, 1457px 169px #fff, 1535px 642px #fff, 1587px 775px #fff, 1437px 380px #fff, 1907px 759px #fff, 1308px 280px #fff, 752px 747px #fff, 1638px 859px #fff, 1152px 967px #fff, 469px 76px #fff, 1913px 156px #fff, 1357px 316px #fff, 1474px 191px #fff, 1387px 489px #fff, 1541px 890px #fff, 157px 647px #fff, 1288px 546px #fff, 113px 482px #fff, 676px 787px #fff, 1431px 453px #fff, 1656px 664px #fff, 1539px 855px #fff, 647px 714px #fff, 1692px 342px #fff, 303px 534px #fff, 1017px 72px #fff, 1408px 771px #fff, 1837px 517px #fff, 1561px 221px #fff, 655px 554px #fff, 1228px 607px #fff, 886px 262px #fff, 1874px 857px #fff, 1379px 252px #fff, 669px 216px #fff, 886px 803px #fff, 334px 413px #fff, 380px 517px #fff, 1448px 619px #fff, 350px 527px #fff, 327px 520px #fff, 1492px 523px #fff, 1652px 35px #fff, 1792px 921px #fff, 1538px 819px #fff, 1213px 197px #fff, 1554px 220px #fff, 1213px 554px #fff, 1046px 873px #fff, 1727px 702px #fff, 375px 369px #fff, 976px 51px #fff, 982px 448px #fff, 1750px 269px #fff, 52px 756px #fff, 1241px 334px #fff, 132px 886px #fff, 1276px 640px #fff, 1158px 35px #fff, 45px 613px #fff, 1608px 707px #fff, 744px 982px #fff, 1555px 274px #fff, 1681px 795px #fff, 660px 614px #fff, 1764px 191px #fff, 1627px 685px #fff, 1094px 542px #fff, 1762px 750px #fff, 129px 694px #fff, 579px 19px #fff, 514px 896px #fff, 967px 785px #fff, 368px 547px #fff, 262px 355px #fff, 1180px 643px #fff, 757px 416px #fff, 389px 821px #fff, 289px 731px #fff, 555px 699px #fff, 551px 934px #fff, 572px 895px #fff, 1721px 1000px #fff, 1141px 262px #fff, 552px 298px #fff, 481px 862px #fff, 614px 446px #fff, 81px 147px #fff, 1429px 595px #fff, 1389px 16px #fff, 45px 767px #fff, 801px 265px #fff, 675px 876px #fff, 1032px 139px #fff, 605px 676px #fff, 1768px 346px #fff, 494px 717px #fff, 131px 207px #fff, 818px 779px #fff, 509px 258px #fff, 551px 320px #fff, 954px 224px #fff, 902px 719px #fff, 694px 715px #fff, 1785px 205px #fff, 1168px 122px #fff, 1476px 59px #fff, 351px 303px #fff, 416px 373px #fff, 646px 94px #fff, 267px 101px #fff, 1126px 21px #fff, 313px 1px #fff, 1348px 48px #fff, 363px 652px #fff, 1333px 329px #fff, 77px 664px #fff, 1778px 628px #fff, 1423px 338px #fff, 923px 327px #fff, 601px 61px #fff, 795px 652px #fff, 150px 469px #fff, 1560px 464px #fff, 1519px 794px #fff, 458px 955px #fff, 465px 994px #fff, 458px 334px #fff, 162px 779px #fff, 1296px 266px #fff, 1775px 454px #fff, 1387px 923px #fff, 1709px 337px #fff, 281px 667px #fff, 1414px 322px #fff, 1458px 237px #fff, 257px 39px #fff, 1380px 763px #fff, 777px 93px #fff, 1895px 522px #fff, 1482px 622px #fff, 1508px 434px #fff, 1096px 909px #fff, 217px 979px #fff, 119px 492px #fff, 480px 93px #fff, 105px 889px #fff, 1194px 156px #fff, 1611px 936px #fff, 130px 105px #fff, 1664px 583px #fff, 1825px 219px #fff, 911px 618px #fff, 436px 914px #fff, 1904px 794px #fff, 1897px 860px #fff, 746px 337px #fff, 1139px 318px #fff, 1882px 950px #fff, 1022px 858px #fff, 259px 704px #fff, 1550px 509px #fff, 842px 930px #fff, 401px 888px #fff, 1357px 353px #fff, 942px 733px #fff, 667px 881px #fff, 400px 317px #fff, 998px 290px #fff, 1860px 305px #fff, 1270px 46px #fff, 1421px 522px #fff, 813px 560px #fff, 348px 592px #fff, 1732px 30px #fff, 715px 479px #fff, 503px 408px #fff, 280px 652px #fff, 1037px 343px #fff, 824px 936px #fff, 34px 888px #fff, 1317px 759px #fff, 195px 80px #fff, 738px 270px #fff, 750px 516px #fff, 1486px 11px #fff, 1897px 619px #fff, 1661px 213px #fff, 353px 867px #fff, 718px 372px #fff, 320px 558px #fff, 1144px 500px #fff, 46px 519px #fff, 1839px 572px #fff, 1572px 551px #fff, 1538px 262px #fff, 625px 704px #fff, 1742px 794px #fff, 1279px 401px #fff, 1711px 865px #fff, 1082px 486px #fff, 691px 934px #fff, 447px 764px #fff, 536px 466px #fff, 1163px 40px #fff, 1820px 454px #fff, 710px 52px #fff, 707px 772px #fff, 585px 914px #fff, 1051px 71px #fff, 232px 415px #fff, 1382px 841px #fff, 478px 25px #fff, 495px 304px #fff, 323px 569px #fff, 1907px 224px #fff, 56px 997px #fff, 1653px 143px #fff, 22px 313px #fff, 613px 25px #fff, 1706px 190px #fff, 373px 719px #fff, 1744px 317px #fff, 622px 866px #fff, 799px 903px #fff, 461px 77px #fff, 282px 4px #fff, 1703px 688px #fff, 1542px 555px #fff, 1384px 38px #fff;
}
.meteor-1 {
position: absolute;
top: 221px;
left: 19%;
width: 300px;
height: 1px;
transform: rotate(-45deg);
background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
animation: meteor 6.7s linear infinite;
}
.meteor-1:before {
content: "";
position: absolute;
width: 4px;
height: 5px;
border-radius: 50%;
margin-top: -2px;
background: rgba(255, 255, 255, 0.7);
box-shadow: 0 0 15px 3px #fff;
}
.meteor-2 {
position: absolute;
top: 125px;
left: 90%;
width: 300px;
height: 1px;
transform: rotate(-45deg);
background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
animation: meteor 5.4s linear infinite;
}
.meteor-2:before {
content: "";
position: absolute;
width: 4px;
height: 5px;
border-radius: 50%;
margin-top: -2px;
background: rgba(255, 255, 255, 0.7);
box-shadow: 0 0 15px 3px #fff;
}
.meteor-3 {
position: absolute;
top: 83px;
left: 39%;
width: 300px;
height: 1px;
transform: rotate(-45deg);
background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
animation: meteor 5s linear infinite;
}
.meteor-3:before {
content: "";
position: absolute;
width: 4px;
height: 5px;
border-radius: 50%;
margin-top: -2px;
background: rgba(255, 255, 255, 0.7);
box-shadow: 0 0 15px 3px #fff;
}
.meteor-4 {
position: absolute;
top: 222px;
left: 93%;
width: 300px;
height: 1px;
transform: rotate(-45deg);
background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
animation: meteor 5.1s linear infinite;
}
.meteor-4:before {
content: "";
position: absolute;
width: 4px;
height: 5px;
border-radius: 50%;
margin-top: -2px;
background: rgba(255, 255, 255, 0.7);
box-shadow: 0 0 15px 3px #fff;
}
.meteor-5 {
position: absolute;
top: 284px;
left: 27%;
width: 300px;
height: 1px;
transform: rotate(-45deg);
background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
animation: meteor 6.1s linear infinite;
}
.meteor-5:before {
content: "";
position: absolute;
width: 4px;
height: 5px;
border-radius: 50%;
margin-top: -2px;
background: rgba(255, 255, 255, 0.7);
box-shadow: 0 0 15px 3px #fff;
}
.meteor-6 {
position: absolute;
top: 146px;
left: 74%;
width: 300px;
height: 1px;
transform: rotate(-45deg);
background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
animation: meteor 5.5s linear infinite;
}
.meteor-6:before {
content: "";
position: absolute;
width: 4px;
height: 5px;
border-radius: 50%;
margin-top: -2px;
background: rgba(255, 255, 255, 0.7);
box-shadow: 0 0 15px 3px #fff;
}
.meteor-7 {
position: absolute;
top: 185px;
left: 32%;
width: 300px;
height: 1px;
transform: rotate(-45deg);
background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
animation: meteor 7s linear infinite;
}
.meteor-7:before {
content: "";
position: absolute;
width: 4px;
height: 5px;
border-radius: 50%;
margin-top: -2px;
background: rgba(255, 255, 255, 0.7);
box-shadow: 0 0 15px 3px #fff;
}
.meteor-8 {
position: absolute;
top: 223px;
left: 24%;
width: 300px;
height: 1px;
transform: rotate(-45deg);
background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
animation: meteor 3.7s linear infinite;
}
.meteor-8:before {
content: "";
position: absolute;
width: 4px;
height: 5px;
border-radius: 50%;
margin-top: -2px;
background: rgba(255, 255, 255, 0.7);
box-shadow: 0 0 15px 3px #fff;
}
.meteor-9 {
position: absolute;
top: 272px;
left: 39%;
width: 300px;
height: 1px;
transform: rotate(-45deg);
background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
animation: meteor 3.8s linear infinite;
}
.meteor-9:before {
content: "";
position: absolute;
width: 4px;
height: 5px;
border-radius: 50%;
margin-top: -2px;
background: rgba(255, 255, 255, 0.7);
box-shadow: 0 0 15px 3px #fff;
}
.meteor-10 {
position: absolute;
top: 201px;
left: 33%;
width: 300px;
height: 1px;
transform: rotate(-45deg);
background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
animation: meteor 5.2s linear infinite;
}
.meteor-10:before {
content: "";
position: absolute;
width: 4px;
height: 5px;
border-radius: 50%;
margin-top: -2px;
background: rgba(255, 255, 255, 0.7);
box-shadow: 0 0 15px 3px #fff;
}
.meteor-11 {
position: absolute;
top: 241px;
left: 67%;
width: 300px;
height: 1px;
transform: rotate(-45deg);
background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
animation: meteor 4s linear infinite;
}
.meteor-11:before {
content: "";
position: absolute;
width: 4px;
height: 5px;
border-radius: 50%;
margin-top: -2px;
background: rgba(255, 255, 255, 0.7);
box-shadow: 0 0 15px 3px #fff;
}
.meteor-12 {
position: absolute;
top: 290px;
left: 86%;
width: 300px;
height: 1px;
transform: rotate(-45deg);
background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
animation: meteor 8.7s linear infinite;
}
.meteor-12:before {
content: "";
position: absolute;
width: 4px;
height: 5px;
border-radius: 50%;
margin-top: -2px;
background: rgba(255, 255, 255, 0.7);
box-shadow: 0 0 15px 3px #fff;
}
.meteor-13 {
position: absolute;
top: 77px;
left: 30%;
width: 300px;
height: 1px;
transform: rotate(-45deg);
background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
animation: meteor 6.1s linear infinite;
}
.meteor-13:before {
content: "";
position: absolute;
width: 4px;
height: 5px;
border-radius: 50%;
margin-top: -2px;
background: rgba(255, 255, 255, 0.7);
box-shadow: 0 0 15px 3px #fff;
}
.meteor-14 {
position: absolute;
top: 81px;
left: 22%;
width: 300px;
height: 1px;
transform: rotate(-45deg);
background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
animation: meteor 9.6s linear infinite;
}
.meteor-14:before {
content: "";
position: absolute;
width: 4px;
height: 5px;
border-radius: 50%;
margin-top: -2px;
background: rgba(255, 255, 255, 0.7);
box-shadow: 0 0 15px 3px #fff;
}
.meteor-15 {
position: absolute;
top: 189px;
left: 82%;
width: 300px;
height: 1px;
transform: rotate(-45deg);
background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
animation: meteor 9.7s linear infinite;
}
.meteor-15:before {
content: "";
position: absolute;
width: 4px;
height: 5px;
border-radius: 50%;
margin-top: -2px;
background: rgba(255, 255, 255, 0.7);
box-shadow: 0 0 15px 3px #fff;
}
@keyframes meteor {
0% {
opacity: 1;
margin-top: -300px;
margin-right: -300px;
}
12% {
opacity: 0;
}
15% {
margin-top: 300px;
margin-left: -600px;
opacity: 0;
}
100% {
opacity: 0;
}
}這里stat容器通過(guò)上文的box-shadow屬性設(shè)置發(fā)光點(diǎn)，隨后15顆流星容器通過(guò)meteor方法效果劃過(guò)夜空：
身前是萬(wàn)家燈火，身后是繁星閃爍，絕了。
白天不懂夜的黑，夜色朦朧最迷離，黑夜給了我們黑色的眼睛，我們卻用它來(lái)尋找發(fā)光的特效，暗夜發(fā)光，獨(dú)自閃耀，攝人魂魄，心馳神往，別有一番風(fēng)味。
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
