Question

我试图找出如何编写一个CSS动画，它允许图像（id：slam）突然出现在屏幕上并覆盖所有内容而不会替换任何文本。到目前为止，这就是我所拥有的： HTML：

    body{
	    height: 100%;
    }

    div{
	    overflow: auto;
        text-align: center;
    }

    @-webkit-keyframes slam-animation {
        0% {
          opacity: 0;
          -webkit-transform: scale(10);
        }

        100% {
          opacity: 1;
          -webkit-transform: rotate(-30deg) scale(1);
        }
    }

    #slam {
        -webkit-animation-name: slam-animation;
        -webkit-animation-duration: 1s;
        -webkit-animation-direction: normal;
        -webkit-animation-timing-function: linear;
        -webkit-animation-fill-mode: forwards;
    }

 <body>
        <img id="slam" src="assets/images/Undesirable.jpg" alt = "undesirable">
		    <header>
			    <h1>Text</h1>
		    </header>
		    <div class="main_game">
			    <p>Stuff</p>
			<div class = "col-xs-2">
			</div>
			
			<div class = "left_box col-xs-4">
				<p>Stuff</p>
			</div>

			<div class = "right_box col-xs-4">
				<p>Stuff</p>
			</div>

			<div class = "col-xs-2">
			</div>
		</div>
	</body>

Answer 1

对图片使用position:absolute。

使用绝对位置，元素将从正常文档流中删除;没有为页面布局中的元素创建空间，即它不会影响其他元素的位置。

Reference Link to understand position absolute

Stack Snippet

＆＃13;

body {
  height: 100%;
}

.main_game div {
  text-align: center;
}

.main {
  position: relative;
}

@-webkit-keyframes slam-animation {
  0% {
    opacity: 0;
    -webkit-transform: scale(10);
  }
  100% {
    opacity: 1;
    -webkit-transform: rotate(-30deg) scale(1);
  }
}

img#slam {
  position: absolute;
  top: 0;
  left: 0;
}

#slam {
  -webkit-animation-name: slam-animation;
  -webkit-animation-duration: 1s;
  -webkit-animation-direction: normal;
  -webkit-animation-timing-function: linear;
  -webkit-animation-fill-mode: forwards;
}

＆＃13;

<div class="main">
  <img id="slam" src="http://via.placeholder.com/350x350" alt="undesirable">
  <header>
    <h1>Text</h1>
  </header>
  <div class="main_game">
    <p>Stuff</p>
    <div class="col-xs-2">
    </div>

    <div class="left_box col-xs-4">
      <p>Stuff</p>
    </div>
    <div class="right_box col-xs-4">
      <p>Stuff</p>
    </div>
    <div class="col-xs-2">
    </div>
  </div>
</div>

＆＃13;

允许图像覆盖屏幕上所有内容的CSS动画

1 个答案: