Cloud Swirl

by freedawirl

HTML

<div class='wrapper'>
			<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
		</div>
		

	

		<script>
		/**
		 * StyleFix 1.0.3 & PrefixFree 1.0.7
		 * @author Lea Verou
		 * MIT license
		 */(function(){function t(e,t){return[].slice.call((t||document).querySelectorAll(e))}if(!window.addEventListener)return;var e=window.StyleFix={link:function(t){try{if(t.rel!=="stylesheet"||t.hasAttribute("data-noprefix"))return}catch(n){return}var r=t.href||t.getAttribute("data-href"),i=r.replace(/[^\/]+$/,""),s=(/^[a-z]{3,10}:/.exec(i)||[""])[0],o=(/^[a-z]{3,10}:\/\/[^\/]+/.exec(i)||[""])[0],u=/^([^?]*)\??/.exec(r)[1],a=t.parentNode,f=new XMLHttpRequest,l;f.onreadystatechange=function(){f.readyState===4&&l()};l=function(){var n=f.responseText;if(n&&t.parentNode&&(!f.status||f.status<400||f.status>600)){n=e.fix(n,!0,t);if(i){n=n.replace(/url\(\s*?((?:"|')?)(.+?)\1\s*?\)/gi,function(e,t,n){return/^([a-z]{3,10}:|#)/i.test(n)?e:/^\/\//.test(n)?'url("'+s+n+'")':/^\//.test(n)?'url("'+o+n+'")':/^\?/.test(n)?'url("'+u+n+'")':'url("'+i+n+'")'});var r=i.replace(/([\\\^\$*+[\]?{}.=!:(|)])/g,"\\$1");n=n.replace(RegExp("\\b(behavior:\\s*?url\\('?\"?)"+r,"gi"),"$1")}var l=document.createElement("style");l.textContent=n;l.media=t.media;l.disabled=t.disabled;l.setAttribute("data-href",t.getAttribute("href"));a.insertBefore(l,t);a.removeChild(t);l.media=t.media}};try{f.open("GET",r);f.send(null)}catch(n){if(typeof XDomainRequest!="undefined"){f=new...

CSS

@keyframes spin {
  from {
    opacity: 0; }

  to {
    opacity: 0.6;
    transform: translate3d(-4px, -4px, 570px); } }

html, body {
  overflow: hidden;
  background: #3e6fa3;
  font-family: Helvetica, sans-serif; }

.wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  perspective: 500px; }

i {
  display: block;
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 8px;
  opacity: 0;
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 0px 0px 10px white;
  animation-name: spin;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out; }

i:nth-child(1) {
  transform: rotate(11.6129deg) translate3d(80px, 0, 0);
  animation-delay: 0.0483870968s; }

i:nth-child(2) {
  transform: rotate(23.22581deg) translate3d(80px, 0, 0);
  animation-delay: 0.0967741935s; }

i:nth-child(3) {
  transform: rotate(34.83871deg) translate3d(80px, 0, 0);
  animation-delay: 0.1451612903s; }

i:nth-child(4) {
  transform: rotate(46.45161deg) translate3d(80px, 0, 0);
  animation-delay: 0.1935483871s; }

i:nth-child(5) {
  transform: rotate(58.06452deg) translate3d(80px, 0, 0);
  animation-delay: 0.2419354839s; }

i:nth-child(6) {
  transform: rotate(69.67742deg) translate3d(80px, 0, 0);
  animation-delay: 0.2903225806s; }

i:nth-child(7) {
  transform: rotate(81.29032deg) translate3d(80px, 0, 0);
  animation-delay: 0.3387096774s; }

i:nth-child(8) {
  transform: rotate(92.90323deg) translate3d(80px, 0, 0);
  animation-delay: 0.3870967742s; }

i:nth-child(9) {
  transform: rotate(104.51613deg) translate3d(80px, 0, 0);
  animation-delay: 0.435483871s; }

i:nth-child(10) {
  transform: rotate(116.12903deg) translate3d(80px, 0, 0);
  animation-delay: 0.4838709677s; }

i:nth-child(11) {
  transform: rotate(127.74194deg) translate3d(80px, 0, 0);
  animation-delay: 0.5322580645s; }

i:nth-child(12) {
  transform: rotate(139.35484deg) translate3d(80px, 0, 0);
  animation-delay: 0.5806451613s;...

JavaScript

$(document).ready(function() {



   });