在网站中实现“纯 CSS Sphere”——我该怎么做？答案

【问题标题】：Implementing "Pure CSS Sphere" into website - how do I do it?在网站中实现“纯 CSS Sphere”——我该怎么做？
【发布时间】：2015-03-27 21:17:09
【问题描述】：

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>

但它显然不起作用，我不知道将代码从这样的网站放在哪里才能使其正常工作。再一次，这只是为了学习目的。

提前致谢！

【问题讨论】：

标签： html css web sass haml

【解决方案1】：

您正在查看预处理的 CSS 和 HTML - 即 SCSS 和 HAML。在 Codepen 中，如果您为每个代码区域 click the eye icon，您可以在查看预处理器代码和实际生成的输出之间切换。

许多开发人员/设计人员选择使用预处理器的原因是它大大加快了编码速度并使许多事情变得更容易。对于您的 Codepen 示例 - 生成了 100 个<div class="o"></div>，以及 100 个动画转换/颜色基础值。这是非常不切实际，不应该在生产中使用。

如果您想要在您的网站上使用这样的旋转球体 - 您可能会发现使用精灵表、动画 .gif 或用 WebGL 编写的效果会更好。

【讨论】：

谢谢，这正是我想要的 :)