平滑无限滚动横幅 [CSS 只]
Smooth Infinite Scrolling Banner [CSS Only]
希望优化这种无限滚动效果,但是我不完全确定如何在循环回原始图像时创建平滑过渡。在 10 岁时几乎不明显,但在 30 岁时更明显。我假设它与结束头寸保证金有关,但不能完全确定它。最后一帧的值应该是多少?
HTML:
<div class="container">
<div class="photobanner">
<img class="first" src="http://placehold.it/350x150">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/350x150">
</div>
</div>
<div class="container">
<div class="photobanner">
<img class="second" src="http://placehold.it/350x150">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/350x150">
</div>
</div>
<div class="container">
<div class="photobanner">
<img class="first" src="http://placehold.it/350x150">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/350x150">
</div>
</div>
CSS:
.container {
width: 100%;
overflow: hidden;
margin: 10px auto;
background: white;
}
.photobanner, .photobanner2 {
height: 233px;
width: 3550px;
}
.photobanner img, .photobanner2 img {
padding-right: 10px;
height: 233px;
width: 350px;
}
.photobanner img {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.photobanner img:hover {
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
cursor: pointer;
-webkit-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
}
/*keyframe animations*/
.first {
-webkit-animation: bannermove 30s linear infinite;
-moz-animation: bannermove 30s linear infinite;
-ms-animation: bannermove 30s linear infinite;
-o-animation: bannermove 30s linear infinite;
animation: bannermove 30s linear infinite;
}
@keyframes "bannermove" {
0% {margin-left: 0px;}
100% {margin-left: -2125px;}
}
@-moz-keyframes bannermove {
0% {margin-left: 0px;}
100% {margin-left: -2125px;}
}
@-webkit-keyframes "bannermove" {
0% {margin-left: 0px;}
100% {margin-left: -2125px;}
}
@-ms-keyframes "bannermove" {
0% {margin-left: 0px;}
100% {margin-left: -2125px;}
}
@-o-keyframes "bannermove" {
0% {margin-left: 0px;}
100% {margin-left: -2125px;}
}
.second {
-webkit-animation: bannermoves 30s linear infinite;
-moz-animation: bannermoves 30s linear infinite;
-ms-animation: bannermoves 30s linear infinite;
-o-animation: bannermoves 30s linear infinite;
animation: bannermoves 30s linear infinite;
}
@keyframes "bannermoves" {
0% {margin-left: -2125px;}
100% {margin-left: 0px;}
}
@-moz-keyframes bannermoves {
0% {margin-left: -2125px;}
100% {margin-left: 0px;}
}
@-webkit-keyframes "bannermoves" {
0% {margin-left: -2125px;}
100% {margin-left: 0px;}
}
@-ms-keyframes "bannermoves" {
0% {margin-left: -2125px;}
100% {margin-left: 0px;}
}
@-o-keyframes "bannermoves" {
0% {margin-left: -2125px;}
100% {margin-left: 0px;}
}
看看这个:https://jsfiddle.net/sergdenisov/wb28eeh2/3/。
图像之间有不必要的 space(原因 display: inline
,阅读这篇文章 — https://css-tricks.com/fighting-the-space-between-inline-block-elements/)。我设置:
.photobanner, .photobanner2 {
font-size: 0
}
然后我删除 padding-right: 2px
并设置:
.photobanner img, .photobanner2 img {
margin-right: 5px;
}
原来 space 之间的 2 个 img
标签是 6px
,现在是 5px
。
现在我们可以计算出动画所需的 margin-left
:6 x (350 + 5) = 2130px
。就是这样。
希望优化这种无限滚动效果,但是我不完全确定如何在循环回原始图像时创建平滑过渡。在 10 岁时几乎不明显,但在 30 岁时更明显。我假设它与结束头寸保证金有关,但不能完全确定它。最后一帧的值应该是多少?
HTML:
<div class="container">
<div class="photobanner">
<img class="first" src="http://placehold.it/350x150">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/350x150">
</div>
</div>
<div class="container">
<div class="photobanner">
<img class="second" src="http://placehold.it/350x150">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/350x150">
</div>
</div>
<div class="container">
<div class="photobanner">
<img class="first" src="http://placehold.it/350x150">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/350x150">
</div>
</div>
CSS:
.container {
width: 100%;
overflow: hidden;
margin: 10px auto;
background: white;
}
.photobanner, .photobanner2 {
height: 233px;
width: 3550px;
}
.photobanner img, .photobanner2 img {
padding-right: 10px;
height: 233px;
width: 350px;
}
.photobanner img {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.photobanner img:hover {
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
cursor: pointer;
-webkit-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
}
/*keyframe animations*/
.first {
-webkit-animation: bannermove 30s linear infinite;
-moz-animation: bannermove 30s linear infinite;
-ms-animation: bannermove 30s linear infinite;
-o-animation: bannermove 30s linear infinite;
animation: bannermove 30s linear infinite;
}
@keyframes "bannermove" {
0% {margin-left: 0px;}
100% {margin-left: -2125px;}
}
@-moz-keyframes bannermove {
0% {margin-left: 0px;}
100% {margin-left: -2125px;}
}
@-webkit-keyframes "bannermove" {
0% {margin-left: 0px;}
100% {margin-left: -2125px;}
}
@-ms-keyframes "bannermove" {
0% {margin-left: 0px;}
100% {margin-left: -2125px;}
}
@-o-keyframes "bannermove" {
0% {margin-left: 0px;}
100% {margin-left: -2125px;}
}
.second {
-webkit-animation: bannermoves 30s linear infinite;
-moz-animation: bannermoves 30s linear infinite;
-ms-animation: bannermoves 30s linear infinite;
-o-animation: bannermoves 30s linear infinite;
animation: bannermoves 30s linear infinite;
}
@keyframes "bannermoves" {
0% {margin-left: -2125px;}
100% {margin-left: 0px;}
}
@-moz-keyframes bannermoves {
0% {margin-left: -2125px;}
100% {margin-left: 0px;}
}
@-webkit-keyframes "bannermoves" {
0% {margin-left: -2125px;}
100% {margin-left: 0px;}
}
@-ms-keyframes "bannermoves" {
0% {margin-left: -2125px;}
100% {margin-left: 0px;}
}
@-o-keyframes "bannermoves" {
0% {margin-left: -2125px;}
100% {margin-left: 0px;}
}
看看这个:https://jsfiddle.net/sergdenisov/wb28eeh2/3/。
图像之间有不必要的 space(原因 display: inline
,阅读这篇文章 — https://css-tricks.com/fighting-the-space-between-inline-block-elements/)。我设置:
.photobanner, .photobanner2 {
font-size: 0
}
然后我删除 padding-right: 2px
并设置:
.photobanner img, .photobanner2 img {
margin-right: 5px;
}
原来 space 之间的 2 个 img
标签是 6px
,现在是 5px
。
现在我们可以计算出动画所需的 margin-left
:6 x (350 + 5) = 2130px
。就是这样。