CSS Particles

css-particles.markdown

CSS Particles

A Pen by Jasson Qasqant on CodePen.

License.

index.html

<div id="particlebox1">
		<div class="particles"></div>
	</div>
	<div id="particlebox3">
		<div class="particles"></div>
	</div>
	
	<div id="light1"></div>

script.js

// Look Ma! No JS!

style.css

body {
			background: #000;
			background: hsl(197, 51%, 46%);
			background: hsl(197, 51%, 36%);
			padding: 0px;
		}
		#particlebox1 {
			position: absolute;
			top: 25%;
			left: 50%;
			margin-left: -128px;
			-webkit-mask: -webkit-gradient(radial, 128 128, 0, 128 128, 100, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)), color-stop(80%, #e4c700));
		}
		#particlebox3 {
			opacity: .5;
			position: absolute;
			top: 25%;
			left: 50%;
			margin-left: -128px;
			-webkit-mask: -webkit-gradient(radial, 128 128, 0, 128 128, 100, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)), color-stop(80%, #e4c700));
		}
			#particlebox3 .particles {
				background: url(https://dl.dropboxusercontent.com/u/846648/particles/smoothp.png) 0px 0px repeat;
				-webkit-mask: url(https://dl.dropboxusercontent.com/u/846648/particles/smoothmask.png) 0% 0% repeat;
				-webkit-animation-name: particlefall3;
				-webkit-animation-duration: 30s;
			}
				@-webkit-keyframes particlefall3 {
				 from {
					background-position: 0px 0px;
					-webkit-mask-position: 0px 0px;
				 }
				 to {
					background-position: 511px 511px;
					-webkit-mask-position: -511px 255px;
				 }
				}
		
		.particles{
			background: url(https://dl.dropboxusercontent.com/u/846648/particles/particles.png) 0px 0px repeat;
			-webkit-mask: url(https://dl.dropboxusercontent.com/u/846648/particles/particlemask.png) 0% 0% repeat; 
			width: 256px;
			height: 256px;
			-webkit-animation-timing-function: linear;
			-webkit-animation-name: particlefall1;
			-webkit-animation-duration: 20s;
			-webkit-animation-iteration-count: infinite;
			-webkit-animation-direction: normal;
		}		
			@-webkit-keyframes particlefall1 {
			 from {
				background-position: 0px 0px;
				-webkit-mask-position: 0px 0px;
			 }
			 to {
				background-position: 0px 511px;
				-webkit-mask-position: 0px 255px;
			 }
			}
			#light1 {
				position: absolute;
				top: 25%;
				left: 50%;
				margin-left: -190px;
				margin-top: 20px;
				width: 100px;
				height: 100px;
				background: -webkit-gradient(radial, 50 10, 0, 50 50, 50, from(rgba(242,228,218,.5)), to(rgba(57,142,176,0)));
				-webkit-transform-origin: 50% 0%;
				-webkit-transform:
					rotate(-53deg)
					rotate(0deg)
					scaleY(3)
					scaleX(2);
			}