在網站上實現“ 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