在网站上实现“ 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和HAML 。 在Codepen中，如果单击每个代码区域的眼睛图标，则可以在查看预处理器代码和实际生成的输出之间切换。

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

如果您希望在网站上使用这样的旋转球体，则可以使用Spritesheet，动画.gif或在WebGL中编写它来找到更好的结果。

在网站上实现“ Pure CSS Sphere”-我该怎么做？

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-03-27 13:17:09

在网站上实现“ Pure CSS Sphere”-我该怎么做？

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-03-27 13:17:09

解决方案1
1 已采纳 2015-03-27 13:17:09