<分区>
我覆盖了我的网站以响应，现在我还添加了一些新功能。我添加了一个新的动画背景，但现在它没有出现在我想要的地方。此外，我已经为我的学校元素使用 flex 编辑了大部分内容，我必须使用 flex 进行编辑，我们只能将 flex 用于学校元素
.bg {
animation: slide 3s ease-in-out infinite alternate;
background-image: linear-gradient(-60deg, #6c3 50%, #09f 50%);
left: -50%;
bottom: 0;
top: 0;
opacity: .5;
position: fixed;
right: -50%;
z-index: -1;
}
.bg2 {
animation-direction: alternate-reverse;
animation-duration: 4s;
}
.bg3 {
animation-duration: 5s;
}
@keyframes slide {
0% {
transform: translateX(-25%);
}
100% {
transform: translateX(25%);
}
}
.site1 {
background: #4B9ACC;
width: 100%;
height: 100em;
}
div.wrap content {
display: flex;
flex-flow: column;
}
@media screen and (min-width: 600px) {
div.wrap-content {
flex-flow: row;
}
nav, aside {
flex: 0 0 10rem;
}
body{
display: flex;
flex-flow: column;
background-color: black;
}
div.wrap-content {
flex: 1 auto;
}
}
main {
display: block;
}<div class="wrap-content">
<main>
<div class="site1" id="3">
<div class="bg"></div>
<div class="bg bg2"></div>
<div class="bg bg3"></div>
<h1 class="title">Welcome to my Website!</h1>
</div>
</main>
</div>最佳答案
.bg {
animation: slide 3s ease-in-out infinite alternate;
background-image: linear-gradient(-60deg, #6c3 50%, #09f 50%);
left: -50%;
bottom: 0;
top: 0;
opacity: .5;
position: fixed;
right: -50%;
z-index: -1;
}
.bg2 {
animation-direction: alternate-reverse;
animation-duration: 4s;
}
.bg3 {
animation-duration: 5s;
}
@keyframes slide {
0% {
transform: translateX(-25%);
}
100% {
transform: translateX(25%);
}
}
.site1 {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
flex-direction: column;
}
h1 {
text-align: center;
}<div class="site1" id="3">
<div class="bg"></div>
<div class="bg bg2"></div>
<div class="bg bg3"></div>
<h1 class="title">Welcome to my Website!</h1>
</div>只需添加这个 CSS
.site1 {
background: transparent;
}
关于html - 动画背景没有出现在我想要的地方，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55903061/