Question

我有一个背景图片，该图片会根据屏幕尺寸自动调整大小。我有一个动画，我试图做同样的事情以保持一致性。但是，动画的宽度似乎不一样，也不会在整个屏幕上延伸。

body {
  height: 100%;
  margin: 0;
  padding: 0;
  background:url(../img/Ex.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  padding-top: 3rem;
  outline-style: solid;
  outline-color: #ffcd11;
  outline-width: thick;
  background-color: #ffcd11;
}

.rain {
  height: 100%;
  margin: 0;
  padding: 0;
  background:url(../img/snowfall2.png) center center 
  fixed,url(../img/snowfall3.png) center center fixed;
  animation: rain 1s linear infinite;
}

.rain:before {
  content: '';
  position: absolute;
  height: 100%;
  background: white;
  animation: lighting 4s linear infinite;
  opacity: 0;
}

@keyframes lighting {
	0%
	{
		opacity: 0;
	}
	10%
	{
		opacity: 0; position: 0% 0%;
	}
	11%
	{
		opacity: 1; position: 20% 100%;
	}
	14%
	{
		opacity: 0;
	}
	20%
	{
		opacity: 0;
	}
	21%
	{
		opacity: 1;
	}
	24%
	{
		opacity: 0;
	}
	104%
	{
		opacity: 0;
	}
}

@keyframes rain {
	0%
	{
		background-position: 0% 0%;
	}
	
	100%
	{
		background-position: 20% 100%;
	}
 }

 <div class="carousel-caption rain">
       <!-- <h1>Machine Parts Intelligence</h1> -->
        <h1 class="lead">THE NEW MACHINE MODEL INFORMATION EXPERIENCE</h1>
      </div>

关键帧已添加。我还没有达到我想要的照明效果，但是目前我并不十分在意。我只希望降雨/降雪效果与背景图像本身的宽度相同。

Answer 1

我只需要在CSS中添加以下代码：

.rain {
height: 100%;
margin: 0;
padding: 0;
left: 0;
right: 0;
background:url(../img/snowfall2.png) center center fixed,url(../img/snowfall3.png) 
center center fixed;
animation: rain 1s linear infinite;
}

左右功能解决了我的问题，并扩大了我的网站的宽度。

Answer 2

在没有实际目标的图像或视觉表示的情况下很难知道您要做什么，但这是我对想要的东西的最佳猜测。

我所做的主要更改是将关键帧中的background-position属性调整为第一个值的50％，将其有效地放置在元素的中心。由于叫雨，所以我也使它从上落下。

body {
  height: 100%;
  margin: 0;
  padding: 0;
  background:url('https://images-na.ssl-images-amazon.com/images/I/51IwmuOPQyL._SL1052_.jpg') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  padding-top: 3rem;
  outline-style: solid;
  outline-color: #ffcd11;
  outline-width: thick;
  background-color: #ffcd11;
}

.rain {
  height: 100%;
  margin: 0;
  padding: 0;
  background:url('https://www.ikea.com/gb/en/images/products/euphorbia-acrurensis-potted-plant__0654026_pe708251_s5.jpg') center center 
  fixed, url('https://media.istockphoto.com/photos/cactus-in-pot-picture-id486466536?k=6&m=486466536&s=612x612&w=0&h=3CJO4XNOcS3WtAdMU4A9TuCbcwxnE9Rr6lHU4GDSwhE=') center center fixed;
  animation: rain 1s linear infinite;
}

.rain:before {
  content: '';
  position: absolute;
  height: 100%;
  background: white;
  animation: lighting 4s linear infinite;
  opacity: 0;
}

@keyframes lighting {
	0%
	{
		opacity: 0;
	}
	10%
	{
		opacity: 0; position: 0% 0%;
	}
	11%
	{
		opacity: 1; position: 20% 100%;
	}
	14%
	{
		opacity: 0;
	}
	20%
	{
		opacity: 0;
	}
	21%
	{
		opacity: 1;
	}
	24%
	{
		opacity: 0;
	}
	104%
	{
		opacity: 0;
	}
}

@keyframes rain {
	0%
	{
		background-position: 50% 100%;
	}
	
	100%
	{
		background-position: 50% 0%;
	}
 }

<div class="carousel-caption rain">
       <!-- <h1>Machine Parts Intelligence</h1> -->
        <h1 class="lead">THE NEW MACHINE MODEL INFORMATION EXPERIENCE</h1>
      </div>

让我知道这是否不是您想要的，我会看看是否可以调整。

动画宽度与背景图像相比

2 个答案: