如何无限地淡入淡出线性渐变背景图像和文本

Question

I have a header that has a background of a linear gradient color with a picture at the bottom corner.我有一个标题，它的背景是线性渐变色，底角有一张图片。 It also has two text sections (h1 and p).它还有两个文本部分（h1 和 p）。

I would like to switch the following infinitely within an interval of 3 seconds:我想在 3 秒的间隔内无限切换以下内容：

(a) The linear background color and image with a subtle gentle fade out animation for the current background and fade in animation for the incoming background at the same time infinitely with 3 seconds interval (a) 线性背景颜色和图像，带有微妙柔和的淡出动画当前背景和同时无限地淡入背景的动画，间隔 3 秒

(b) The current text sections h1(TExt A) and p(Sub Text A) should also fade out at the same time the new text contents h1(Text B) and p(Sub Text B) fades in. This should also continue infinitely with 3 seconds interval (b) 当前文本部分 h1(TExt A) 和 p(Sub Text A) 也应该在新文本内容 h1(Text B) 和 p(Sub Text B) 淡入的同时淡出。这也应该继续以 3 秒为间隔无限

 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>

All the fadeout and fadein effects of the background and text content should be at the same time.背景和文本内容的所有淡出和淡入效果应该同时进行。

As seen from my code and result, The changing background doesn't have a fade effect as it changes suddenly.从我的代码和结果中可以看出，不断变化的背景不会因为突然变化而产生淡入淡出效果。 And I also don't know how to go about fading in and fading out the text at the same time.而且我也不知道如何同时淡入和淡出文本。

Answer 1

If you want to fade anything in and out indefinitely, you can use CSS @keyframes .如果你想在和无限期褪色任何东西，你可以使用CSS @keyframes 。

In this case, the following declaration:在这种情况下，以下声明：

  animation: fadeInAndOut 6s linear infinite;

indicates that you will have a CSS animation which:表示您将拥有一个 CSS 动画，其中：

has the name fadeInAndOut有名字fadeInAndOut
takes 6s to complete需要6s才能完成
has a linear timing-function具有linear定时功能
has an animation-iteration-count of infinite animation-iteration-count为infinite

Then the animation itself:然后是动画本身：

@keyframes fadeInAndOut { 50% {opacity: 0;} }

[ 0% ] Starts at opacity: 1 (this is the default value, so there's no need to explicitly state this) [ 0% ]从不opacity: 1开始opacity: 1 （这是默认值，因此无需明确说明）
[ 50% ] By the middle reaches opacity: 0 [ 50% ] 中游opacity: 0
[ 100% ] Finishes at opacity: 1 (this is the default value, so there's no need to explicitly state this) [ 100% ] 以opacity: 1结束opacity: 1 （这是默认值，因此无需明确说明）

Working Example:工作示例：

 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>

That should give you all the tools you need to solve your question.这应该为您提供解决问题所需的所有工具。

如何无限地淡入淡出线性渐变背景图像和文本

问题描述

1 个解决方案

解决方案1
1 2020-09-10 11:16:13

如何无限地淡入淡出线性渐变背景图像和文本

问题描述

1 个解决方案

解决方案1 1 2020-09-10 11:16:13

解决方案1
1 2020-09-10 11:16:13