在网站中实施 "Pure CSS Sphere" - 我该怎么做？

Question

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

我发现这个很棒的东西，我想成为我网站的一部分（仅供个人使用和练习），并且很好奇这将如何实现。我对这种编程还很陌生。我正在使用 GitPages 并获得了一个网站运行.

决定创建一个名为 "sphere.css" 的文件，代码为：

$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); }
}

还有另一个名为 "sphere.html" 的文件，代码为：

<!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>

但它显然无法正常工作，而且我不知道将此类网站的代码放在哪里才能使其正常工作。再次重申，这仅用于学习目的。

提前致谢！

Answer 1

您正在查看预处理的 CSS 和 HTML - 即每个代码区域的 SCSS and HAML. In Codepen, if you click the eye icon，您可以在查看预处理器代码和实际生成的输出之间切换.

许多 devs/designers 选择使用预处理器的原因是它大大加快了编码速度并使许多事情变得更加容易。对于您的 Codepen 示例 - 生成了 100 个 <div class="o"></div> 和 100 个动画 transformation/colour 基本值。这 非常不切实际，不应在生产中使用。

如果您想要在您的网站上使用这样的旋转球体 - 使用 spritesheet、动画 .gif 或在 WebGL 中编写它可能会找到更好的结果。

在网站中实施 "Pure CSS Sphere" - 我该怎么做？

Implementing "Pure CSS Sphere" into website - how do I do it?

html

css

haml

sass

web