除了 CSS Wave Animation 之外，网页上没有任何可见的内容
[英]Nothing is visible on webpage other than CSS Wave Animation
问题描述
I am new to web development and wanted to use this wave animation I found - https://codepen.io/plavookac/pen/QMwObb
我是网络开发的新手，想使用我发现的这个波浪动画 - https://codepen.io/plavookac/pen/QMwObb
After applying it in HTML file only the CSS animation is visible and the Text content and other stuff is not visible.在 HTML 文件中应用它后，只有 CSS 动画可见，文本内容和其他内容不可见。 I guess it is overlapped by the CSS animation but I am not sure what should I do.我想它与 CSS 动画重叠，但我不知道该怎么做。
index.html索引.html
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is Heading</h1>
<p>This is a paragraph</p>
<div class="waveWrapper waveAnimation">
<div class="waveWrapperInner bgTop">
<div class="wave waveTop" style="background-image: url('http://front-end-noobs.com/jecko/img/wave-top.png')"></div>
</div>
<div class="waveWrapperInner bgMiddle">
<div class="wave waveMiddle" style="background-image: url('http://front-end-noobs.com/jecko/img/wave-mid.png')">
</div>
</div>
<div class="waveWrapperInner bgBottom">
<div class="wave waveBottom" style="background-image: url('http://front-end-noobs.com/jecko/img/wave-bot.png')"></div>
</div>
</div>
</body>
</html>
styles.css样式文件
@keyframes move_wave {
0% {
transform: translateX(0) translateZ(0) scaleY(1)
}
50% {
transform: translateX(-25%) translateZ(0) scaleY(0.55)
}
100% {
transform: translateX(-50%) translateZ(0) scaleY(1)
}
}
.waveWrapper {
overflow: hidden;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
}
.waveWrapperInner {
position: absolute;
width: 100%;
overflow: hidden;
height: 100%;
bottom: -1px;
background-image: linear-gradient(to top, #86377b 20%, #27273c 80%);
}
.bgTop {
z-index: 15;
opacity: 0.5;
}
.bgMiddle {
z-index: 10;
opacity: 0.75;
}
.bgBottom {
z-index: 5;
}
.wave {
position: absolute;
left: 0;
width: 200%;
height: 100%;
background-repeat: repeat no-repeat;
background-position: 0 bottom;
transform-origin: center bottom;
}
.waveTop {
background-size: 50% 100px;
}
.waveAnimation .waveTop {
animation: move-wave 3s;
-webkit-animation: move-wave 3s;
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.waveMiddle {
background-size: 50% 120px;
}
.waveAnimation .waveMiddle {
animation: move_wave 10s linear infinite;
}
.waveBottom {
background-size: 50% 100px;
}
.waveAnimation .waveBottom {
animation: move_wave 15s linear infinite;
}
3 个解决方案
解决方案1
0 2021-07-07 10:44:23
a solution for you:为您提供解决方案：
for text tags ( <h1> & <p> ):对于文本标签（ <h1> & <p> ）：
position: relative;
z-index: 999999;
解决方案2
0 2021-07-07 10:47:45
Add z-index:-999;添加z-index:-999; To .waveWrapper{}到.waveWrapper{}
A Simple Solution To Your Problem :)解决您问题的简单方法 :)
Demo ->演示 ->
@keyframes move_wave { 0% { transform: translateX(0) translateZ(0) scaleY(1) } 50% { transform: translateX(-25%) translateZ(0) scaleY(0.55) } 100% { transform: translateX(-50%) translateZ(0) scaleY(1) } } .waveWrapper { overflow: hidden; position: absolute; left: 0; right: 0; bottom: 0; top: 0; margin: auto; z-index:-999; /* Added Here */ } .waveWrapperInner { position: absolute; width: 100%; overflow: hidden; height: 100%; bottom: -1px; background-image: linear-gradient(to top, #86377b 20%, #27273c 80%); } .bgTop { z-index: 15; opacity: 0.5; } .bgMiddle { z-index: 10; opacity: 0.75; } .bgBottom { z-index: 5; } .wave { position: absolute; left: 0; width: 200%; height: 100%; background-repeat: repeat no-repeat; background-position: 0 bottom; transform-origin: center bottom; } .waveTop { background-size: 50% 100px; } .waveAnimation .waveTop { animation: move-wave 3s; -webkit-animation: move-wave 3s; -webkit-animation-delay: 1s; animation-delay: 1s; } .waveMiddle { background-size: 50% 120px; } .waveAnimation .waveMiddle { animation: move_wave 10s linear infinite; } .waveBottom { background-size: 50% 100px; } .waveAnimation .waveBottom { animation: move_wave 15s linear infinite; }
<head> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>This is Heading</h1> <p>This is a paragraph</p> <div class="waveWrapper waveAnimation"> <div class="waveWrapperInner bgTop"> <div class="wave waveTop" style="background-image: url('http://front-end-noobs.com/jecko/img/wave-top.png')"></div> </div> <div class="waveWrapperInner bgMiddle"> <div class="wave waveMiddle" style="background-image: url('http://front-end-noobs.com/jecko/img/wave-mid.png')"> </div> </div> <div class="waveWrapperInner bgBottom"> <div class="wave waveBottom" style="background-image: url('http://front-end-noobs.com/jecko/img/wave-bot.png')"></div> </div> </div> </body> </html>
解决方案3
-1 2021-07-07 10:55:57
CSS z-index indicates how elements overlap each other. CSS z-index 指示元素如何相互重叠。 In your case, the heading and the paragraph doesn't have a z-index value, while the wave elements do.在您的情况下，标题和段落没有 z-index 值，而波浪元素有。
So, give your h1 and p elements a z-index by something like:因此，通过以下方式为您的h1和p元素设置 z-index：
h1 {
z-index: 999;
}
Just make sure the z-index is bigger than those of the waves.只需确保 z-index 大于波浪的 z-index。 Apply the same CSS to <p> as well.也对<p>应用相同的 CSS。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.