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>
但它显然不起作用，我不知道把这样一个网站的代码放在哪里才能起作用。再说一遍，这只是为了学习。
提前感谢！
您看到的是经过预处理的CSS和HTML，即SCSS和HAML。在Codepen中，如果单击每个代码区域的眼睛图标，则可以在查看预处理器代码和实际生成的输出之间切换。
许多开发人员/设计师选择使用预处理器的原因是它大大加快了编码速度，使许多事情变得更容易。对于Codepen示例，有100个<div class="o"></div>正在生成，以及100个动画变换/颜色基础值。这是非常不切实际的，不应该在生产中使用。
如果你想在你的网站上有一个像这样的旋转球体，你可能会发现使用精灵表、动画.gif或在WebGL中编写效果更好。