0

抱歉标题含糊不清，但基本上我从 CodePen 复制了一些代码，它可以完美运行，但我无法在我的项目或我创建的 jsFiddle 中获得完全相同的代码。

这是相关的HTML：

<div class="loader loader--flipDelay loader--3d">
  <span class="loader-item">1</span>
  ...
</div>

以及 webkit 浏览器的 CSS：

.loader-item {
  display: inline-block;
  width: 50px;
  height: 50px;
  margin-left: 2px;
  background-color: rgba(61, 92, 126, 0.7);
  color: rgba(61, 92, 126, 0.7);
  -webkit-animation-duration: 2000ms;
  -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
  -webkit-animation-iteration-count: infinite;
}
.loader--flipDelay .loader-item {
  -webkit-animation-name: flipDelay;
}
@keyframes flipDelay {
  0% {
    transform: rotateX(0deg);
    transform-origin: 0 0 0;
    opacity: 1;
  }
  30% {
    transform: rotateX(90deg);
    transform-origin: 0 0 0;
    opacity: 0;
  }
  40% {
    transform-origin: 0 0 0;
  }
  60% {
    transform: rotateX(90deg);
    opacity: 0;
    transform-origin: 0 100% 0;
  }
  90% {
    transform: rotateX(0deg);
    opacity: 1;
    transform-origin: 0 100% 0;
  }
}

这是看起来很棒的CodePen 。

我试图将所有代码复制到我的项目中，并且元素在那里，但绝对没有发生任何事情。

这是一个显示代码未运行的jsFiddle 。请注意，此代码仅作为前缀用于 Chrome 和其他 webkit 浏览器。

我的第一个想法是这是一个前缀问题，但是在删除所有警告之后，这些加载器项仍然没有任何反应。

4

2 回答 2

1

您的代码-webkit-缺少@keyframes.

我也为其他浏览器添加了供应商前缀。

小提琴

body {
  font-family: 'PT Sans', sans-serif;
  text-align: center;
  background-color: #000;
  padding-top: 40px;
}
h1,
h2 {
  background-color: rgba(200, 200, 200, 0.2);
  padding: 20px;
  text-transform: uppercase;
  color: #fff;
}
h1 {
  font-size: 24px;
  margin-bottom: 40px;
}
h1 a {
  display: block;
  margin-top: 10px;
  text-transform: none;
  color: #aaa;
  font-size: 16px;
  text-decoration: none;
}
h2 {
  font-size: 16px;
  margin-bottom: 15%;
}
.loader {
  display: block;
  overflow: hidden;
  margin-bottom: 15%;
  font-size: 0;
}
.loader--3d {
  transform-style: preserve-3d;
  -webkit-perspective: 800px;
  perspective: 800px;
}
.loader--slideBoth {
  overflow: visible;
}
.loader-item {
  display: inline-block;
  width: 50px;
  height: 50px;
  margin-left: 2px;
  background-color: rgba(61, 92, 126, 0.7);
  color: rgba(61, 92, 126, 0.7);
  -webkit-animation-duration: 2000ms;
  -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
  -webkit-animation-iteration-count: infinite;
  animation-duration: 2000ms;
  animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
  animation-iteration-count: infinite;
}
.loader-item:nth-child(1) {
  -webkit-animation-delay: 100ms;
  animation-delay: 100ms;
}
.loader-item:nth-child(2) {
  -webkit-animation-delay: 200ms;
  animation-delay: 200ms;
}
.loader-item:nth-child(3) {
  -webkit-animation-delay: 300ms;
  animation-delay: 300ms;
}
.loader-item:nth-child(4) {
  -webkit-animation-delay: 400ms;
  animation-delay: 400ms;
}
.loader-item:nth-child(5) {
  -webkit-animation-delay: 500ms;
  animation-delay: 500ms;
}
.loader-item:nth-child(6) {
  -webkit-animation-delay: 600ms;
  animation-delay: 600ms;
}
.loader--slowFlip .loader-item {
  -webkit-animation-name: slowFlip;
  animation-name: slowFlip;
}
.loader--flipHoz .loader-item {
  -webkit-animation-name: flipHoz;
  animation-name: flipHoz;
}
.loader--fade .loader-item {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1000ms;
  animation-duration: 1000ms;
  animation-name: fade;
}
.loader--slowFlip .loader-item:nth-child(1),
.loader--flipHoz .loader-item:nth-child(1) {
  -webkit-animation-delay: 150ms;
  animation-delay: 150ms;
}
.loader--slowFlip .loader-item:nth-child(2),
.loader--flipHoz .loader-item:nth-child(2) {
  -webkit-animation-delay: 300ms;
  animation-delay: 300ms;
}
.loader--slowFlip .loader-item:nth-child(3),
.loader--flipHoz .loader-item:nth-child(3) {
  -webkit-animation-delay: 450ms;
  animation-delay: 450ms;
}
.loader--slowFlip .loader-item:nth-child(4),
.loader--flipHoz .loader-item:nth-child(4) {
  -webkit-animation-delay: 600ms;
  animation-delay: 600ms;
}
.loader--slowFlip .loader-item:nth-child(5),
.loader--flipHoz .loader-item:nth-child(5) {
  -webkit-animation-delay: 750ms;
  animation-delay: 750ms;
}
.loader--slowFlip .loader-item:nth-child(6),
.loader--flipHoz .loader-item:nth-child(6) {
  -webkit-animation-delay: 900ms;
  animation-delay: 900ms;
}
.loader--flipDelay .loader-item {
  -webkit-animation-name: flipDelay;
  animation-name: flipDelay;
}
.loader--flipDelayDown .loader-item {
  -webkit-animation-name: flipDelay;
  -webkit-animation-direction: reverse;
  animation-name: flipDelay;
  animation-direction: reverse;
}
.loader--slideDown .loader-item,
.loader--slideUp .loader-item {
  -webkit-animation-name: slideDown;
  -webkit-animation-duration: 800ms;
  -webkit-animation-timing-function: linear;
  animation-name: slideDown;
  animation-duration: 800ms;
  animation-timing-function: linear;
}
.loader--slideDown .loader-item {
  transform-origin: top left;
}
.loader--slideUp .loader-item {
  transform-origin: bottom left;
}
.loader--slideBoth .loader-item {
  -webkit-animation-name: slideBoth;
  -webkit-animation-duration: 1000ms;
  transform-origin: bottom left;
  -webkit-animation-timing-function: linear;
  animation-name: slideBoth;
  animation-duration: 1000ms;
  animation-timing-function: linear;
}
/**********************************/

/* KEYFRAME ANIMATION DEFINITIONS */

/**********************************/

@-webkit-keyframes slowFlip {
  0% {
    transform: rotateX(0deg);
  }
  40% {
    transform: rotateX(180deg);
  }
  100% {
    transform: rotateX(180deg);
  }
}
@-webkit-keyframes flipHoz {
  0% {
    transform: rotateY(0deg);
  }
  40% {
    transform: rotateY(180deg);
  }
  100% {
    transform: rotateY(180deg);
  }
}
@-webkit-keyframes fade {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes flipDelay {
  0% {
    transform: rotateX(0deg);
    transform-origin: 0 0 0;
    opacity: 1;
  }
  30% {
    transform: rotateX(90deg);
    transform-origin: 0 0 0;
    opacity: 0;
  }
  40% {
    transform-origin: 0 0 0;
  }
  60% {
    transform: rotateX(90deg);
    opacity: 0;
    transform-origin: 0 100% 0;
  }
  90% {
    transform: rotateX(0deg);
    opacity: 1;
    transform-origin: 0 100% 0;
  }
}
@-webkit-keyframes slideDown {
  0% {
    transform: rotateX(0deg);
  }
  50% {
    transform: rotateX(90deg);
  }
}
@-webkit-keyframes slideBoth {
  0% {
    transform: rotateX(0deg);
  }
  100% {
    transform: rotateX(360deg);
  }
}
@keyframes slowFlip {
  0% {
    transform: rotateX(0deg);
  }
  40% {
    transform: rotateX(180deg);
  }
  100% {
    transform: rotateX(180deg);
  }
}
@keyframes flipHoz {
  0% {
    transform: rotateY(0deg);
  }
  40% {
    transform: rotateY(180deg);
  }
  100% {
    transform: rotateY(180deg);
  }
}
@keyframes fade {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes flipDelay {
  0% {
    transform: rotateX(0deg);
    transform-origin: 0 0 0;
    opacity: 1;
  }
  30% {
    transform: rotateX(90deg);
    transform-origin: 0 0 0;
    opacity: 0;
  }
  40% {
    transform-origin: 0 0 0;
  }
  60% {
    transform: rotateX(90deg);
    opacity: 0;
    transform-origin: 0 100% 0;
  }
  90% {
    transform: rotateX(0deg);
    opacity: 1;
    transform-origin: 0 100% 0;
  }
}
@keyframes slideDown {
  0% {
    transform: rotateX(0deg);
  }
  50% {
    transform: rotateX(90deg);
  }
}
@keyframes slideBoth {
  0% {
    transform: rotateX(0deg);
  }
  100% {
    transform: rotateX(360deg);
  }
}
<h1>A collection of loaders using CSS 2D and 3D transforms <a href="https://twitter.com/AshNolan_" target="blank">created by @AshNolan_</a></h1>


<h2>Flip Delay Up</h2>

<div class="loader loader--flipDelay loader--3d"> <span class="loader-item">1</span>
  <span class="loader-item">2</span>
  <span class="loader-item">3</span>
  <span class="loader-item">4</span>
  <span class="loader-item">5</span>
  <span class="loader-item">6</span>

</div>

于 2014-12-12T18:39:56.653 回答
0

那不是CSS。那就是Sass，一种编译成 CSS 的语言；虽然它没有添加新的样式功能（这是浏览器的工作），但它确实具有许多语言特性，可以让您编写更简单、更简洁、重复更少的样式表。没有浏览器可以直接使用 Sass；它必须先编译成 CSS。

确实如此，我错过了问题的重点。请参阅上面的答案。

于 2014-12-12T18:31:37.493 回答