css - 使用样式 css 为背景设置动画时出错？

Question

我正在关注一个动画示例 background动画是一些从下往上上升的立方体和/或盒子。

我尝试实现的是以下示例 demo

出于某种原因，我无法按照相同的步骤进行操作。

我的代码

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

.clearfix:before,
.clearfix:after,
.container:before,
.container:after,
.onecontainer:before,
.onecontainer:after,
.container-fluid:after,
.container-fluid:before,
.row:before,
.row:after {
  display: table;
  content: " ";
}

.clearfix:after,
.container:after,
.onecontainer:after,
.container-fluid:after,
.row:after{
  clear:both
}

.clear {
  clear: both;
}

#bg{
  padding-top: 160px;
  min-height: 850px;
  background: #999;
  background: #aa8968;
  background: -moz-linear-gradient(-45deg, #aa8968 0%, #918d74 31%, #aa8968 66%, #918d74 100%);
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#aa8968), color-stop(31%,#918d74), color-stop(66%,#aa8968), color-stop(100%,#918d74));
  background: -webkit-linear-gradient(-45deg, #aa8968 0%,#918d74 31%,#aa8968 66%,#918d74 100%);
  background: -o-linear-gradient(-45deg, #aa8968 0%,#918d74 31%,#aa8968 66%,#918d74 100%);
  background: -ms-linear-gradient(-45deg, #aa8968 0%,#918d74 31%,#aa8968 66%,#918d74 100%);
  background: linear-gradient(135deg, #aa8968 0%,#918d74 31%,#aa8968 66%,#918d74 100%);
}

.center {
  text-align: center;
}

.bgone {
  width: 100%;
  height: 100px;
  padding: 50px 0px 0px 50px;
  background: rgba(239, 239, 239, 0.32);
}
.premium {
  width: 380px;
  height: 300px;
  position: relative;
  display: inline-block;
}

.primer {
	background-color: rgba(0, 0, 0, 0.31);
  padding: 2.1em 0;
}

.dlhe {
  text-align: center;
  padding: 3.9em 2em;
  background: rgba(255, 255, 255, 0.75);
}

.w3lsg-bubbles {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}
.w3lsg-bubbles li {
	position: absolute;
	list-style: none;
	display: block;
	width: 40px;
	height: 40px;
	background-color: rgba(255, 255, 255, 0.15);
	bottom: -160px;
	-webkit-animation: square 25s infinite;
	-moz-animation: square 25s infinite;
	-o-animation: square 25s infinite;
	-ms-animation: square 25s infinite;
	animation: square 25s infinite;
	-webkit-transition-timing-function: linear;
	-moz-transition-timing-function: linear;
	-o-transition-timing-function: linear;
	-ms-transition-timing-function: linear;
	transition-timing-function: linear; 
}
.w3lsg-bubbles li:nth-child(1) {
	left: 10%;
}
.w3lsg-bubbles li:nth-child(2) {
	left: 20%;
	width: 80px;
	height: 80px;
	-webkit-animation-delay: 2s;
	-moz-animation-delay: 2s;
	-o-animation-delay: 2s;
	-ms-animation-delay: 2s;
	animation-delay: 2s;
	-webkit-animation-duration: 17s;
	-moz-animation-duration: 17s;
	-o-animation-duration: 17s;
	animation-duration: 17s;
}
.w3lsg-bubbles li:nth-child(3) {
	left: 25%;
	-webkit-animation-delay: 4s;
	-moz-animation-delay: 4s;
	-o-animation-delay: 4s;
	-ms-animation-delay: 4s;
	animation-delay: 4s;
}
.w3lsg-bubbles li:nth-child(4) {
	left: 40%;
	width: 60px;
	height: 60px;
	-webkit-animation-duration: 22s;
	-moz-animation-duration: 22s;
	-o-animation-duration: 22s;
	-ms-animation-duration: 22s;
	animation-duration: 22s;
	background-color: rgba(255, 255, 255, 0.25);
}
.w3lsg-bubbles li:nth-child(5) {
	left: 70%;
}
.w3lsg-bubbles li:nth-child(6) {
	left: 80%;
	width: 120px;
	height: 120px;
	-webkit-animation-delay: 3s;
	-moz-animation-delay: 3s;
	-o-animation-delay: 3s;
	-ms-animation-delay: 3s;
	animation-delay: 3s;
	background-color: rgba(255, 255, 255, 0.2);
}
.w3lsg-bubbles li:nth-child(7) {
	left: 32%;
	width: 160px;
	height: 160px;
	-webkit-animation-delay: 7s;
	-moz-animation-delay: 7s;
	-o-animation-delay: 7s;
	-ms-animation-delay: 7s;
	animation-delay: 7s;
}
.w3lsg-bubbles li:nth-child(8) {
	left: 55%;
	width: 20px;
	height: 20px;
	-webkit-animation-delay: 15s;
	-moz-animation-delay: 15s; 
	animation-delay: 15s;
	-webkit-animation-duration: 40s;
	-moz-animation-duration: 40s;
	animation-duration: 40s;
}
.w3lsg-bubbles li:nth-child(9) {
	left: 25%;
	width: 10px;
	height: 10px;
	-webkit-animation-delay: 2s;
	animation-delay: 2s;
	-webkit-animation-duration: 40s;
	animation-duration: 40s;
	background-color: rgba(255, 255, 255, 0.3);
}
.w3lsg-bubbles li:nth-child(10) {
	left: 90%;
	width: 160px;
	height: 160px;
	-webkit-animation-delay: 11s;
	animation-delay: 11s;
}
@-webkit-keyframes square {
	0% {
		-webkit-transform: translateY(0);
		-moz-transform: translateY(0);
		-o-transform: translateY(0);
		-ms-transform: translateY(0);
		transform: translateY(0);
	}
	100% {
		-webkit-transform: translateY(-700px) rotate(600deg);
		-moz-transform: translateY(-700px) rotate(600deg); 
		-o-transform: translateY(-700px) rotate(600deg); 
		-ms-transform: translateY(-700px) rotate(600deg); 
		transform: translateY(-700px) rotate(600deg);        
	}
}
@keyframes square {
	0% {
		-webkit-transform: translateY(0);
		-moz-transform: translateY(0); 
		-o-transform: translateY(0); 
		-ms-transform: translateY(0);
		transform: translateY(0);        
	}
	100% {
		-webkit-transform: translateY(-700px) rotate(600deg);
		-moz-transform: translateY(-700px) rotate(600deg);
		-o-transform: translateY(-700px) rotate(600deg); 
		-ms-transform: translateY(-700px) rotate(600deg);
		transform: translateY(-700px) rotate(600deg);        
	}
}

<div id="bg" class="center">
    <div class="container">
      <div class="bgone">.. Welcome :) ..</div>
      <div class="div">
        <div class="premium center">
          <div class="primer">
            <h1>DESIGN BG ONE!</h1>
          </div>
          <div class="dlhe">
            <h1>Detalle</h1>
          </div>
        </div>
      </div>
    </div>
  <ul class="w3lsg-bubbles">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>

</div>

我的想法是动画组从div继续background 的容器那是 <div id="bg"></div>

Answer 1

我看到了 2 个主要问题。首先，您的 z-index 在 .w3lsg-bubbles. 中需要更高。此外，它的高度也太小了。发生这种情况是因为它查找具有 position: relative; 的第一个父元素，在您的情况下应该是 #bg。

#bg{
  position: relative; // position relative so .w3lsg-bubbles height is calculated in relation to #bg
  padding-top: 160px;
  min-height: 850px;
  background: #999;
  background: #aa8968;
  background: -moz-linear-gradient(-45deg, #aa8968 0%, #918d74 31%, #aa8968 66%, #918d74 100%);
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#aa8968), color-stop(31%,#918d74), color-stop(66%,#aa8968), color-stop(100%,#918d74));
  background: -webkit-linear-gradient(-45deg, #aa8968 0%,#918d74 31%,#aa8968 66%,#918d74 100%);
  background: -o-linear-gradient(-45deg, #aa8968 0%,#918d74 31%,#aa8968 66%,#918d74 100%);
  background: -ms-linear-gradient(-45deg, #aa8968 0%,#918d74 31%,#aa8968 66%,#918d74 100%);
  background: linear-gradient(135deg, #aa8968 0%,#918d74 31%,#aa8968 66%,#918d74 100%);
}
.container {
  position: relative;
  z-index: 1; // z-index higher than .w3lsg-bubbles so it sits on top of it
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
.w3lsg-bubbles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; // a z-index of -1 makes it go under #bg and hides it
}