-1

HyperSpace是一个简洁的演示，（我认为）只使用 css。但是当我将 html 和 css 复制到我的目录时，它不起作用。

问：我错过了什么？

4

6 回答 6

2

CodePen 演示设置为 apply -prefix -free，它基本上在必要时添加前缀。

使用 -prefix-free 的 codepen 截图

您可以将 -prefix-free 添加到您的项目（我不推荐）或在必要时添加前缀。

于 2013-05-26T18:47:34.677 回答
1

尝试将图像http://s.cdpn.io/18515/PIA09959-1280x800.jpg复制到您的主机并更改 css 中的 url

于 2013-05-22T15:04:58.683 回答
1

这可能是缺少浏览器前缀的问题。这里还有另一个带有 -moz 和 -webkit 前缀的版本。

于 2013-05-24T20:39:29.813 回答
1

当我使用 Firefox（21.0 版）时，您的代码实现对我来说可以正常工作。Google Chrome (ver 27.x) 不显示任何内容，而 IE (ver 10) 显示图像反复放大。

CSS3 属性“透视”、“变换”和“动画”可能是造成这种情况的原因。我可以推荐的最好的事情是复制这些属性中的每一个并添加变体。为了消除猜测，以下是推荐的编辑。

注意：CSS3 仍然相对较新，即使添加了这些内容，我怀疑这在所有现代浏览器中是否都能正常工作。Opera 和 IE9 或更低版本无法进行 3D 转换，并且对透视属性的支持不是很好。

.wall{
    background: url(http://s.cdpn.io/18515/PIA09959-1280x800.jpg);
    background-size: cover;
}

    html, body{
    height: 100%;
    width: 100%;
    overflow: hidden;
}

body{
    background: #000;
    text-align: center;
}

body:before{
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.scene{
    display: inline-block;
    vertical-align: middle;
    perspective: 5px;
    perspective-origin: 50% 50%;
    opacity: 0;
    animation: fadeIn 3s 1 linear;
    animation-fill-mode: forwards;
    position: relative;

    /* Safari / Chrome */
    -webkit-animation: fadeIn 3s 1 linear;
    -webkit-animation-fill-mode: forwards;
    -webkit-perspective: 5px;
    -webkit-perspective-origin: 50% 50%;
}

.wrap{
    position: absolute;
    width: 1000px;
    height: 1000px;
    left: -500px;
    top: -500px;
    opacity: 0;
    transform-style: preserve-3d;
    animation: move 12s infinite linear;
    animation-fill-mode: forwards;

    /* Safari / Chrome */
    -webkit-transform-style: preserve-3d;
    -webkit-animation: move 12s infinite linear;
    -webkit-animation-fill-mode: forwards;
}

.wrap:nth-child(2){
    animation: move 12s infinite linear;
    animation-delay: 6s;

    /* Safari / Chrome */
    -webkit-animation: move 12s infinite linear;
    -webkit-animation-delay: 6s;
}

.wall {
    width: 100%;
    height: 100%;
    position: absolute;
}

.wall-right {
    transform: rotateY(90deg) translateZ(500px);

    /* Safari / Chrome */
    transform: rotateY(90deg) translateZ(500px);
}

.wall-left {
    transform: rotateY(-90deg) translateZ(500px);

    /* Safari / Chrome */
    transform: rotateY(-90deg) translateZ(500px);
}

.wall-top {
    transform: rotateX(90deg) translateZ(500px);

    /* Safari / Chrome */
    -webkit-transform: rotateX(90deg) translateZ(500px);
}

.wall-bottom {
    -webkit-transform: rotateX(-90deg) translateZ(500px);

    /* Safari / Chrome */
    -webkit-transform: rotateY(-90deg) translateZ(500px);
}

.wall-back {
    -webkit-transform: rotateX(180deg) translateZ(500px);

    /* Safari / Chrome */
    -webkit-transform: rotateX(180deg) translateZ(500px);
}

@keyframes move {
    0%{
        transform: translateZ(-500px) rotate(0deg);
        opacity: 0;
    }
    25%{
        opacity: 1;
    }
    75%{
        opacity: 1;
    }
    100%{
        transform: translateZ(500px) rotate(0deg);
        opacity: 0;
    }
}

/* Safari / Chrome */
@-webkit-keyframes move {
    0%{
        -webkit-transform: translateZ(-500px) rotate(0deg);
        opacity: 0;
    }
    25%{
        opacity: 1;
    }
    75%{
        opacity: 1;
    }
    100%{
        -webkit-transform: translateZ(500px) rotate(0deg);
        opacity: 0;
    }
}

@keyframes fadeIn {
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}

/* Safari / Chrome */
@-webkit-keyframes fadeIn {
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
于 2013-05-25T08:35:31.217 回答
1

在您自己的工作和/或本地使用 CodePen 中的代码的最简单方法是下载笔的 .zip 文件，该文件将为您提供笔的完整副本，包括您需要制作的 prefixfree.min.js 文件这行得通。为此，只需转到 CodePen 上的笔页面，然后单击“共享”，然后单击“Export.zip”即可下载笔。在您的计算机上解压缩文件，您将拥有使用代码所需的所有文件，包括许可证！Ps 我喜欢 CodePen！:)

于 2014-06-21T19:55:30.160 回答
0

这是一个 CSS 版本，可与基于 webkit（Chrome 和 Safari）、moz（firefox）和 o（opera）的 CSS3 动画、转换和关键帧（在需要时使用所有 vedor 前缀）的实现一起使用。也应该与 IE10 一起使用，因为它使用无前缀 CSS3 名称。

Chris Coyier 在http://css-tricks.com/snippets/css/keyframe-animation-syntax/上有一篇关于这种关键帧动画的精彩文章

.wall{
  background: url(http://s.cdpn.io/18515/PIA09959-1280x800.jpg);
  background-size: cover;
}

html, body{
  height: 100%;
  width: 100%;
  overflow: hidden;
}

body{
  background: #000;
  text-align: center;
}

body:before{
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.scene{
  display: inline-block;
  vertical-align: middle;
  -webkit-perspective: 5px;
  -moz-perspective: 5px;
  -o-perspective: 5px;
  perspective: 5px;
  -webkit-perspective-origin: 50% 50%;
  -moz-perspective-origin: 50% 50%;
  -o-perspective-origin: 50% 50%;
  perspective-origin: 50% 50%;
  opacity: 0;
  -webkit-animation: fadeIn 3s 1 linear;
  -moz-animation: fadeIn 3s 1 linear;
  -o-animation: fadeIn 3s 1 linear;
  -animation: fadeIn 3s 1 linear;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  position: relative;
}

.wrap{
  position: absolute;
  width: 1000px;
  height: 1000px;
  left: -500px;
  top: -500px;
  opacity: 0;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-animation: move 12s infinite linear;
  -moz-animation: move 12s infinite linear;
  -o-animation: move 12s infinite linear;
  animation: move 12s infinite linear;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.wrap:nth-child(2){
  -webkit-animation: move 12s infinite linear;
  -webkit-animation-delay: 6s;
}

.wall {
  width: 100%;
  height: 100%;
  position: absolute;
}

.wall-right {
  -webkit-transform: rotateY(90deg) translateZ(500px);
  -moz-transform: rotateY(90deg) translateZ(500px);
  -o-transform: rotateY(90deg) translateZ(500px);
  transform: rotateY(90deg) translateZ(500px);
}

.wall-left {
  -webkit-transform: rotateY(-90deg) translateZ(500px);
  -moz-transform: rotateY(-90deg) translateZ(500px);
  -o-transform: rotateY(-90deg) translateZ(500px);
  transform: rotateY(-90deg) translateZ(500px);
}

.wall-top {
  -webkit-transform: rotateX(90deg) translateZ(500px);
  -moz-transform: rotateX(90deg) translateZ(500px);
  -o-transform: rotateX(90deg) translateZ(500px);
  transform: rotateX(90deg) translateZ(500px);
}

.wall-bottom {
  -webkit-transform: rotateX(-90deg) translateZ(500px);
  -moz-transform: rotateX(-90deg) translateZ(500px);
  -o-transform: rotateX(-90deg) translateZ(500px);
  transform: rotateX(-90deg) translateZ(500px);
}

.wall-back {
  -webkit-transform: rotateX(180deg) translateZ(500px);
  -moz-transform: rotateX(180deg) translateZ(500px);
  -o-transform: rotateX(180deg) translateZ(500px);
  transform: rotateX(180deg) translateZ(500px);
}

@-webkit-keyframes move{
  0%{
    -webkit-transform: translateZ(-500px) rotate(0deg);
    opacity: 0;
  }
  25%{
    opacity: 1;
  }
  75%{
    opacity: 1;
  }
  100%{
    -webkit-transform: translateZ(500px) rotate(0deg);
    opacity: 0;
  }
}

@-moz-keyframes move{
  0%{
    -moz-transform: translateZ(-500px) rotate(0deg);
    opacity: 0;
  }
  25%{
    opacity: 1;
  }
  75%{
    opacity: 1;
  }
  100%{
    -moz-transform: translateZ(500px) rotate(0deg);
    opacity: 0;
  }
}

@-o-keyframes move{
  0%{
    -o-transform: translateZ(-500px) rotate(0deg);
    opacity: 0;
  }
  25%{
    opacity: 1;
  }
  75%{
    opacity: 1;
  }
  100%{
    -o-transform: translateZ(500px) rotate(0deg);
    opacity: 0;
  }
}


@keyframes move {
  0%{
    -moz-transform: translateZ(-500px) rotate(0deg);
    -o-transform: translateZ(-500px) rotate(0deg);
    transform: translateZ(-500px) rotate(0deg);
    opacity: 0;
  }
  25%{
    opacity: 1;
  }
  75%{
    opacity: 1;
  }
  100%{
    -moz-transform: translateZ(500px) rotate(0deg);
    -o-transform: translateZ(500px) rotate(0deg);
    transform: translateZ(500px) rotate(0deg);
    opacity: 0;
  }
}

@-webkit-keyframes fadeIn {
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}

@-moz-keyframes fadeIn {
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}

@-o-keyframes fadeIn {
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}

@keyframes fadeIn {
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}
于 2013-05-28T17:59:03.177 回答