Skip to content
Go to file
Cannot retrieve contributors at this time
129 lines (106 sloc) 4.3 KB
<!doctype html>
<html class="no-js" lang="en">
<meta charset="utf-8">
<title>CSS Showcase: Particle Animation</title>
<meta name="description" content="Tutorial on creating particle animation using CSS">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="manifest" href="site.webmanifest">
<link rel="apple-touch-icon" href="icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/midterm.css">
<meta name="theme-color" content="#fafafa">
<!--[if IE]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="">upgrade your browser</a> to improve your experience and security.</p>
<!-- Add your site or application content here -->
<div id="body-wrapper">
<h2>CSS Showcase:</h2>
<h1>Particle Animation</h1>
<div class="particle-wrapper" id="subtle">
<div class="particle-container">
<div class="particle-temp"></div>
<p>You can use animated particles to create a subtle background effect...</p>
<div class="particle-wrapper" id="fireworks">
<div class="particle-container">
<div class="burst" id="burst1"></div>
<div class="burst" id="burst2"></div>
<div class="burst" id="burst3"></div>
<div class="burst" id="burst4"></div>
<div class="burst" id="burst5"></div>
<p>Or you can make your particles show-stopping!</p>
<div id="info1">
<p>Particles are the key to all of the realistic animation effects below.
Check them out!</p>
<li class="menu item" id="rain-button">Rain</li>
<li class="menu item" id="snow-button">Snow</li>
<li class="menu item" id="sparks-button">Sparks</li>
<li class="menu item" id="bubbles-button">Bubbles</li>
<li class="menu item" id="birds-button">Birds</li>
<div> <!--probably dont need this wrapper-->
<div class="particle-container" id="rain">
<div class="particle-container" id="snow">
<div class="particle-container" id="sparks">
<div class="particle-container" id="bubbles">
<div class="particle-container" id="birds">
<div id="info2">
<p>Say you’re already familiar with the animation properties of CSS.
What makes particle animation any different?</p>
<p>The defining characteristics of a particle animation are: </p>
<li>Numerous animated elements of the same type.</li>
<li>Randomness/Variation: of particle speed, direction, size, color, etc. This is what gives the animation a natural appearance.</li>
<p>Professional animation software has the ability to automatically generate an infinite number of particles with randomized properties and realistic physics. With CSS, unfortunately we are limited in a few ways:</p>
<li>We have to individually create each particle we want to see;</li>
<li>We have to manually define the motion using keyframes;</li>
<li>and there is no built-in way to generate random values.</li>
<p>We'll look at some ways to get past these limitations later on.</p>
<div id="info3">
<p>Read on to find out how you can create awesome CSS particle animations yourself!</p>
<li>Create a particle container</li>
<li>Create one particle</li>
<li>Animate the first particle</li>
<li>Duplicate the particle and add variation</li>
<script src="js/vendor/modernizr-3.8.0.min.js"></script>
<script src="" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-3.4.1.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
<script> = function () { ga.q.push(arguments) }; ga.q = []; ga.l = +new Date;
ga('create', 'UA-XXXXX-Y', 'auto'); ga('set','transport','beacon'); ga('send', 'pageview')
<script src="" async></script>
You can’t perform that action at this time.