Aurora Effect

Developer

Size

6,624 Kb

Views

42,504

Aurora Effect Previews
Aurora Effect HTML Codes
Aurora Effect CSS Codes

How do I make an aurora effect?

What is a aurora effect? How do you make a aurora effect? This script and codes were developed by Insprd on 13 September 2022, Tuesday.

Aurora Effect Previews

Aurora Effect - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Aurora Effect</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ .header { width: 100%; height: 285px; position: absolute;
}
.underneath { background: #2e3846 url("https://f.cl.ly/items/151l0v2g3f0o3U3v2b1C/blurred_lines_2.jpg"); color: #ecf2f9; text-align: center; animation: bgscroll 40s infinite linear; transform-origin: top left; z-index: 1;
}
.particle-container { z-index: 2; overflow: hidden;
}
ul#particles { width: 1200px; position: relative;
}
li.particle { list-style-type: none; /* not sure why reset didn't clear this */ border-style: solid; border-color: transparent; position: absolute; bottom: 0; transform-origin: bottom;
}
li.particle:nth-child(0) { border-width: 288px 25px; border-bottom-color: black; -webkit-filter: blur(15px); /* prefix support?? */ left: 391px; animation: grow 1s infinite alternate ease-in-out 2s; -moz-transition: bottom 1.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -o-transition: bottom 1.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -webkit-transition: bottom 1.5s cubic-bezier(0.17, 0.67, 0.52, 1.07); -webkit-transition-delay: 0.7s; transition: bottom 1.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s;
}
li.particle:nth-child(1) { border-width: 204px 35px; border-bottom-color: black; -webkit-filter: blur(15px); /* prefix support?? */ left: 161px; animation: grow 2s infinite alternate ease-in-out 1s; -moz-transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -o-transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -webkit-transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07); -webkit-transition-delay: 0.7s; transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s;
}
li.particle:nth-child(2) { border-width: 345px 40px; border-bottom-color: black; -webkit-filter: blur(15px); /* prefix support?? */ left: 95px; animation: grow 1s infinite alternate ease-in-out 1s; -moz-transition: bottom 1.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -o-transition: bottom 1.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -webkit-transition: bottom 1.5s cubic-bezier(0.17, 0.67, 0.52, 1.07); -webkit-transition-delay: 0.7s; transition: bottom 1.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s;
}
li.particle:nth-child(3) { border-width: 135px 24px; border-bottom-color: black; -webkit-filter: blur(15px); /* prefix support?? */ left: 687px; animation: grow 2s infinite alternate ease-in-out 1s; -moz-transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -o-transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -webkit-transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07); -webkit-transition-delay: 0.7s; transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s;
}
li.particle:nth-child(4) { border-width: 117px 23px; border-bottom-color: black; -webkit-filter: blur(15px); /* prefix support?? */ left: 555px; animation: grow 2s infinite alternate ease-in-out 1s; -moz-transition: bottom 4.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -o-transition: bottom 4.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -webkit-transition: bottom 4.5s cubic-bezier(0.17, 0.67, 0.52, 1.07); -webkit-transition-delay: 0.7s; transition: bottom 4.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s;
}
li.particle:nth-child(5) { border-width: 124px 19px; border-bottom-color: black; -webkit-filter: blur(15px); /* prefix support?? */ left: 156px; animation: grow 2s infinite alternate ease-in-out 1s; -moz-transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -o-transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -webkit-transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07); -webkit-transition-delay: 0.7s; transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s;
}
li.particle:nth-child(6) { border-width: 107px 47px; border-bottom-color: black; -webkit-filter: blur(15px); /* prefix support?? */ left: 935px; animation: grow 2s infinite alternate ease-in-out 1s; -moz-transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -o-transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -webkit-transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07); -webkit-transition-delay: 0.7s; transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s;
}
li.particle:nth-child(7) { border-width: 61px 1px; border-bottom-color: black; -webkit-filter: blur(15px); /* prefix support?? */ left: 151px; animation: grow 2s infinite alternate ease-in-out 2s; -moz-transition: bottom 1.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -o-transition: bottom 1.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -webkit-transition: bottom 1.5s cubic-bezier(0.17, 0.67, 0.52, 1.07); -webkit-transition-delay: 0.7s; transition: bottom 1.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s;
}
li.particle:nth-child(8) { border-width: 25px 7px; border-bottom-color: black; -webkit-filter: blur(15px); /* prefix support?? */ left: 867px; animation: grow 2s infinite alternate ease-in-out 1s; -moz-transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -o-transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -webkit-transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07); -webkit-transition-delay: 0.7s; transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s;
}
li.particle:nth-child(9) { border-width: 335px 8px; border-bottom-color: black; -webkit-filter: blur(15px); /* prefix support?? */ left: 903px; animation: grow 1s infinite alternate ease-in-out 2s; -moz-transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -o-transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -webkit-transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07); -webkit-transition-delay: 0.7s; transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s;
}
li.particle:nth-child(10) { border-width: 271px 9px; border-bottom-color: black; -webkit-filter: blur(15px); /* prefix support?? */ left: 730px; animation: grow 1s infinite alternate ease-in-out 2s; -moz-transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -o-transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -webkit-transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07); -webkit-transition-delay: 0.7s; transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s;
}
li.particle:nth-child(11) { border-width: 44px 21px; border-bottom-color: black; -webkit-filter: blur(15px); /* prefix support?? */ left: 371px; animation: grow 2s infinite alternate ease-in-out 1s; -moz-transition: bottom 1.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -o-transition: bottom 1.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -webkit-transition: bottom 1.5s cubic-bezier(0.17, 0.67, 0.52, 1.07); -webkit-transition-delay: 0.7s; transition: bottom 1.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s;
}
li.particle:nth-child(12) { border-width: 220px 36px; border-bottom-color: black; -webkit-filter: blur(15px); /* prefix support?? */ left: 14px; animation: grow 3s infinite alternate ease-in-out 2s; -moz-transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -o-transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -webkit-transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07); -webkit-transition-delay: 0.7s; transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s;
}
li.particle:nth-child(13) { border-width: 342px 28px; border-bottom-color: black; -webkit-filter: blur(15px); /* prefix support?? */ left: 825px; animation: grow 3s infinite alternate ease-in-out 1s; -moz-transition: bottom 4.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -o-transition: bottom 4.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -webkit-transition: bottom 4.5s cubic-bezier(0.17, 0.67, 0.52, 1.07); -webkit-transition-delay: 0.7s; transition: bottom 4.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s;
}
li.particle:nth-child(14) { border-width: 253px 17px; border-bottom-color: black; -webkit-filter: blur(15px); /* prefix support?? */ left: 606px; animation: grow 1s infinite alternate ease-in-out 1s; -moz-transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -o-transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -webkit-transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07); -webkit-transition-delay: 0.7s; transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s;
}
li.particle:nth-child(15) { border-width: 29px 20px; border-bottom-color: black; -webkit-filter: blur(15px); /* prefix support?? */ left: 610px; animation: grow 2s infinite alternate ease-in-out 1s; -moz-transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -o-transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -webkit-transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07); -webkit-transition-delay: 0.7s; transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s;
}
li.particle:nth-child(16) { border-width: 277px 11px; border-bottom-color: black; -webkit-filter: blur(15px); /* prefix support?? */ left: 170px; animation: grow 3s infinite alternate ease-in-out 2s; -moz-transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -o-transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -webkit-transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07); -webkit-transition-delay: 0.7s; transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s;
}
li.particle:nth-child(17) { border-width: 137px 32px; border-bottom-color: black; -webkit-filter: blur(15px); /* prefix support?? */ left: 245px; animation: grow 3s infinite alternate ease-in-out 1s; -moz-transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -o-transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -webkit-transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07); -webkit-transition-delay: 0.7s; transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s;
}
li.particle:nth-child(18) { border-width: 161px 50px; border-bottom-color: black; -webkit-filter: blur(15px); /* prefix support?? */ left: 1089px; animation: grow 2s infinite alternate ease-in-out 1s; -moz-transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -o-transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -webkit-transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07); -webkit-transition-delay: 0.7s; transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s;
}
li.particle:nth-child(19) { border-width: 87px 34px; border-bottom-color: black; -webkit-filter: blur(15px); /* prefix support?? */ left: 765px; animation: grow 3s infinite alternate ease-in-out 1s; -moz-transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -o-transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -webkit-transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07); -webkit-transition-delay: 0.7s; transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s;
}
li.particle:nth-child(20) { border-width: 176px 41px; border-bottom-color: black; -webkit-filter: blur(15px); /* prefix support?? */ left: 599px; animation: grow 2s infinite alternate ease-in-out 2s; -moz-transition: bottom 4.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -o-transition: bottom 4.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -webkit-transition: bottom 4.5s cubic-bezier(0.17, 0.67, 0.52, 1.07); -webkit-transition-delay: 0.7s; transition: bottom 4.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s;
}
li.particle:nth-child(21) { border-width: 211px 4px; border-bottom-color: black; -webkit-filter: blur(15px); /* prefix support?? */ left: 109px; animation: grow 3s infinite alternate ease-in-out 1s; -moz-transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -o-transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -webkit-transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07); -webkit-transition-delay: 0.7s; transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s;
}
li.particle:nth-child(22) { border-width: 81px 29px; border-bottom-color: black; -webkit-filter: blur(15px); /* prefix support?? */ left: 1036px; animation: grow 1s infinite alternate ease-in-out 2s; -moz-transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -o-transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -webkit-transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07); -webkit-transition-delay: 0.7s; transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s;
}
li.particle:nth-child(23) { border-width: 79px 35px; border-bottom-color: black; -webkit-filter: blur(15px); /* prefix support?? */ left: 121px; animation: grow 1s infinite alternate ease-in-out 2s; -moz-transition: bottom 1.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -o-transition: bottom 1.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -webkit-transition: bottom 1.5s cubic-bezier(0.17, 0.67, 0.52, 1.07); -webkit-transition-delay: 0.7s; transition: bottom 1.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s;
}
li.particle:nth-child(24) { border-width: 324px 11px; border-bottom-color: black; -webkit-filter: blur(15px); /* prefix support?? */ left: 696px; animation: grow 1s infinite alternate ease-in-out 2s; -moz-transition: bottom 1.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -o-transition: bottom 1.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -webkit-transition: bottom 1.5s cubic-bezier(0.17, 0.67, 0.52, 1.07); -webkit-transition-delay: 0.7s; transition: bottom 1.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s;
}
li.particle:nth-child(25) { border-width: 61px 38px; border-bottom-color: black; -webkit-filter: blur(15px); /* prefix support?? */ left: 504px; animation: grow 2s infinite alternate ease-in-out 1s; -moz-transition: bottom 1.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -o-transition: bottom 1.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -webkit-transition: bottom 1.5s cubic-bezier(0.17, 0.67, 0.52, 1.07); -webkit-transition-delay: 0.7s; transition: bottom 1.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s;
}
li.particle:nth-child(25) { border-width: 104px 28px; border-bottom-color: white; -webkit-filter: blur(20px); /* prefix support?? */ left: 244px; animation: grow 2s infinite alternate ease-in-out 2s; -moz-transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -o-transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -webkit-transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07); -webkit-transition-delay: 0.7s; transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s;
}
li.particle:nth-child(26) { border-width: 337px 24px; border-bottom-color: white; -webkit-filter: blur(20px); /* prefix support?? */ left: 247px; animation: grow 4s infinite alternate ease-in-out 2s; -moz-transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -o-transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -webkit-transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07); -webkit-transition-delay: 0.7s; transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s;
}
li.particle:nth-child(27) { border-width: 92px 42px; border-bottom-color: white; -webkit-filter: blur(20px); /* prefix support?? */ left: 684px; animation: grow 2s infinite alternate ease-in-out 1s; -moz-transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -o-transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -webkit-transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07); -webkit-transition-delay: 0.7s; transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s;
}
li.particle:nth-child(28) { border-width: 139px 21px; border-bottom-color: white; -webkit-filter: blur(20px); /* prefix support?? */ left: 46px; animation: grow 4s infinite alternate ease-in-out 3s; -moz-transition: bottom 4.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -o-transition: bottom 4.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -webkit-transition: bottom 4.5s cubic-bezier(0.17, 0.67, 0.52, 1.07); -webkit-transition-delay: 0.7s; transition: bottom 4.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s;
}
li.particle:nth-child(29) { border-width: 314px 34px; border-bottom-color: white; -webkit-filter: blur(20px); /* prefix support?? */ left: 891px; animation: grow 4s infinite alternate ease-in-out 2s; -moz-transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -o-transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -webkit-transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07); -webkit-transition-delay: 0.7s; transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s;
}
li.particle:nth-child(30) { border-width: 4px 26px; border-bottom-color: white; -webkit-filter: blur(20px); /* prefix support?? */ left: 110px; animation: grow 4s infinite alternate ease-in-out 1s; -moz-transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -o-transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -webkit-transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07); -webkit-transition-delay: 0.7s; transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s;
}
li.particle:nth-child(31) { border-width: 89px 39px; border-bottom-color: white; -webkit-filter: blur(20px); /* prefix support?? */ left: 913px; animation: grow 3s infinite alternate ease-in-out 2s; -moz-transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -o-transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -webkit-transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07); -webkit-transition-delay: 0.7s; transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s;
}
li.particle:nth-child(32) { border-width: 173px 5px; border-bottom-color: white; -webkit-filter: blur(20px); /* prefix support?? */ left: 919px; animation: grow 3s infinite alternate ease-in-out 1s; -moz-transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -o-transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -webkit-transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07); -webkit-transition-delay: 0.7s; transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s;
}
li.particle:nth-child(33) { border-width: 318px 5px; border-bottom-color: white; -webkit-filter: blur(20px); /* prefix support?? */ left: 437px; animation: grow 2s infinite alternate ease-in-out 2s; -moz-transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -o-transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -webkit-transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07); -webkit-transition-delay: 0.7s; transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s;
}
li.particle:nth-child(34) { border-width: 144px 17px; border-bottom-color: white; -webkit-filter: blur(20px); /* prefix support?? */ left: 793px; animation: grow 2s infinite alternate ease-in-out 1s; -moz-transition: bottom 4.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -o-transition: bottom 4.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -webkit-transition: bottom 4.5s cubic-bezier(0.17, 0.67, 0.52, 1.07); -webkit-transition-delay: 0.7s; transition: bottom 4.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s;
}
li.particle:nth-child(35) { border-width: 89px 3px; border-bottom-color: white; -webkit-filter: blur(20px); /* prefix support?? */ left: 378px; animation: grow 1s infinite alternate ease-in-out 2s; -moz-transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -o-transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -webkit-transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07); -webkit-transition-delay: 0.7s; transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s;
}
li.particle:nth-child(36) { border-width: 21px 14px; border-bottom-color: white; -webkit-filter: blur(20px); /* prefix support?? */ left: 904px; animation: grow 2s infinite alternate ease-in-out 2s; -moz-transition: bottom 1.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -o-transition: bottom 1.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -webkit-transition: bottom 1.5s cubic-bezier(0.17, 0.67, 0.52, 1.07); -webkit-transition-delay: 0.7s; transition: bottom 1.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s;
}
li.particle:nth-child(37) { border-width: 126px 38px; border-bottom-color: white; -webkit-filter: blur(20px); /* prefix support?? */ left: 1084px; animation: grow 1s infinite alternate ease-in-out 1s; -moz-transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -o-transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -webkit-transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07); -webkit-transition-delay: 0.7s; transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s;
}
li.particle:nth-child(38) { border-width: 96px 25px; border-bottom-color: white; -webkit-filter: blur(20px); /* prefix support?? */ left: 1099px; animation: grow 1s infinite alternate ease-in-out 3s; -moz-transition: bottom 4.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -o-transition: bottom 4.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -webkit-transition: bottom 4.5s cubic-bezier(0.17, 0.67, 0.52, 1.07); -webkit-transition-delay: 0.7s; transition: bottom 4.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s;
}
li.particle:nth-child(39) { border-width: 158px 37px; border-bottom-color: white; -webkit-filter: blur(20px); /* prefix support?? */ left: 275px; animation: grow 3s infinite alternate ease-in-out 3s; -moz-transition: bottom 4.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -o-transition: bottom 4.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -webkit-transition: bottom 4.5s cubic-bezier(0.17, 0.67, 0.52, 1.07); -webkit-transition-delay: 0.7s; transition: bottom 4.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s;
}
li.particle:nth-child(40) { border-width: 296px 5px; border-bottom-color: white; -webkit-filter: blur(20px); /* prefix support?? */ left: 716px; animation: grow 1s infinite alternate ease-in-out 2s; -moz-transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -o-transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -webkit-transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07); -webkit-transition-delay: 0.7s; transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s;
}
li.particle:nth-child(41) { border-width: 25px 39px; border-bottom-color: white; -webkit-filter: blur(20px); /* prefix support?? */ left: 8px; animation: grow 2s infinite alternate ease-in-out 3s; -moz-transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -o-transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -webkit-transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07); -webkit-transition-delay: 0.7s; transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s;
}
li.particle:nth-child(42) { border-width: 92px 9px; border-bottom-color: white; -webkit-filter: blur(20px); /* prefix support?? */ left: 254px; animation: grow 1s infinite alternate ease-in-out 1s; -moz-transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -o-transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -webkit-transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07); -webkit-transition-delay: 0.7s; transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s;
}
li.particle:nth-child(43) { border-width: 94px 41px; border-bottom-color: white; -webkit-filter: blur(20px); /* prefix support?? */ left: 714px; animation: grow 4s infinite alternate ease-in-out 2s; -moz-transition: bottom 1.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -o-transition: bottom 1.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -webkit-transition: bottom 1.5s cubic-bezier(0.17, 0.67, 0.52, 1.07); -webkit-transition-delay: 0.7s; transition: bottom 1.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s;
}
li.particle:nth-child(44) { border-width: 326px 29px; border-bottom-color: white; -webkit-filter: blur(20px); /* prefix support?? */ left: 554px; animation: grow 3s infinite alternate ease-in-out 1s; -moz-transition: bottom 4.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -o-transition: bottom 4.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -webkit-transition: bottom 4.5s cubic-bezier(0.17, 0.67, 0.52, 1.07); -webkit-transition-delay: 0.7s; transition: bottom 4.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s;
}
li.particle:nth-child(45) { border-width: 28px 9px; border-bottom-color: white; -webkit-filter: blur(20px); /* prefix support?? */ left: 821px; animation: grow 2s infinite alternate ease-in-out 2s; -moz-transition: bottom 4.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -o-transition: bottom 4.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -webkit-transition: bottom 4.5s cubic-bezier(0.17, 0.67, 0.52, 1.07); -webkit-transition-delay: 0.7s; transition: bottom 4.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s;
}
li.particle:nth-child(46) { border-width: 66px 44px; border-bottom-color: white; -webkit-filter: blur(20px); /* prefix support?? */ left: 178px; animation: grow 1s infinite alternate ease-in-out 2s; -moz-transition: bottom 1.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -o-transition: bottom 1.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -webkit-transition: bottom 1.5s cubic-bezier(0.17, 0.67, 0.52, 1.07); -webkit-transition-delay: 0.7s; transition: bottom 1.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s;
}
li.particle:nth-child(47) { border-width: 252px 13px; border-bottom-color: white; -webkit-filter: blur(20px); /* prefix support?? */ left: 935px; animation: grow 3s infinite alternate ease-in-out 2s; -moz-transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -o-transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -webkit-transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07); -webkit-transition-delay: 0.7s; transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s;
}
li.particle:nth-child(48) { border-width: 216px 22px; border-bottom-color: white; -webkit-filter: blur(20px); /* prefix support?? */ left: 355px; animation: grow 1s infinite alternate ease-in-out 3s; -moz-transition: bottom 4.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -o-transition: bottom 4.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -webkit-transition: bottom 4.5s cubic-bezier(0.17, 0.67, 0.52, 1.07); -webkit-transition-delay: 0.7s; transition: bottom 4.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s;
}
li.particle:nth-child(49) { border-width: 309px 21px; border-bottom-color: white; -webkit-filter: blur(20px); /* prefix support?? */ left: 157px; animation: grow 4s infinite alternate ease-in-out 3s; -moz-transition: bottom 1.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -o-transition: bottom 1.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -webkit-transition: bottom 1.5s cubic-bezier(0.17, 0.67, 0.52, 1.07); -webkit-transition-delay: 0.7s; transition: bottom 1.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s;
}
li.particle:nth-child(50) { border-width: 207px 17px; border-bottom-color: white; -webkit-filter: blur(20px); /* prefix support?? */ left: 122px; animation: grow 4s infinite alternate ease-in-out 3s; -moz-transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -o-transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -webkit-transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07); -webkit-transition-delay: 0.7s; transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s;
}
.on-top { background: linear-gradient(140deg, #f28d13 0%, #d10927 60%); /* hues from PSD */ opacity: 0.86; z-index: 3;
}
/*	Animations */
@keyframes bgscroll { 0% { background-position: 0 0; animation-timing-function: ease-in-out; } 20% { background-position: -600px -600px; animation-timing-function: ease-in-out; } 40% { background-position: -400px -650px; animation-timing-function: ease-in-out; } 50% { background-position: -550px -400px; animation-timing-function: ease-in-out; } 70% { background-position: -200px -950px; animation-timing-function: ease-in-out; } 80% { background-position: -1250px -1500px; animation-timing-function: ease-in-out; } 100% { background-position: -400px -400px; animation-timing-function: ease-in-out; }
}
@keyframes grow { to { -moz-transform: scale(0.3); -ms-transform: scale(0.3); -webkit-transform: scale(0.3); transform: scale(0.3); }
}
@keyframes start { from { bottom: 200px; } to { bottom: 0; }
}
/* normalize & setup */
html, body { border: 0; padding: 0; margin: 0;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class='header underneath'></div>
<div class='header particle-container'> <ul id='particles'></ul> <li class='particle'></li> <li class='particle'></li> <li class='particle'></li> <li class='particle'></li> <li class='particle'></li> <li class='particle'></li> <li class='particle'></li> <li class='particle'></li> <li class='particle'></li> <li class='particle'></li> <li class='particle'></li> <li class='particle'></li> <li class='particle'></li> <li class='particle'></li> <li class='particle'></li> <li class='particle'></li> <li class='particle'></li> <li class='particle'></li> <li class='particle'></li> <li class='particle'></li> <li class='particle'></li> <li class='particle'></li> <li class='particle'></li> <li class='particle'></li> <li class='particle'></li> <li class='particle'></li> <li class='particle'></li> <li class='particle'></li> <li class='particle'></li> <li class='particle'></li> <li class='particle'></li> <li class='particle'></li> <li class='particle'></li> <li class='particle'></li> <li class='particle'></li> <li class='particle'></li> <li class='particle'></li> <li class='particle'></li> <li class='particle'></li> <li class='particle'></li> <li class='particle'></li> <li class='particle'></li> <li class='particle'></li> <li class='particle'></li> <li class='particle'></li> <li class='particle'></li> <li class='particle'></li> <li class='particle'></li> <li class='particle'></li> <li class='particle'></li>
</div>
<div class='header on-top'></div>
</body>
</html>

Aurora Effect - Script Codes CSS Codes

.header { width: 100%; height: 285px; position: absolute;
}
.underneath { background: #2e3846 url("https://f.cl.ly/items/151l0v2g3f0o3U3v2b1C/blurred_lines_2.jpg"); color: #ecf2f9; text-align: center; animation: bgscroll 40s infinite linear; transform-origin: top left; z-index: 1;
}
.particle-container { z-index: 2; overflow: hidden;
}
ul#particles { width: 1200px; position: relative;
}
li.particle { list-style-type: none; /* not sure why reset didn't clear this */ border-style: solid; border-color: transparent; position: absolute; bottom: 0; transform-origin: bottom;
}
li.particle:nth-child(0) { border-width: 288px 25px; border-bottom-color: black; -webkit-filter: blur(15px); /* prefix support?? */ left: 391px; animation: grow 1s infinite alternate ease-in-out 2s; -moz-transition: bottom 1.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -o-transition: bottom 1.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -webkit-transition: bottom 1.5s cubic-bezier(0.17, 0.67, 0.52, 1.07); -webkit-transition-delay: 0.7s; transition: bottom 1.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s;
}
li.particle:nth-child(1) { border-width: 204px 35px; border-bottom-color: black; -webkit-filter: blur(15px); /* prefix support?? */ left: 161px; animation: grow 2s infinite alternate ease-in-out 1s; -moz-transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -o-transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -webkit-transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07); -webkit-transition-delay: 0.7s; transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s;
}
li.particle:nth-child(2) { border-width: 345px 40px; border-bottom-color: black; -webkit-filter: blur(15px); /* prefix support?? */ left: 95px; animation: grow 1s infinite alternate ease-in-out 1s; -moz-transition: bottom 1.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -o-transition: bottom 1.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -webkit-transition: bottom 1.5s cubic-bezier(0.17, 0.67, 0.52, 1.07); -webkit-transition-delay: 0.7s; transition: bottom 1.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s;
}
li.particle:nth-child(3) { border-width: 135px 24px; border-bottom-color: black; -webkit-filter: blur(15px); /* prefix support?? */ left: 687px; animation: grow 2s infinite alternate ease-in-out 1s; -moz-transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -o-transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -webkit-transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07); -webkit-transition-delay: 0.7s; transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s;
}
li.particle:nth-child(4) { border-width: 117px 23px; border-bottom-color: black; -webkit-filter: blur(15px); /* prefix support?? */ left: 555px; animation: grow 2s infinite alternate ease-in-out 1s; -moz-transition: bottom 4.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -o-transition: bottom 4.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -webkit-transition: bottom 4.5s cubic-bezier(0.17, 0.67, 0.52, 1.07); -webkit-transition-delay: 0.7s; transition: bottom 4.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s;
}
li.particle:nth-child(5) { border-width: 124px 19px; border-bottom-color: black; -webkit-filter: blur(15px); /* prefix support?? */ left: 156px; animation: grow 2s infinite alternate ease-in-out 1s; -moz-transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -o-transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -webkit-transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07); -webkit-transition-delay: 0.7s; transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s;
}
li.particle:nth-child(6) { border-width: 107px 47px; border-bottom-color: black; -webkit-filter: blur(15px); /* prefix support?? */ left: 935px; animation: grow 2s infinite alternate ease-in-out 1s; -moz-transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -o-transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -webkit-transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07); -webkit-transition-delay: 0.7s; transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s;
}
li.particle:nth-child(7) { border-width: 61px 1px; border-bottom-color: black; -webkit-filter: blur(15px); /* prefix support?? */ left: 151px; animation: grow 2s infinite alternate ease-in-out 2s; -moz-transition: bottom 1.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -o-transition: bottom 1.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -webkit-transition: bottom 1.5s cubic-bezier(0.17, 0.67, 0.52, 1.07); -webkit-transition-delay: 0.7s; transition: bottom 1.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s;
}
li.particle:nth-child(8) { border-width: 25px 7px; border-bottom-color: black; -webkit-filter: blur(15px); /* prefix support?? */ left: 867px; animation: grow 2s infinite alternate ease-in-out 1s; -moz-transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -o-transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -webkit-transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07); -webkit-transition-delay: 0.7s; transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s;
}
li.particle:nth-child(9) { border-width: 335px 8px; border-bottom-color: black; -webkit-filter: blur(15px); /* prefix support?? */ left: 903px; animation: grow 1s infinite alternate ease-in-out 2s; -moz-transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -o-transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -webkit-transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07); -webkit-transition-delay: 0.7s; transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s;
}
li.particle:nth-child(10) { border-width: 271px 9px; border-bottom-color: black; -webkit-filter: blur(15px); /* prefix support?? */ left: 730px; animation: grow 1s infinite alternate ease-in-out 2s; -moz-transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -o-transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -webkit-transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07); -webkit-transition-delay: 0.7s; transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s;
}
li.particle:nth-child(11) { border-width: 44px 21px; border-bottom-color: black; -webkit-filter: blur(15px); /* prefix support?? */ left: 371px; animation: grow 2s infinite alternate ease-in-out 1s; -moz-transition: bottom 1.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -o-transition: bottom 1.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -webkit-transition: bottom 1.5s cubic-bezier(0.17, 0.67, 0.52, 1.07); -webkit-transition-delay: 0.7s; transition: bottom 1.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s;
}
li.particle:nth-child(12) { border-width: 220px 36px; border-bottom-color: black; -webkit-filter: blur(15px); /* prefix support?? */ left: 14px; animation: grow 3s infinite alternate ease-in-out 2s; -moz-transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -o-transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -webkit-transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07); -webkit-transition-delay: 0.7s; transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s;
}
li.particle:nth-child(13) { border-width: 342px 28px; border-bottom-color: black; -webkit-filter: blur(15px); /* prefix support?? */ left: 825px; animation: grow 3s infinite alternate ease-in-out 1s; -moz-transition: bottom 4.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -o-transition: bottom 4.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -webkit-transition: bottom 4.5s cubic-bezier(0.17, 0.67, 0.52, 1.07); -webkit-transition-delay: 0.7s; transition: bottom 4.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s;
}
li.particle:nth-child(14) { border-width: 253px 17px; border-bottom-color: black; -webkit-filter: blur(15px); /* prefix support?? */ left: 606px; animation: grow 1s infinite alternate ease-in-out 1s; -moz-transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -o-transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -webkit-transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07); -webkit-transition-delay: 0.7s; transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s;
}
li.particle:nth-child(15) { border-width: 29px 20px; border-bottom-color: black; -webkit-filter: blur(15px); /* prefix support?? */ left: 610px; animation: grow 2s infinite alternate ease-in-out 1s; -moz-transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -o-transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -webkit-transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07); -webkit-transition-delay: 0.7s; transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s;
}
li.particle:nth-child(16) { border-width: 277px 11px; border-bottom-color: black; -webkit-filter: blur(15px); /* prefix support?? */ left: 170px; animation: grow 3s infinite alternate ease-in-out 2s; -moz-transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -o-transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -webkit-transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07); -webkit-transition-delay: 0.7s; transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s;
}
li.particle:nth-child(17) { border-width: 137px 32px; border-bottom-color: black; -webkit-filter: blur(15px); /* prefix support?? */ left: 245px; animation: grow 3s infinite alternate ease-in-out 1s; -moz-transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -o-transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -webkit-transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07); -webkit-transition-delay: 0.7s; transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s;
}
li.particle:nth-child(18) { border-width: 161px 50px; border-bottom-color: black; -webkit-filter: blur(15px); /* prefix support?? */ left: 1089px; animation: grow 2s infinite alternate ease-in-out 1s; -moz-transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -o-transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -webkit-transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07); -webkit-transition-delay: 0.7s; transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s;
}
li.particle:nth-child(19) { border-width: 87px 34px; border-bottom-color: black; -webkit-filter: blur(15px); /* prefix support?? */ left: 765px; animation: grow 3s infinite alternate ease-in-out 1s; -moz-transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -o-transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -webkit-transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07); -webkit-transition-delay: 0.7s; transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s;
}
li.particle:nth-child(20) { border-width: 176px 41px; border-bottom-color: black; -webkit-filter: blur(15px); /* prefix support?? */ left: 599px; animation: grow 2s infinite alternate ease-in-out 2s; -moz-transition: bottom 4.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -o-transition: bottom 4.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -webkit-transition: bottom 4.5s cubic-bezier(0.17, 0.67, 0.52, 1.07); -webkit-transition-delay: 0.7s; transition: bottom 4.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s;
}
li.particle:nth-child(21) { border-width: 211px 4px; border-bottom-color: black; -webkit-filter: blur(15px); /* prefix support?? */ left: 109px; animation: grow 3s infinite alternate ease-in-out 1s; -moz-transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -o-transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -webkit-transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07); -webkit-transition-delay: 0.7s; transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s;
}
li.particle:nth-child(22) { border-width: 81px 29px; border-bottom-color: black; -webkit-filter: blur(15px); /* prefix support?? */ left: 1036px; animation: grow 1s infinite alternate ease-in-out 2s; -moz-transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -o-transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -webkit-transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07); -webkit-transition-delay: 0.7s; transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s;
}
li.particle:nth-child(23) { border-width: 79px 35px; border-bottom-color: black; -webkit-filter: blur(15px); /* prefix support?? */ left: 121px; animation: grow 1s infinite alternate ease-in-out 2s; -moz-transition: bottom 1.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -o-transition: bottom 1.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -webkit-transition: bottom 1.5s cubic-bezier(0.17, 0.67, 0.52, 1.07); -webkit-transition-delay: 0.7s; transition: bottom 1.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s;
}
li.particle:nth-child(24) { border-width: 324px 11px; border-bottom-color: black; -webkit-filter: blur(15px); /* prefix support?? */ left: 696px; animation: grow 1s infinite alternate ease-in-out 2s; -moz-transition: bottom 1.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -o-transition: bottom 1.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -webkit-transition: bottom 1.5s cubic-bezier(0.17, 0.67, 0.52, 1.07); -webkit-transition-delay: 0.7s; transition: bottom 1.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s;
}
li.particle:nth-child(25) { border-width: 61px 38px; border-bottom-color: black; -webkit-filter: blur(15px); /* prefix support?? */ left: 504px; animation: grow 2s infinite alternate ease-in-out 1s; -moz-transition: bottom 1.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -o-transition: bottom 1.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -webkit-transition: bottom 1.5s cubic-bezier(0.17, 0.67, 0.52, 1.07); -webkit-transition-delay: 0.7s; transition: bottom 1.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s;
}
li.particle:nth-child(25) { border-width: 104px 28px; border-bottom-color: white; -webkit-filter: blur(20px); /* prefix support?? */ left: 244px; animation: grow 2s infinite alternate ease-in-out 2s; -moz-transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -o-transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -webkit-transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07); -webkit-transition-delay: 0.7s; transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s;
}
li.particle:nth-child(26) { border-width: 337px 24px; border-bottom-color: white; -webkit-filter: blur(20px); /* prefix support?? */ left: 247px; animation: grow 4s infinite alternate ease-in-out 2s; -moz-transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -o-transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -webkit-transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07); -webkit-transition-delay: 0.7s; transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s;
}
li.particle:nth-child(27) { border-width: 92px 42px; border-bottom-color: white; -webkit-filter: blur(20px); /* prefix support?? */ left: 684px; animation: grow 2s infinite alternate ease-in-out 1s; -moz-transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -o-transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -webkit-transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07); -webkit-transition-delay: 0.7s; transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s;
}
li.particle:nth-child(28) { border-width: 139px 21px; border-bottom-color: white; -webkit-filter: blur(20px); /* prefix support?? */ left: 46px; animation: grow 4s infinite alternate ease-in-out 3s; -moz-transition: bottom 4.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -o-transition: bottom 4.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -webkit-transition: bottom 4.5s cubic-bezier(0.17, 0.67, 0.52, 1.07); -webkit-transition-delay: 0.7s; transition: bottom 4.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s;
}
li.particle:nth-child(29) { border-width: 314px 34px; border-bottom-color: white; -webkit-filter: blur(20px); /* prefix support?? */ left: 891px; animation: grow 4s infinite alternate ease-in-out 2s; -moz-transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -o-transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -webkit-transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07); -webkit-transition-delay: 0.7s; transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s;
}
li.particle:nth-child(30) { border-width: 4px 26px; border-bottom-color: white; -webkit-filter: blur(20px); /* prefix support?? */ left: 110px; animation: grow 4s infinite alternate ease-in-out 1s; -moz-transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -o-transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -webkit-transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07); -webkit-transition-delay: 0.7s; transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s;
}
li.particle:nth-child(31) { border-width: 89px 39px; border-bottom-color: white; -webkit-filter: blur(20px); /* prefix support?? */ left: 913px; animation: grow 3s infinite alternate ease-in-out 2s; -moz-transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -o-transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -webkit-transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07); -webkit-transition-delay: 0.7s; transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s;
}
li.particle:nth-child(32) { border-width: 173px 5px; border-bottom-color: white; -webkit-filter: blur(20px); /* prefix support?? */ left: 919px; animation: grow 3s infinite alternate ease-in-out 1s; -moz-transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -o-transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -webkit-transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07); -webkit-transition-delay: 0.7s; transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s;
}
li.particle:nth-child(33) { border-width: 318px 5px; border-bottom-color: white; -webkit-filter: blur(20px); /* prefix support?? */ left: 437px; animation: grow 2s infinite alternate ease-in-out 2s; -moz-transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -o-transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -webkit-transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07); -webkit-transition-delay: 0.7s; transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s;
}
li.particle:nth-child(34) { border-width: 144px 17px; border-bottom-color: white; -webkit-filter: blur(20px); /* prefix support?? */ left: 793px; animation: grow 2s infinite alternate ease-in-out 1s; -moz-transition: bottom 4.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -o-transition: bottom 4.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -webkit-transition: bottom 4.5s cubic-bezier(0.17, 0.67, 0.52, 1.07); -webkit-transition-delay: 0.7s; transition: bottom 4.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s;
}
li.particle:nth-child(35) { border-width: 89px 3px; border-bottom-color: white; -webkit-filter: blur(20px); /* prefix support?? */ left: 378px; animation: grow 1s infinite alternate ease-in-out 2s; -moz-transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -o-transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -webkit-transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07); -webkit-transition-delay: 0.7s; transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s;
}
li.particle:nth-child(36) { border-width: 21px 14px; border-bottom-color: white; -webkit-filter: blur(20px); /* prefix support?? */ left: 904px; animation: grow 2s infinite alternate ease-in-out 2s; -moz-transition: bottom 1.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -o-transition: bottom 1.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -webkit-transition: bottom 1.5s cubic-bezier(0.17, 0.67, 0.52, 1.07); -webkit-transition-delay: 0.7s; transition: bottom 1.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s;
}
li.particle:nth-child(37) { border-width: 126px 38px; border-bottom-color: white; -webkit-filter: blur(20px); /* prefix support?? */ left: 1084px; animation: grow 1s infinite alternate ease-in-out 1s; -moz-transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -o-transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -webkit-transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07); -webkit-transition-delay: 0.7s; transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s;
}
li.particle:nth-child(38) { border-width: 96px 25px; border-bottom-color: white; -webkit-filter: blur(20px); /* prefix support?? */ left: 1099px; animation: grow 1s infinite alternate ease-in-out 3s; -moz-transition: bottom 4.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -o-transition: bottom 4.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -webkit-transition: bottom 4.5s cubic-bezier(0.17, 0.67, 0.52, 1.07); -webkit-transition-delay: 0.7s; transition: bottom 4.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s;
}
li.particle:nth-child(39) { border-width: 158px 37px; border-bottom-color: white; -webkit-filter: blur(20px); /* prefix support?? */ left: 275px; animation: grow 3s infinite alternate ease-in-out 3s; -moz-transition: bottom 4.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -o-transition: bottom 4.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -webkit-transition: bottom 4.5s cubic-bezier(0.17, 0.67, 0.52, 1.07); -webkit-transition-delay: 0.7s; transition: bottom 4.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s;
}
li.particle:nth-child(40) { border-width: 296px 5px; border-bottom-color: white; -webkit-filter: blur(20px); /* prefix support?? */ left: 716px; animation: grow 1s infinite alternate ease-in-out 2s; -moz-transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -o-transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -webkit-transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07); -webkit-transition-delay: 0.7s; transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s;
}
li.particle:nth-child(41) { border-width: 25px 39px; border-bottom-color: white; -webkit-filter: blur(20px); /* prefix support?? */ left: 8px; animation: grow 2s infinite alternate ease-in-out 3s; -moz-transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -o-transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -webkit-transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07); -webkit-transition-delay: 0.7s; transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s;
}
li.particle:nth-child(42) { border-width: 92px 9px; border-bottom-color: white; -webkit-filter: blur(20px); /* prefix support?? */ left: 254px; animation: grow 1s infinite alternate ease-in-out 1s; -moz-transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -o-transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -webkit-transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07); -webkit-transition-delay: 0.7s; transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s;
}
li.particle:nth-child(43) { border-width: 94px 41px; border-bottom-color: white; -webkit-filter: blur(20px); /* prefix support?? */ left: 714px; animation: grow 4s infinite alternate ease-in-out 2s; -moz-transition: bottom 1.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -o-transition: bottom 1.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -webkit-transition: bottom 1.5s cubic-bezier(0.17, 0.67, 0.52, 1.07); -webkit-transition-delay: 0.7s; transition: bottom 1.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s;
}
li.particle:nth-child(44) { border-width: 326px 29px; border-bottom-color: white; -webkit-filter: blur(20px); /* prefix support?? */ left: 554px; animation: grow 3s infinite alternate ease-in-out 1s; -moz-transition: bottom 4.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -o-transition: bottom 4.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -webkit-transition: bottom 4.5s cubic-bezier(0.17, 0.67, 0.52, 1.07); -webkit-transition-delay: 0.7s; transition: bottom 4.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s;
}
li.particle:nth-child(45) { border-width: 28px 9px; border-bottom-color: white; -webkit-filter: blur(20px); /* prefix support?? */ left: 821px; animation: grow 2s infinite alternate ease-in-out 2s; -moz-transition: bottom 4.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -o-transition: bottom 4.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -webkit-transition: bottom 4.5s cubic-bezier(0.17, 0.67, 0.52, 1.07); -webkit-transition-delay: 0.7s; transition: bottom 4.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s;
}
li.particle:nth-child(46) { border-width: 66px 44px; border-bottom-color: white; -webkit-filter: blur(20px); /* prefix support?? */ left: 178px; animation: grow 1s infinite alternate ease-in-out 2s; -moz-transition: bottom 1.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -o-transition: bottom 1.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -webkit-transition: bottom 1.5s cubic-bezier(0.17, 0.67, 0.52, 1.07); -webkit-transition-delay: 0.7s; transition: bottom 1.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s;
}
li.particle:nth-child(47) { border-width: 252px 13px; border-bottom-color: white; -webkit-filter: blur(20px); /* prefix support?? */ left: 935px; animation: grow 3s infinite alternate ease-in-out 2s; -moz-transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -o-transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -webkit-transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07); -webkit-transition-delay: 0.7s; transition: bottom 3.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s;
}
li.particle:nth-child(48) { border-width: 216px 22px; border-bottom-color: white; -webkit-filter: blur(20px); /* prefix support?? */ left: 355px; animation: grow 1s infinite alternate ease-in-out 3s; -moz-transition: bottom 4.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -o-transition: bottom 4.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -webkit-transition: bottom 4.5s cubic-bezier(0.17, 0.67, 0.52, 1.07); -webkit-transition-delay: 0.7s; transition: bottom 4.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s;
}
li.particle:nth-child(49) { border-width: 309px 21px; border-bottom-color: white; -webkit-filter: blur(20px); /* prefix support?? */ left: 157px; animation: grow 4s infinite alternate ease-in-out 3s; -moz-transition: bottom 1.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -o-transition: bottom 1.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -webkit-transition: bottom 1.5s cubic-bezier(0.17, 0.67, 0.52, 1.07); -webkit-transition-delay: 0.7s; transition: bottom 1.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s;
}
li.particle:nth-child(50) { border-width: 207px 17px; border-bottom-color: white; -webkit-filter: blur(20px); /* prefix support?? */ left: 122px; animation: grow 4s infinite alternate ease-in-out 3s; -moz-transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -o-transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s; -webkit-transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07); -webkit-transition-delay: 0.7s; transition: bottom 2.5s cubic-bezier(0.17, 0.67, 0.52, 1.07) 0.7s;
}
.on-top { background: linear-gradient(140deg, #f28d13 0%, #d10927 60%); /* hues from PSD */ opacity: 0.86; z-index: 3;
}
/*	Animations */
@keyframes bgscroll { 0% { background-position: 0 0; animation-timing-function: ease-in-out; } 20% { background-position: -600px -600px; animation-timing-function: ease-in-out; } 40% { background-position: -400px -650px; animation-timing-function: ease-in-out; } 50% { background-position: -550px -400px; animation-timing-function: ease-in-out; } 70% { background-position: -200px -950px; animation-timing-function: ease-in-out; } 80% { background-position: -1250px -1500px; animation-timing-function: ease-in-out; } 100% { background-position: -400px -400px; animation-timing-function: ease-in-out; }
}
@keyframes grow { to { -moz-transform: scale(0.3); -ms-transform: scale(0.3); -webkit-transform: scale(0.3); transform: scale(0.3); }
}
@keyframes start { from { bottom: 200px; } to { bottom: 0; }
}
/* normalize & setup */
html, body { border: 0; padding: 0; margin: 0;
}

Home Page	Home
Developer	Insprd
Username	insprd
Uploaded	September 13, 2022
Rating	4
Size	6,624 Kb
Views	42,504

Do you need developer help for Aurora Effect?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Insprd (insprd) Script Codes

Name	Size
Centered Isotope masonry	2,243 Kb
Brick a link with CSS	1,417 Kb
A Scanner Darkly	1,712 Kb
A Pen by insprd	5,157 Kb
Loading anim	1,791 Kb
Minimal Clock Card	2,108 Kb
Hover Animation from UNIQLO	3,772 Kb
Infinite Carousel	2,478 Kb
Bolt action	3,023 Kb
Animated Link Underline	1,875 Kb

Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!

Similar Scripts & Codes

Name	Username	Size
A Pen by Final Boss tommyb9	FBtommyb9	55,354 Kb
Menu	Vivi_Lai	1,210 Kb
Reading Grid	Tappily	4,306 Kb
Vue.js Starter	Andymerskin	1,268 Kb
Apple website	Jds317	1,835 Kb
Simple Responsive Text	Fbrz	2,282 Kb
Under construction	GhostRider	1,642 Kb
12 DAYS OF XMAS	Proto78	2,313 Kb
Display properties	Hamzaerbay	1,886 Kb
Header Line Issue	Charlie-volpe	1,768 Kb

Do you want hide your ip address?

Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!