我正在尝试制作一个可以每隔 10-15 秒自动更改的文本框，就像它在这个链接中所做的那样：
https://www.groupamana.com/在视频背景上有一个文本，每次滚动它都会显示另一个文本。我想要的只是帮助我在我的 html 和 css 上做到每 5-15 秒它自己更改文本我希望这一切都在 css 和 html 上完成
我试过自己做但是没有成功
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Poppins';
}
.container {
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.4);
display: flex;
align-items: center;
justify-content: center;
}
.content {
text-align: center;
}
.content h1 {
font-size: 95px;
color: #fff;
margin-bottom: 50px;
}
.content a {
font-size: 23px;
color: #fff;
text-decoration: none;
border: 2px solid #fff;
padding: 15px 25px;
border-radius: 50px;
transition: 0.3s;
}
.content a:hover {
background-color: #fff;
color: #000;
}
.background-clip {
position: absolute;
right: 0;
bottom: 0;
z-index: -1;
}
@media (min-aspect-ratio:16/9) {
.background-clip {
width: 100%;
height: auto;
}
}
@media (max-aspect-ratio:16/9) {
.background-clip {
width: auto;
height: 100%;
}
}<div class="container">
<video autoplay loop muted plays-inline class="background-clip">
<source src="../images/videoproject.mp4.mp4" type="video/mp4">
</video>
<div class="content">
<h1>Explore More</h1>
</div>
<h3 class="rat">Welcome to our website</h3>
</div>*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Poppins';
}
.container{
width: 100%;
height: 100vh;
background-color: rgba(0,0,0,0.4);
display: flex;
align-items: center;
justify-content: center;
}
.content{
text-align: center;
}
.content h1{
font-size: 95px;
color: #fff;
margin-bottom: 30px;
}
.content a{
font-size: 23px;
color: #fff;
text-decoration: none;
border: 2px solid #fff;
padding: 15px 25px;
border-radius: 50px;
transition: 0.3s;
}
.content a:hover{
background-color: #fff;
color: #000;
}
.background-clip{
position: absolute;
right: 0;
bottom: 0;
z-index: -1;
}
@media (min-aspect-ratio:16/9) {
.background-clip{
width: 100%;
height: auto;
}
}
@media (max-aspect-ratio:16/9) {
.background-clip{
width: auto;
height: 100%;
}
}
.banner-text{
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%,-50%);
width: 100%;
color: red;
}
.banner-text h2{
text-align: center;
font-size: 60px;
margin: 0;
color: darkturquoise;
text-transform: uppercase;
margin-bottom: 150px;
}
.box{
font-size: 35px;
font-weight: bold;
opacity: 0;
position: absolute;
width: 100%;
text-align: left;
font-family: century gothic;
}
.b1{
animation: ani1 40s infinite;
}
.b2{
animation: ani2 40s infinite;
}
.b3{
animation: ani3 40s infinite;
}
.b4{
animation: ani4 40s infinite;
}
.b5{
animation: ani5 40s infinite;
}
@keyframes ani1 {
0%{
opacity: 0;
}
10%{
opacity: 1;
}
20%{
opacity: 0;
}
}
@keyframes ani2 {
20%{
opacity: 0;
}
30%{
opacity: 1;
}
40%{
opacity: 0;
}
}
@keyframes ani3 {
40%{
opacity: 0;
}
50%{
opacity: 1;
}
60%{
opacity: 0;
}
}
@keyframes ani4 {
60%{
opacity: 0;
}
70%{
opacity: 1;
}
80%{
opacity: 0;
}
}
@keyframes ani5 {
80%{
opacity: 0;
}
90%{
opacity: 1;
}
100%{
opacity: 0;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="container">
<video autoplay loop muted plays-inline class="background-clip">
<source src="../images/videoproject.mp4.mp4" type="video/mp4">
</video>
<div class="content">
<h1>Explore More</h1>
</div>
<!--this is the place of the div container-->
<div class="banner">
<div class="banner-text">
<h2>hey</h2>
<div class="text-wrapper">
<div class="box b1">
<li>this is our new website</li>
<li>this is our new website</li>
<li>this is our new website</li>
</div>
<div class="box b2">hello </div>
<div class="box b3">Welcome </div>
<div class="box b4">This is our website </div>
<div class="box b5">Thank you! </div>
</div>
</div>
</div>
</div>
</body>
</html>这是上面问题的答案，对不起，如果我的问题不清楚。