时间戳

首页 > 解决方案 > 与背景图像相比的动画宽度

html - 与背景图像相比的动画宽度

问题描述

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

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>

添加了关键帧。我还没有完全让灯光效果按我的意愿工作，但我现在并不真正担心这一点。我只希望雨/雪效果与背景图像本身的宽度相同。

标签： htmlcss

解决方案

我只需要在我的 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;
}

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

推荐阅读