[英]How to Fade in and fade out linear gradient background image and text at the same infinitely
我有一个标题，它的背景是线性渐变色，底角有一张图片。 它还有两个文本部分（h1 和 p）。
我想在 3 秒的间隔内无限切换以下内容：
(a) 线性背景颜色和图像，带有微妙柔和的淡出动画当前背景和同时无限地淡入背景的动画，间隔 3 秒
(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>
背景和文本内容的所有淡出和淡入效果应该同时进行。
从我的代码和结果中可以看出，不断变化的背景不会因为突然变化而产生淡入淡出效果。 而且我也不知道如何同时淡入和淡出文本。
如果你想在和无限期褪色任何东西，你可以使用CSS @keyframes 。
在这种情况下，以下声明：
animation: fadeInAndOut 6s linear infinite;
表示您将拥有一个 CSS 动画，其中：
fadeInAndOut6s才能完成linear定时功能animation-iteration-count为infinite然后是动画本身：
@keyframes fadeInAndOut { 50% {opacity: 0;} }
0% ]从不opacity: 1开始opacity: 1 （这是默认值，因此无需明确说明）50% ] 中游opacity: 0100% ] 以opacity: 1结束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>
这应该为您提供解决问题所需的所有工具。
如何在单击时更改背景颜色，然后淡出为线性渐变？
[英]How can I make a background color change on click and then fade out to a linear gradient?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.