Question

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

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

决定制作名为＆＃34; sphere.css＆＃34;的文件。代码：

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

另一个名为＆＃34; sphere.html＆＃34;的文件代码：

<!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中，如果每个代码区域click the eye icon，则可以在查看预处理器代码和实际生成的输出之间切换。

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

如果你想在你的网站上使用这样的旋转球体 - 你可以使用spritesheet，动画.gif或者在WebGL中编写更好的结果。

实施＆＃34; Pure CSS Sphere＆＃34;进入网站 - 我该怎么办？

1 个答案: