[英]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.