Question

所以这个动画存在：

body { background-color:#333; }
#snow{
    background: none;
    font-family: Androgyne;
    background-image: url('http://www.wearewebstars.dk/codepen/img/s1.png'), url('http://www.wearewebstars.dk/codepen/img//s2.png'), url('http://www.wearewebstars.dk/codepen/img//s3.png');
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index:1;
    -webkit-animation: snow 10s linear infinite;
    -moz-animation: snow 10s linear infinite;
    -ms-animation: snow 10s linear infinite;
    animation: snow 10s linear infinite;
}
@keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
@-moz-keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 400px 1000px, 200px 400px, 100px 300px;}
}
@-webkit-keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
@-ms-keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}

我想将它用于完整的背景，但它会导致浏览器滞后。所以我把它转换成使用transform来减少所需的资源。但是我遇到的问题是它不再无限地重复背景而且我不确定如何使用转换功能来解决这个问题。我有两次尝试，但我一直无法找到答案，我想知道这是否可能，或者我是否朝着正确的方向前进。

https://jsfiddle.net/psa5pgbe/

#snow-l, #snow-m, #snow-s {
  position: fixed;
  width: 100%;
  height: 100%;
    overflow: hidden;
}

#snow-l:before, #snow-m:before, #snow-s:before {
    content: "";
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    z-index: -1;
    pointer-events: none;
}

#snow-l:before {
    animation: snow-l 100s linear infinite;
    background: url("https://static1.xenogamers.com/styles/default/xenogamers/christmas/snow-l-c.png") 0 0 repeat;
}
@keyframes snow-l {
0% {
    transform: translate(0px, 0px);
}
50% {
    transform: translate(2500px, 5000px);
}
100% {
    transform: translate(5000px, 10000px);
}
}

#snow-m:before {
    animation: snow-m 100s linear infinite;
    background: url("https://static1.xenogamers.com/styles/default/xenogamers/christmas/snow-m-c.png") 0 0 repeat;
}
@keyframes snow-m {
0% {
    transform: translate(0px, 0px);
}
50% {
    transform: translate(1000px, 2000px);
}
100% {
    transform: translate(2000px, 4000px);
}
}

#snow-s:before {
    animation: snow-s 100s linear infinite;
    background: url("https://static1.xenogamers.com/styles/default/xenogamers/christmas/snow-s-c.png") 0 0 repeat;
}
@keyframes snow-s {
0% {
    transform: translate(0px, 0px);
}
50% {
    transform: translate(-1000px, 1500px);
}
100% {
    transform: translate(-1000px, 3000px);
}
}

第一个是使用伪选择器。

https://jsfiddle.net/aLLuj7ah/

#container {
  position: relative;
  overflow: hidden;
}

#snow * {
    content: "";
    display: block;
    height: 100%;
    pointer-events: none;
    position: fixed;
    width: 100%;
    z-index: -1;
}

#snow-l {
    animation: snow-l 10s linear infinite;
    background-image: url("https://static1.xenogamers.com/styles/default/xenogamers/christmas/snow-l-c.png");
  background-repeat: repeat;
}
@keyframes snow-l {
0% {
    transform: translate(0px, 0px);
}
50% {
    transform: translate(500px, 500px);
}
100% {
    transform: translate(500px, 1000px);
}
}

#snow-m {
    animation: snow-m 10s linear infinite;
    background-image: url("https://static1.xenogamers.com/styles/default/xenogamers/christmas/snow-m-c.png");
  background-repeat: repeat;
}
@keyframes snow-m {
0% {
    transform: translate(0px, 0px);
}
50% {
    transform: translate(100px, 200px);
}
100% {
    transform: translate(200px, 400px);
}
}

#snow-s {
    animation: snow-s 10s linear infinite;
    background-image: url("https://static1.xenogamers.com/styles/default/xenogamers/christmas/snow-s-c.png");
  background-repeat: repeat;
}
@keyframes snow-s {
0% {
    transform: translate(0px, 0px);
}
50% {
    transform: translate(-100px, 150px);
}
100% {
    transform: translate(-100px, 300px);
}
}

第二个不是，而是更简化。

要么朝着正确的方向前进，要么这是不可能的？

谢谢！

具有重复背景的CSS过渡

0 个答案: