Toggle navigation
Sign Up
Log In
Explore
Works
Folders
Tools
Collections
Artists
Groups
Groups
Topics
Tasks
Tasks
Jobs
Teams
Jobs
Recommendation
More Effects...
JS
CSS
* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Nunito', sans-serif; } html, body { background: #000; overflow: hidden; } html h1, body h1 { color: rgba(255, 255, 255, 0.8); position: absolute; top: 0; padding: 50vh 0; text-align: center; width: 100%; font-size: 3em; } .star { background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/217538/star.png); background-size: cover; border-radius: 100%; width: 2em; height: 2em; opacity: 0; } .firework { background-size: cover; top: 0; opacity: 0; width: 200px; height: 200px; } .firework:nth-of-type(1) { background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/217538/green.png); margin: 5vh 5vw; -webkit-animation: firework 0.8s linear infinite forwards; animation: firework 0.8s linear infinite forwards; -webkit-animation-delay: 10s; animation-delay: 10s; } .firework:nth-of-type(2) { background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/217538/purple.png); margin: 5vh 34vw; -webkit-animation: firework 2.4s linear infinite forwards; animation: firework 2.4s linear infinite forwards; -webkit-animation-delay: 5s; animation-delay: 5s; } .firework:nth-of-type(3) { background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/217538/green.png); margin: 4vh 42vw; -webkit-animation: firework 1.2s linear infinite forwards; animation: firework 1.2s linear infinite forwards; -webkit-animation-delay: 3.3333333333s; animation-delay: 3.3333333333s; } .firework:nth-of-type(4) { background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/217538/green.png); margin: 1vh 46vw; -webkit-animation: firework 4s linear infinite forwards; animation: firework 4s linear infinite forwards; -webkit-animation-delay: 1.25s; animation-delay: 1.25s; } .firework:nth-of-type(5) { background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/217538/red.png); margin: 4vh 32vw; -webkit-animation: firework 7s linear infinite forwards; animation: firework 7s linear infinite forwards; -webkit-animation-delay: 2s; animation-delay: 2s; } .star:nth-of-type(1) { margin: 8vh 23vw; -webkit-animation: flickr 4s linear infinite forwards; animation: flickr 4s linear infinite forwards; -webkit-animation-delay: 1s; animation-delay: 1s; } .star:nth-of-type(2) { margin: 3vh 42vw; -webkit-animation: flickr 4s linear infinite forwards; animation: flickr 4s linear infinite forwards; -webkit-animation-delay: 0.5s; animation-delay: 0.5s; } .star:nth-of-type(3) { margin: 10vh 21vw; -webkit-animation: flickr 9s linear infinite forwards; animation: flickr 9s linear infinite forwards; -webkit-animation-delay: 0.6666666667s; animation-delay: 0.6666666667s; } .star:nth-of-type(4) { margin: 7vh 1vw; -webkit-animation: flickr 16s linear infinite forwards; animation: flickr 16s linear infinite forwards; -webkit-animation-delay: 0.75s; animation-delay: 0.75s; } .star:nth-of-type(5) { margin: 1vh 87vw; -webkit-animation: flickr 15s linear infinite forwards; animation: flickr 15s linear infinite forwards; -webkit-animation-delay: 1s; animation-delay: 1s; } .star:nth-of-type(6) { margin: 4vh 55vw; -webkit-animation: flickr 18s linear infinite forwards; animation: flickr 18s linear infinite forwards; -webkit-animation-delay: 0.3333333333s; animation-delay: 0.3333333333s; } .star:nth-of-type(7) { margin: 2vh 83vw; -webkit-animation: flickr 7s linear infinite forwards; animation: flickr 7s linear infinite forwards; -webkit-animation-delay: 0.1428571429s; animation-delay: 0.1428571429s; } .star:nth-of-type(8) { margin: 6vh 74vw; -webkit-animation: flickr 8s linear infinite forwards; animation: flickr 8s linear infinite forwards; -webkit-animation-delay: 0.625s; animation-delay: 0.625s; } .star:nth-of-type(9) { margin: 10vh 5vw; -webkit-animation: flickr 9s linear infinite forwards; animation: flickr 9s linear infinite forwards; -webkit-animation-delay: 0.5555555556s; animation-delay: 0.5555555556s; } .star:nth-of-type(10) { margin: 1vh 4vw; -webkit-animation: flickr 20s linear infinite forwards; animation: flickr 20s linear infinite forwards; -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } .star:nth-of-type(11) { margin: 5vh 80vw; -webkit-animation: flickr 11s linear infinite forwards; animation: flickr 11s linear infinite forwards; -webkit-animation-delay: 0.4545454545s; animation-delay: 0.4545454545s; } .star:nth-of-type(12) { margin: 1vh 51vw; -webkit-animation: flickr 36s linear infinite forwards; animation: flickr 36s linear infinite forwards; -webkit-animation-delay: 0.3333333333s; animation-delay: 0.3333333333s; } .star:nth-of-type(13) { margin: 8vh 84vw; -webkit-animation: flickr 13s linear infinite forwards; animation: flickr 13s linear infinite forwards; -webkit-animation-delay: 0.3076923077s; animation-delay: 0.3076923077s; } .star:nth-of-type(14) { margin: 4vh 88vw; -webkit-animation: flickr 42s linear infinite forwards; animation: flickr 42s linear infinite forwards; -webkit-animation-delay: 0.3571428571s; animation-delay: 0.3571428571s; } .star:nth-of-type(15) { margin: 8vh 6vw; -webkit-animation: flickr 45s linear infinite forwards; animation: flickr 45s linear infinite forwards; -webkit-animation-delay: 0.3333333333s; animation-delay: 0.3333333333s; } .star:nth-of-type(16) { margin: 7vh 23vw; -webkit-animation: flickr 32s linear infinite forwards; animation: flickr 32s linear infinite forwards; -webkit-animation-delay: 0.0625s; animation-delay: 0.0625s; } .star:nth-of-type(17) { margin: 5vh 16vw; -webkit-animation: flickr 17s linear infinite forwards; animation: flickr 17s linear infinite forwards; -webkit-animation-delay: 0.1176470588s; animation-delay: 0.1176470588s; } .star:nth-of-type(18) { margin: 4vh 73vw; -webkit-animation: flickr 72s linear infinite forwards; animation: flickr 72s linear infinite forwards; -webkit-animation-delay: 0.2222222222s; animation-delay: 0.2222222222s; } .star:nth-of-type(19) { margin: 9vh 26vw; -webkit-animation: flickr 57s linear infinite forwards; animation: flickr 57s linear infinite forwards; -webkit-animation-delay: 0.2105263158s; animation-delay: 0.2105263158s; } .star:nth-of-type(20) { margin: 1vh 72vw; -webkit-animation: flickr 20s linear infinite forwards; animation: flickr 20s linear infinite forwards; -webkit-animation-delay: 0.25s; animation-delay: 0.25s; } .star:nth-of-type(21) { margin: 8vh 6vw; -webkit-animation: flickr 84s linear infinite forwards; animation: flickr 84s linear infinite forwards; -webkit-animation-delay: 0.2380952381s; animation-delay: 0.2380952381s; } .star:nth-of-type(22) { margin: 8vh 48vw; -webkit-animation: flickr 66s linear infinite forwards; animation: flickr 66s linear infinite forwards; -webkit-animation-delay: 0.2272727273s; animation-delay: 0.2272727273s; } .star:nth-of-type(23) { margin: 10vh 22vw; -webkit-animation: flickr 23s linear infinite forwards; animation: flickr 23s linear infinite forwards; -webkit-animation-delay: 0.1304347826s; animation-delay: 0.1304347826s; } .star:nth-of-type(24) { margin: 1vh 50vw; -webkit-animation: flickr 96s linear infinite forwards; animation: flickr 96s linear infinite forwards; -webkit-animation-delay: 0.2083333333s; animation-delay: 0.2083333333s; } .star:nth-of-type(25) { margin: 2vh 58vw; -webkit-animation: flickr 50s linear infinite forwards; animation: flickr 50s linear infinite forwards; -webkit-animation-delay: 0.12s; animation-delay: 0.12s; } .star:nth-of-type(26) { margin: 5vh 61vw; -webkit-animation: flickr 26s linear infinite forwards; animation: flickr 26s linear infinite forwards; -webkit-animation-delay: 0.0384615385s; animation-delay: 0.0384615385s; } .star:nth-of-type(27) { margin: 4vh 44vw; -webkit-animation: flickr 108s linear infinite forwards; animation: flickr 108s linear infinite forwards; -webkit-animation-delay: 0.037037037s; animation-delay: 0.037037037s; } .star:nth-of-type(28) { margin: 7vh 93vw; -webkit-animation: flickr 112s linear infinite forwards; animation: flickr 112s linear infinite forwards; -webkit-animation-delay: 0.1071428571s; animation-delay: 0.1071428571s; } .star:nth-of-type(29) { margin: 3vh 50vw; -webkit-animation: flickr 87s linear infinite forwards; animation: flickr 87s linear infinite forwards; -webkit-animation-delay: 0.1724137931s; animation-delay: 0.1724137931s; } .star:nth-of-type(30) { margin: 1vh 72vw; -webkit-animation: flickr 90s linear infinite forwards; animation: flickr 90s linear infinite forwards; -webkit-animation-delay: 0.0333333333s; animation-delay: 0.0333333333s; } .star:nth-of-type(31) { margin: 4vh 69vw; -webkit-animation: flickr 93s linear infinite forwards; animation: flickr 93s linear infinite forwards; -webkit-animation-delay: 0.064516129s; animation-delay: 0.064516129s; } .star:nth-of-type(32) { margin: 6vh 35vw; -webkit-animation: flickr 64s linear infinite forwards; animation: flickr 64s linear infinite forwards; -webkit-animation-delay: 0.15625s; animation-delay: 0.15625s; } .star:nth-of-type(33) { margin: 5vh 1vw; -webkit-animation: flickr 33s linear infinite forwards; animation: flickr 33s linear infinite forwards; -webkit-animation-delay: 0.0606060606s; animation-delay: 0.0606060606s; } .star:nth-of-type(34) { margin: 9vh 27vw; -webkit-animation: flickr 136s linear infinite forwards; animation: flickr 136s linear infinite forwards; -webkit-animation-delay: 0.0294117647s; animation-delay: 0.0294117647s; } .star:nth-of-type(35) { margin: 4vh 73vw; -webkit-animation: flickr 35s linear infinite forwards; animation: flickr 35s linear infinite forwards; -webkit-animation-delay: 0.1428571429s; animation-delay: 0.1428571429s; } .star:nth-of-type(36) { margin: 2vh 49vw; -webkit-animation: flickr 144s linear infinite forwards; animation: flickr 144s linear infinite forwards; -webkit-animation-delay: 0.0277777778s; animation-delay: 0.0277777778s; } .star:nth-of-type(37) { margin: 1vh 96vw; -webkit-animation: flickr 148s linear infinite forwards; animation: flickr 148s linear infinite forwards; -webkit-animation-delay: 0.0540540541s; animation-delay: 0.0540540541s; } .star:nth-of-type(38) { margin: 3vh 82vw; -webkit-animation: flickr 76s linear infinite forwards; animation: flickr 76s linear infinite forwards; -webkit-animation-delay: 0.1315789474s; animation-delay: 0.1315789474s; } .star:nth-of-type(39) { margin: 7vh 40vw; -webkit-animation: flickr 156s linear infinite forwards; animation: flickr 156s linear infinite forwards; -webkit-animation-delay: 0.0512820513s; animation-delay: 0.0512820513s; } .star:nth-of-type(40) { margin: 3vh 33vw; -webkit-animation: flickr 160s linear infinite forwards; animation: flickr 160s linear infinite forwards; -webkit-animation-delay: 0.025s; animation-delay: 0.025s; } .star:nth-of-type(41) { margin: 6vh 23vw; -webkit-animation: flickr 82s linear infinite forwards; animation: flickr 82s linear infinite forwards; -webkit-animation-delay: 0.0243902439s; animation-delay: 0.0243902439s; } .star:nth-of-type(42) { margin: 10vh 68vw; -webkit-animation: flickr 126s linear infinite forwards; animation: flickr 126s linear infinite forwards; -webkit-animation-delay: 0.0714285714s; animation-delay: 0.0714285714s; } .star:nth-of-type(43) { margin: 9vh 55vw; -webkit-animation: flickr 129s linear infinite forwards; animation: flickr 129s linear infinite forwards; -webkit-animation-delay: 0.1162790698s; animation-delay: 0.1162790698s; } .star:nth-of-type(44) { margin: 7vh 94vw; -webkit-animation: flickr 88s linear infinite forwards; animation: flickr 88s linear infinite forwards; -webkit-animation-delay: 0.1136363636s; animation-delay: 0.1136363636s; } .star:nth-of-type(45) { margin: 4vh 33vw; -webkit-animation: flickr 135s linear infinite forwards; animation: flickr 135s linear infinite forwards; -webkit-animation-delay: 0.0444444444s; animation-delay: 0.0444444444s; } .star:nth-of-type(46) { margin: 7vh 98vw; -webkit-animation: flickr 92s linear infinite forwards; animation: flickr 92s linear infinite forwards; -webkit-animation-delay: 0.0869565217s; animation-delay: 0.0869565217s; } .star:nth-of-type(47) { margin: 1vh 64vw; -webkit-animation: flickr 188s linear infinite forwards; animation: flickr 188s linear infinite forwards; -webkit-animation-delay: 0.085106383s; animation-delay: 0.085106383s; } .star:nth-of-type(48) { margin: 5vh 47vw; -webkit-animation: flickr 96s linear infinite forwards; animation: flickr 96s linear infinite forwards; -webkit-animation-delay: 0.1041666667s; animation-delay: 0.1041666667s; } .star:nth-of-type(49) { margin: 7vh 80vw; -webkit-animation: flickr 98s linear infinite forwards; animation: flickr 98s linear infinite forwards; -webkit-animation-delay: 0.0816326531s; animation-delay: 0.0816326531s; } .star:nth-of-type(50) { margin: 1vh 30vw; -webkit-animation: flickr 100s linear infinite forwards; animation: flickr 100s linear infinite forwards; -webkit-animation-delay: 0.06s; animation-delay: 0.06s; } @-webkit-keyframes flickr { 0% { opacity: 0; -webkit-transform: translateY(0px); transform: translateY(0px); } 50% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translateY(-500px); transform: translateY(-500px); } } @keyframes flickr { 0% { opacity: 0; -webkit-transform: translateY(0px); transform: translateY(0px); } 50% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translateY(-500px); transform: translateY(-500px); } } @-webkit-keyframes firework { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } @keyframes firework { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } @-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
HTML
Happy New Year!
Join Effecthub.com
Working with Global Gaming Artists and Developers!
Login
Sign Up
Or Login with Your Email Address:
Email
Password
Remember
Or Sign Up with Your Email Address:
Your Email
This field must contain a valid email
Set Password
Password should be at least 1 character
Stay informed via email