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

Question

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

I found this awesome thing that I would like to be a part of my website (just for personal use and practise) and am curious to how this would be implemented. 我发现了这个很棒的东西，我想成为我网站的一部分（仅供个人使用和实践），并对如何实现这一点感到好奇。 I'm fairly new to this kind of programming. 我对这种编程还很陌生。 I'm using GitPages and got a website running. 我正在使用GitPages并正在运行一个网站。

Decided to make a file called "sphere.css" with the code: 决定使用以下代码制作一个名为“ 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); }
}

And the another file called "sphere.html" with the code: 还有另一个名为“ 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>

But it's obviously not working and I have no idea where to put the code from a site like this to make it work. 但这显然行不通，我也不知道在哪里放置这样的代码才能使其正常工作。 Once again this is just for learning purposes. 再一次，这只是出于学习目的。

Thanks in advance! 提前致谢！

Answer 1

You're looking at preprocessed CSS and HTML - namely SCSS and HAML . 您正在查看预处理的CSS和HTML，即SCSS和HAML 。 In Codepen, if you click the eye icon for each of the code areas, you can toggle between viewing the preprocessor code, and the actual generated output. 在Codepen中，如果单击每个代码区域的眼睛图标，则可以在查看预处理器代码和实际生成的输出之间切换。

The reason many devs/designers choose to use preprocessors is it greatly accelerates coding and makes many things much easier. 许多开发人员/设计人员选择使用预处理程序的原因是，它大大加快了编码速度并使许多事情变得更加容易。 For your Codepen example - there are 100 <div class="o"></div> being generated, and 100 animation transformation/colour base values. 对于您的Codepen示例-生成了100个<div class="o"></div> ，以及100个动画转换/颜色基值。 This is massively impractical , and shouldn't be used in production. 这是非常不切实际的 ，不应在生产中使用。

If you wanted a rotating sphere like this on your website - you might find better results using a spritesheet, an animated .gif, or writing it in WebGL. 如果您希望在网站上使用这样的旋转球体，则可以使用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