Question

我找到了这个有趣的Codepen，我正在尝试进行2次风暴，向左风暴之一向右风暴。我试图复制背景ID并将其设置为类，但没有用。如果有人可以帮助，那就太好了！ ps我是编码新手。

谢谢

#background {
  position: relative;
  height: 100%;
  width: 100%;
  background: url("https://sharabindu.com/pure_css_rain_with_strom/img/storm-bg.jpg") center center;
  background-size: cover;
  background-repeat: no-repeat;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
}

#background:after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: '';
  -webkit-animation: flash 5s ease-in infinite;
  animation: flash 5s ease-in infinite;
  z-index: 50;
}

#background:before {
  position: absolute;
  top: -150px;
  right: 100px;
  bottom: 0;
  left: 0px;
  content: '';
  -webkit-animation: strome 5s ease-in infinite;
  animation: strome 5s ease-in infinite;
  z-index: 9999;
}

https://codepen.io/sharabindu/project/editor/ZMKvvb

Answer 1

:after和:before伪元素不能用于以下用途相同的div / id / class / etc。

根据您的情况，您可以使用cloud class复制风暴。

.cloud1:before {
     position: absolute;
     top:-150px;
     right:100px;
     bottom: 0;
     left:0px;
     content: '';
     -webkit-animation: strome 5s ease-in infinite;
             animation: strome 5s ease-in infinite;
     z-index: 9999;
}

请参阅codepen：https://codepen.io/vaishalik3/pen/ERLrVe

希望这会有所帮助：）

Answer 2

不可能复制：before选择器

仍然，您需要复制一些东西，因为暴光和闪光灯都使用:before和:after伪选择器

但是，无需重复#background元素，因为两者都将包含背景图像，并且背景图像会重叠...因此，您将永远无法成功获得所需的渲染。

相反，尝试在后台添加2个新的div，您将在其上应用新的.storm类，该类将使用:before和:after伪选择器进行风暴和闪光

有点像这样

HTML

<div id="background">
  <div class="storm"></div>
  <div class="storm"></div>
</div>

CSS

#background {
  position: relative;
  height: 100%;
  width: 100%;
  background: url("https://sharabindu.com/pure_css_rain_with_strom/img/storm-bg.jpg") center center;
  background-size: cover;
  background-repeat: no-repeat;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
}
.storm{position: absolute; height: 100%; width: 50%;}
.storm:nth-of-type(1){left: 0;}
.storm:nth-of-type(2){right: 0;}


.storm:after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: '';
  -webkit-animation: flash 5s ease-in infinite;
  animation: flash 5s ease-in infinite;
  z-index: 50;
}

.storm:before {
  position: absolute;
  top: -150px;
  right: 100px;
  bottom: 0;
  left: 0px;
  content: '';
  -webkit-animation: strome 5s ease-in infinite;
  animation: strome 5s ease-in infinite;
  z-index: 9999;
}

现在...左右风暴都将同步，这不会提供最佳效果...现在由您决定向前移动

如何在CSS中复制两个：before？

2 个答案: