CSS @keyframe Animation | Starfall

Very light code, only html and css, so you can paste it anywhere, like in a CMS written in php, or in a simple html page.


HTML

 <div class="space">
		<div class="stars1"></div>
		<div class="stars2"></div>
		<div class="stars3"></div>
		<div class="stars4"></div>
		<div class="stars5"></div>
		<div class="stars6"></div>
		<div class="stars7"></div>
		<div class="stars8"></div>
		<div class="stars9"></div>
		<div class="stars10"></div>
 </div> 

CSS

.space {
	width: 600px;
	height: 300px;
/* Background - a picture of a fragment of a star sky
which by default multiplied by the whole block */
	background-image: url(images/120.jpg);
	position: relative;	
}
/*We make 10 stars, some of which will be 
flashing, and part falling*/ .stars1, .stars2, .stars3, .stars4, .stars5, .stars6, .stars7, .stars8, .stars9, .stars10 { position: absolute; border-radius: 50%/50%; background-image: -webkit-radial-gradient(white, black); width: 3px; /*size of asterisks, can be increased*/ height: 3px; } /*We position all the stars at different distances
from the edges of the block and create an animation that changes the position of the asterisk
или прозрачность*/ .stars1 { top: 8%; left: 3%; animation: stars1 4s 3s linear infinite; } .stars2 { top: 3%; left: 10%; animation: stars2 2s linear infinite; } .stars3 { top: 15%; left: 25%; animation: stars3 5s 1s linear infinite; } .stars4 { top: 12%; left: 35%; animation: stars4 6s 2s linear infinite; } .stars5 { top: 23%; left: 47%; animation: stars5 2.5s 1s linear infinite; } .stars6 { top: 11%; left: 60%; animation: stars6 7s linear infinite; } .stars7 { top: 20%; left: 70%; animation: stars7 2s 1s linear infinite; } .stars8 { top: 12%; left: 80%; animation: stars8 4s linear infinite; } .stars9 { top: 30%; left: 90%; animation: stars9 3s 2s linear infinite; } .stars10 { top: 7%; left: 98%; animation: stars10 6s linear infinite; } /*Four stars are blinking, we will make the transition
from full transparency to full opacity*/ @keyframes stars2 { 0% { opacity: 1; } 100%{ opacity: 0; } } @keyframes stars5 { 0% { opacity: 1; } 100%{ opacity: 0; } } @keyframes stars7 { 0% { opacity: 1; } 100%{ opacity: 0; } } @keyframes stars9 { 0% { opacity: 1; } 100%{ opacity: 0; } } /*The rest of the stars are falling.*/ @keyframes stars1 { 0% { width: 1px; /*The size of the asterisk at the beginning of the fall*/ } 7% { width: 6px; /*Size in the process of falling*/ opacity: 1; transform: translate(150px, 150px); } 8% { opacity: 0; } 100% { opacity: 0; } } @keyframes stars3 { 0% { width: 3px; } 12% { width: 10px; opacity: 1; transform: translate(-200px, 200px); } 13% { opacity: 0; } 100% { opacity: 0; } } @keyframes stars4 { 0% { width: 3px; } 10% { width: 10px; opacity: 1; transform: translate(200px, 300px); } 11% { opacity: 0; } 100% { opacity: 0; } } @keyframes stars6 { 0% { width: 3px; } 10% { width: 10px; opacity: 1; transform: translate(-400px, 300px); } 11% { opacity: 0; } 100% { opacity: 0; } } @keyframes stars8 { 0% { width: 3px; } 10% { width: 10px; opacity: 1; transform: translate(-300px, 300px); } 11% { opacity: 0; } 100% { opacity: 0; } } @keyframes stars10 { 0% { width: 3px; } 10% { width: 10px; opacity: 1; transform: translate(-600px, 200px); } 11% { opacity: 0; } 100% { opacity: 0; } }

I wish you creative success

This entry was posted in Free Scripts. Bookmark the permalink.
А так же:

Leave a Reply

Your email address will not be published. Required fields are marked *