我有一个标题，它的背景是线性渐变色，底部有一张图片。它还有两个文本部分(h1和p(。
我想在3秒内无限切换以下内容：
(a( 线性背景颜色和图像，具有当前背景的微妙柔和淡出动画和传入背景的淡入动画，同时以3秒的间隔无限
(b( 当前文本部分h1(text A(和p(Sub text A(也应在新文本内容h1(text b(和p
const header = document.querySelector(".header");
const nav = document.querySelector(".nav");
window.onload = function() {
setInterval(function() {
header.classList.toggle('changed-header');
nav.classList.toggle('changed-nav');
}, 3000);
}*,
*::before,
*::after {
margin: 0;
padding: 0;
}
html {
font-size: 62.5%;
box-sizing: border-box;
}
body {
box-sizing: inherit;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-family: sans-serif;
font-size: 18px;
line-height: 25px;
color: #000;
}
.container {
max-width: 1400px;
margin: 0 auto;
}
.header {
background: url(https://res.cloudinary.com/iolamide/image/upload/v1599732332/cute-dog_kqcegn.png), linear-gradient(90deg, rgba(131, 58, 180, 1) 0%, rgba(253, 29, 29, 1) 50%, rgba(252, 176, 69, 1) 100%);
height: 766px;
background-repeat: no-repeat;
background-position: right bottom;
border-radius: 0 0 3.2rem 3.2rem;
transition: all .3s;
}
.header.changed-header {
background: url(https://res.cloudinary.com/iolamide/image/upload/v1599732328/cute-animal_w3aczq.png), linear-gradient(90deg, rgba(252, 176, 69, 1) 0%, rgba(253, 29, 29, 1) 50%, rgba(0, 0, 0, 1) 100%);
background-repeat: no-repeat;
background-position: right bottom;
}
.logo a {
color: #fff;
font-size: 30px;
text-decoration: none;
}
.nav {
background: linear-gradient(180deg, #12213C -18.75%, rgba(0, 102, 161, 0) 100%);
height: 144px;
display: flex;
justify-content: space-between;
padding: 3.8rem 6rem 0 6rem;
transition: all .3s;
}
.nav.changed-nav {
background: linear-gradient(180deg, #345456 10.75%, rgba(0, 102, 161, 0) 100%);
}
.logo {
width: 128px;
}
.menu a {
text-decoration: none;
cursor: pointer;
color: #fff;
font-weight: bold;
font-size: 16px;
line-height: 22px;
letter-spacing: 0.03em;
}
.menu a:not(:first-of-type) {
padding-left: 4rem;
}
.top {
position: relative;
margin-top: 7.4rem;
padding-left: 6rem;
width: 335px;
}
.top h1 {
font-size: 40px;
line-height: 55px;
font-weight: 800;
color: #fff;
margin-bottom: 24px;
}
.top p {
color: #fff;
font-size: 20px;
line-height: 27px;
margin-bottom: 80px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>FadeIn and FadeOut background and text infinitely at 3 secs interval</title>
</head>
<body>
<header class="header">
<nav class="nav">
<div class="logo">
<a href="">
LOGO
</a>
</div>
<div class="menu">
<a href="">Nav A</a>
<a href="">Nav B</a>
<a href="">Nav C</a>
</div>
</nav>
<!-- Top Section -->
<section class="top">
<h1>
Text A
<!-- I want this to change to Text B -->
</h1>
<p>
Sub Text A
<!-- I want this to change to SubText B -->
</p>
</section>
</header>
</body>
</html>背景和文本内容的所有淡出和淡入效果都应该同时出现。
从我的代码和结果中可以看出，不断变化的背景并没有渐变效果，因为它突然发生了变化。我也不知道如何同时淡出和淡出文本。
如果您想无限期地淡入淡出任何，可以使用CSS@keyframes。
在这种情况下，以下声明：
animation: fadeInAndOut 6s linear infinite;
表示您将有一个CSS动画，该动画为：
- 的名称为
fadeInAndOut - 需要
6s才能完成 - 具有
linear定时功能 - 具有
infinite的animation-iteration-count
然后动画本身：
@keyframes fadeInAndOut { 50% {opacity: 0;} }
- [
0%]从opacity: 1开始(这是默认值，因此无需明确说明( - [
50%]中游到达opacity: 0 - [
100%]在opacity: 1处结束(这是默认值，因此无需明确说明(
工作示例：
p {
color: rgb(255, 0, 0);
font-size: 32px;
text-align: center;
animation: fadeInAndOut 6s linear infinite;
}
@keyframes fadeInAndOut {
50% {opacity: 0;}
}<p>I will fade in and out indefinitely</p>这应该会给你解决问题所需的所有工具。