Implementing a “clean CSS sphere” on a website - how do I do this?

Question

Implementing a “clean CSS sphere” on a website - how do I do this?

http://codepen.io/waynespiegel/pen/jEGGbj

I found this amazing thing that I would like to be part of my site (for personal use and practice only), and I wonder how it will be implemented. I am new to this programming. I am using GitPages and running a website.

It was decided to make a file called "sphere.css" with the code:

$size: 300px; $total: 100; $time: 5s; * { box-sizing:border-box; } html, body { width: 100%; height: 100%; background: #000; overflow: hidden; display: box; box-align: center; box-pack: center; .o-wrapper { width: $size; height: $size; transform-style: preserve-3d; animation: $time spin-that-shit linear infinite; .o { position: absolute; height: 100%; width: 100%; border: 1px solid; border-radius: 100%; @for $i from 1 through $total { &:nth-child(#{$i}) { transform: rotateY($i * 2deg) rotateX($i * 2deg); border-color: hsla($i * 10%, 100%, 50%, .2); } } } } } @keyframes spin-that-shit { 100% { transform: rotateX(360deg) rotateY(360deg); } }

And another file called "sphere.html" with the code:

 <!DOCTYPE html> <html> <link rel="stylesheet" type="text/css" href="stylesheets/stylesheet.css" media="screen"> <body> <header> Random Title </header> <div id="content-wrapper"> <div class="inner clearfix"> <section id="main-content"> .o-wrapper -100.times do .o </section> </div> </div> </body> </html>

But it obviously does not work, and I have no idea where to place the code from the site, how is it to make it work. Once again, this is for educational purposes only.

Thanks in advance!

0

html css sass website haml

Danieboy Mar 27 '15 at 12:22

source share

1 answer

Scott · Accepted Answer · 2015-03-27 13:17

You are viewing pre-processed CSS and HTML, namely SCSS and HAML . In Codepen, if you click the eye icon for each area of the code, you can switch between viewing the preprocessor code and the actual generated output.

The reason that many developers prefer to use preprocessors greatly speeds up coding and greatly simplifies a lot. For your Codepen example, 100 <div class="o"></div> and 100 transformation values / animation colors are created. It is massively impractical and should not be used in production.

If you need a spinning ball like this on your website, you can find the best results using a sprite, animated .gif, or writing it to WebGL.

Implementing a “clean CSS sphere” on a website - how do I do this?

More articles: