[英]Black background slide up
It is probably very simple but i'm stuck trying to make a homepage automatic background slider like here : https://www.jackdavison.co.uk这可能很简单,但我一直在尝试制作像这里这样的主页自动背景滑块: https : //www.jackdavison.co.uk
That's probably Jquery but I found a way to have something similar with html and Css, only it keeps repeating.这可能是 Jquery,但我找到了一种与 html 和 Css 类似的方法,只是它不断重复。
Any help ?有什么帮助吗?
You can see my code here:你可以在这里看到我的代码:
HTML HTML
<div class="wrapper">
<div class="sliding-background"></div>
</div>
CSS: CSS:
.wrapper {
overflow: hidden;
}
.sliding-background {
background-color: black;
height: 560px;
width: 100%;
animation: slide 2s linear infinite;
animation-delay: 4000ms;
}
@keyframes slide{
0%{
transform: translate3d(0, 0, 0);
}
100%{
transform: translate3d(0px, -2000px, 0px);
}
}
See on Codepen here在此处查看 Codepen
Thank you !谢谢 !
To stop the animation and keep the last state use:要停止动画并保持最后的状态,请使用:
.sliding-background {
animation: slide 2s linear;
animation-fill-mode: forwards;
}
You just need a minor change in your CSS.您只需要对 CSS 稍作改动。 Just change
animation: slide 2s linear infinite;
只需改变
animation: slide 2s linear infinite;
to animation: slide 0.6s ease-out forwards;
animation: slide 0.6s ease-out forwards;
. . Also, I have changed in
-2000px
to 100%
in @keyframes
in case if you have a full-height background.另外,我已经改变了
-2000px
至100%
的@keyframes
的情况下,如果你有一个全高的背景。
animation-fill-mode: forwards;
Let your element retain the style values from the last keyframe when the animation ends.让您的元素在动画结束时保留最后一个关键帧的样式值。
.wrapper { overflow: hidden; } .sliding-background { background-color: black; height: 560px; width: 100%; animation: slide 0.6s ease-out forwards; animation-delay: 2000ms; } @keyframes slide{ 0%{ transform: translate3d(0, 0, 0); } 100%{ transform: translate3d(0px, -100%, 0px); } }
<div class="wrapper"> <div class="sliding-background"></div> </div>
Please let me know if this helps.请让我知道这可不可以帮你。
Thank you all for the help the clean code is this one :谢谢大家的帮助,干净的代码是这样的:
Html html
<div class="wrapper">
<div class="sliding-background"></div>
</div>
CSS CSS
.wrapper {
overflow: hidden;
}
.sliding-background {
background-color: black;
width: 100%;
height: 100vh;
animation: slide 0.6s ease-out forwards;
animation-delay: 2000ms;
}
@keyframes slide{
0%{
transform: translate3d(0, 0, 0);
}
100%{
transform: translate3d(0px, -100%, 0px);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.