body { background-color: #1a1a1a; color: #fff; overflow: hidden; } h1 { font-family: "Gill Sans", Helvetica, Arial, sans-serif; font-weight: normal; text-transform:uppercase; letter-spacing: 32px; font-size: 36px; text-align: center; position:absolute; z-index: 100; top: 48%; width: 97%; padding: 0 0 0 3%; margin: 0; text-shadow: 0 0 10px rgba(255,255,255,.4); transition: text-shadow 2s ease-in-out; } #holder * { transform: translate3d(0, 0, 0); } #holder { width: 800px; height: 800px; position: absolute; top: 50%; left: 50%; margin: -410px 0 0 -400px; } #portals { width: 800px; height: 800px; position:relative; } span { display: block; width: 90%; height: 90%; padding: 5%; border-radius: 50%; box-shadow: 0 20px 50px rgba(255,255,255,1);/*border: 1px dashed red;*/ } span span { box-shadow: 0 20px 45px rgba(255,255,255,.9); } span span span { box-shadow: 0 19px 40px rgba(255,255,255,.8); } span span span span { box-shadow: 0 17px 35px rgba(255,255,255,.7); } span span span span span { box-shadow: 0 16px 30px rgba(255,255,255,.6); } span span span span span span { box-shadow: 0 15px 25px rgba(255,255,255,.32); } span span span span span span span { box-shadow: 0 14px 20px rgba(255,255,255,.16); } span span span span span span span span { box-shadow: 0 13px 15px rgba(255,255,255,.08); } span span span span span span span span span { box-shadow: 0 12px 10px rgba(255,255,255,.04); } span span span span span span span span span span { box-shadow: 0 11px 5px rgba(255,255,255,.02); } @keyframes spinit { 0% { transform:rotate(0) } 50% { transform:rotate(360deg) } 100% { transform:rotate(0) } } #portals span { animation-name: spinit; animation-duration: 15s; animation-iteration-count: infinite; animation-direction: alternate; animation-timing-function: ease-in-out; transition: all 2s ease-in-out; } #holder:hover span { width: 70%; height: 69%; } #holder:hover #portals > span { margin: 9% 0 0 9%; } #holder:hover h1 { text-shadow: 0 0 10px rgba(255,255,255,1), 0 25px 5px #1a1a1a; }