我有一个非常好的背景图像转换器。然而，我需要这是一个无限循环，所以在红色之后，它会回到橙色，并再次开始循环。有人能帮忙吗？
请随意使用vere-css html或javascript。
请帮忙！
:root {
--animate-duration: 2000ms;
}
#home .bgslider {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
background-color: #ffc60b;
}
#home .box {
min-width: 100%;
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
}
#home .ediv2 {
background: #90a0d6;
z-index: 10;
animation-delay: 5s;
}
#home .ediv3 {
background: #ff6666;
z-index: 20;
animation-delay: 10s;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="" name="descriptison">
<meta content="" name="keywords">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
</head>
<body>
<section id="home">
<div class="bgslider">
<div class="box ediv2 animate__animated animate__slideInRight"></div>
<div class="box ediv3 animate__animated animate__slideInRight"></div>
</div>
</section>
</body>
</html>我们使用CSS渐变色。至于动画，有两种方法可以实现这一点：
CSS转换
正如评论中提到的，通过CSS转换可以实现这一点：
html {
overflow: hidden;
}
.bgslider {
position: absolute;
width: 400%;
height: 100%;
left: 0;
top: 0;
background: linear-gradient(90deg, #ffc60b 25%, #ff6666 25% 50%, #90a0d6 50% 75%, #ffc60b 75% 100%);
animation: slide 5s infinite;
}
@keyframes slide {
33% {
transform: translateX(-25%);
}
66% {
transform: translateX(-50%);
}
100% {
transform: translateX(-75%);
}
}<div class="bgslider"></div>CSS定位
你也可以将就着使用CSS定位。但是，由于性能惊人，因此不建议使用此方法。
html {
overflow: hidden;
}
.bgslider {
position: absolute;
width: 400%;
height: 100%;
left: 0;
top: 0;
background: linear-gradient(90deg, #ffc60b 25%, #ff6666 25% 50%, #90a0d6 50% 75%, #ffc60b 75% 100%);
animation: slide 5s infinite;
}
@keyframes slide {
33% {
left: -100%;
}
66% {
left: -200%;
}
100% {
left: -300%;
}
}<div class="bgslider"></div>额外奖励：控制颜色持续时间
您可以通过对代码进行一些小的修改来控制屏幕上的颜色持续时间：
html {
overflow: hidden;
--color-duration: 5s;
}
.bgslider {
position: absolute;
width: 400%;
height: 100%;
left: 0;
top: 0;
background: linear-gradient(90deg, #ffc60b 25%, #ff6666 25% 50%, #90a0d6 50% 75%, #ffc60b 75% 100%);
animation: slide calc(var(--color-duration) * 4) infinite;
}
@keyframes slide {
0% {
left: 0;
}
25%, 33% {
left: -100%;
}
50%, 66% {
left: -200%;
}
75%, 100% {
left: -300%;
}
}<div class="bgslider"></div>我将解释我在这里做了什么。
- 正如我在评论中提到的那样，我使用了
@keyframes。因此，我删除了ediv1和ediv2分区，因为它们不是必需的 - 我定义了一个名为
magicColor的关键帧规则，并将其应用于.bgslider类
:root {
--animate-duration: 2000ms;
}
#home .bgslider {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
/*background-color: #ffc60b;*/
animation: magicColor 3s infinite;
-webkit-animation-timing-function:steps(1, end); /* use this to prevent fade effect */
}
@keyframes magicColor {
0% { background-color: #ffc60b; }
50% { background: #90a0d6; }
100% { background: #ff6666; }
}
#home .box {
min-width: 100%;
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
}
/*
#home .ediv2 {
background: #90a0d6;
z-index: 10;
animation-delay: 5s;
}
#home .ediv3 {
background: #ff6666;
z-index: 20;
animation-delay: 10s;
}*/<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="" name="descriptison">
<meta content="" name="keywords">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
</head>
<body>
<section id="home">
<div class="bgslider">
<!--<div class="box ediv2 animate__animated animate__slideInRight"></div>
<div class="box ediv3 animate__animated animate__slideInRight"></div>-->
</div>
</section>
</body>
</html>编辑：所以我无法在您的代码片段中看到滑动效果。以下是该问题的正确且纯CSS解决方案。
.inner {
width: 200px;
height: 200px;
overflow: hidden;
position: relative;
}
.images-wrapper {
width: 100%;
height: 100%;
}
.images-wrapper .slide {
width: 200px;
height: 200px;
}
.images-wrapper .slide.one {
background-color: rgb(0,0,255);
}
.images-wrapper .slide.two {
background-color: rgb(255,0,0);
}
.images-wrapper .slide.three {
background-color: rgb(0,255,0);
}
.images-wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
align-items: center;
animation: slideToLeft 10s ease infinite;
animation: slideToLeft 5s ease infinite 1s;
}
.slide.one {
z-index: -1;
animation: image-change 5s ease infinite 1s;
}
@keyframes image-change {
0%,
50% {
transform: translateX(0%);
}
70%,
100% {
transform: translateX(300%);
}
}
@keyframes slideToLeft {
0%,
10% {
transform: translateX(0);
}
15%,
45% {
transform: translateX(-100%);
}
50%,
80% {
transform: translateX(-200%);
}
85%,
100% {
transform: translateX(-300%);
}
}<div class="inner">
<div class="images-wrapper">
<!--
<img src="http://via.placeholder.com/200x200/ff0000" alt="">
<img src="http://via.placeholder.com/20**strong text**0x200/00ff00" alt="">
<img src="http://via.placeholder.com/200x200/0000ff" alt="">
-->
<div class="slide one"></div>
<div class="slide two"></div>
<div class="slide three"></div>
</div>
</div>编辑2:这是为了使各部分全屏显示。
.inner {
width: 100vw;
height: 100vh;
overflow: hidden;
position: relative;
}
.images-wrapper {
width: 100%;
height: 100%;
}
.images-wrapper .slide {
width: 100vw;
height: 100%;
}
.images-wrapper .slide.one {
background-color: rgb(0,0,255);
}
.images-wrapper .slide.two {
background-color: rgb(255,0,0);
}
.images-wrapper .slide.three {
background-color: rgb(0,255,0);
}
.images-wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
align-items: center;
animation: slideToLeft 10s ease infinite;
animation: slideToLeft 5s ease infinite 1s;
}
.slide.one {
z-index: -1;
animation: image-change 5s ease infinite 1s;
}
@keyframes image-change {
0%,
50% {
transform: translateX(0%);
}
70%,
100% {
transform: translateX(300%);
}
}
@keyframes slideToLeft {
0%,
10% {
transform: translateX(0);
}
15%,
45% {
transform: translateX(-100%);
}
50%,
80% {
transform: translateX(-200%);
}
85%,
100% {
transform: translateX(-300%);
}
}<div class="inner">
<div class="images-wrapper">
<!--
<img src="http://via.placeholder.com/200x200/ff0000" alt="">
<img src="http://via.placeholder.com/200x200/00ff00" alt="">
<img src="http://via.placeholder.com/200x200/0000ff" alt="">
-->
<div class="slide one"></div>
<div class="slide two"></div>
<div class="slide three"></div>
</div>
</div>注意：
我从这里得到了参考。
您可以在css上将动画迭代次数设置为无限。如果第一种颜色和最后一种颜色相同，它将看起来是无限的。
你需要这样的东西吗？
试用：https://codepen.io/metagrapher/pen/tgcLl
<section id="message">
<h1>Rainbow<br/>Goodness</h1>
<p>So this is currently set to color cycle every 175 seconds, which is the same as 60 seconds per color divided by two, or 30 seconds per color, assuming roygbiv, even though I only programmed Red, Green, and Blue. The timing itself should actually make it so that each color gets its time, as no color should be a rest, anyhow. Arguably I should have done more to get the full rainbow. We hardly touched the luminosity spectrum, although I think some of that does make it in.</p>
<p>The font color looping is based on a Cyan-Magenta-Yellow loop, as the opposite of RGB.</p></section>
CSS：
body {
animation: colorchange 2s linear 1s infinite; /* animation-name followed by duration in seconds*/
/* you could also use milliseconds (ms) or something like 2.5s */
-webkit-animation: colorchange 2s linear 0s infinite alternate; /* Chrome and Safari */
}
@keyframes colorchange
{
0% {background: red; color: cyan;}
33% {background: green; color: magenta;}
66% {background: blue; color: yellow;}
100% {background: red; color: cyan;}
}
@-webkit-keyframes colorchange /* Safari and Chrome - necessary duplicate */
{
0% {background: red; color: cyan;}
33% {background: green; color: magenta;}
66% {background: blue; color: yellow;}
100% {background: red; color: cyan;}
}
section {
width: 33vw;
margin: 0 auto;
}
#message {
text-align: center;
color: inherit;
opacity: 75%;
mix-blend-mode: difference;
font-family: Cooper Black, Helvetica, Arial;
}
h1 {
font-size: 4.69em;
}
p {
font-size: 1.6em;
font-family: Helvetica Neue, Helvetica, Arial;
}