纯css实现单张图片无限循环无缝滚动

参考链接：https://blog.csdn.net/qq_20777797/article/details/77916029

https://www.xiabingbao.com/css3/2017/07/03/css3-infinite-scroll.html

需求是一共有两个，

1、单张竖图持续向上无缝滚动，

2、单张竖图滚动到正中间之后，停留3s，继续滚动。

一、用js setInterval定时器实现

js实现要通过不断的改变定位、复制图片的方式来做，效果极其不稳定

二、用css3 animation动画实现

需求1动画：

代码语言：javascript复制 @-webkit-keyframes scrollUp {

0% {

-webkit-transform: translateY(0);

transform: translateY(0);

}

100% {

-webkit-transform: translateY(-400px);

transform: translateY(-400px);

}

}

@-moz-keyframes scrollUp {

0% {

-moz-transform: translateY(0);

transform: translateY(0);

}

100% {

-moz-transform: translateY(-400px);

transform: translateY(-400px);

}

}

@-o-keyframes scrollUp {

0% {

-o-transform: translateY(0);

transform: translateY(0);

}

100% {

-o-transform: translateY(-400px);

transform: translateY(-400px);

}

}

@keyframes scrollUp {

0% {

-webkit-transform: translateY(0);

-moz-transform: translateY(0);

-o-transform: translateY(0);

transform: translateY(0);

}

100% {

-webkit-transform: translateY(-400px);

-moz-transform: translateY(-400px);

-o-transform: translateY(-400px);

transform: translateY(-400px);

}

}需求2动画：

代码语言：javascript复制@-webkit-keyframes scrollUpAndPause {

0% {

-webkit-transform: translateY(0);

transform: translateY(0);

}

25% {

-webkit-transform: translateY(-350px);

transform: translateY(-350px);

}

100% {

-webkit-transform: translateY(-350px);

transform: translateY(-350px);

}

}

@-moz-keyframes scrollUpAndPause {

0% {

-moz-transform: translateY(0);

transform: translateY(0);

}

25% {

-moz-transform: translateY(-350px);

transform: translateY(-350px);

}

100% {

-moz-transform: translateY(-350px);

transform: translateY(-350px);

}

}

@-o-keyframes scrollUpAndPause {

0% {

-o-transform: translateY(0);

transform: translateY(0);

}

25% {

-o-transform: translateY(-350px);

transform: translateY(-350px);

}

100% {

-o-transform: translateY(-350px);

transform: translateY(-350px);

}

}

@keyframes scrollUpAndPause {

0% {

-webkit-transform: translateY(0);

-moz-transform: translateY(0);

-o-transform: translateY(0);

transform: translateY(0);

}

25% {

-webkit-transform: translateY(-350px);

-moz-transform: translateY(-350px);

-o-transform: translateY(-350px);

transform: translateY(-350px);

}

100% {

-webkit-transform: translateY(-350px);

-moz-transform: translateY(-350px);

-o-transform: translateY(-350px);

transform: translateY(-350px);

}

}html

代码语言：javascript复制

style:

代码语言：javascript复制 .box {

width: 500px;

height: 500px;

overflow: hidden;

}应用动画：

代码语言：javascript复制.image-item {

width: 500px;

height: 400px;

background: url("./猫咪咪.jpg") repeat-y center center; /* 什么图片都可以*/

/*animation-delay: 2s;!*延迟2s在进行滚动*!*/

-webkit-animation: 3s scrollUp linear infinite normal;/* 3s持续滚动图片*/

animation: 3s scrollUp linear infinite normal;

/*-webkit-animation: 4s scrollUpAndPause linear infinite normal;*/ /* 每停3s滚动一次*/

/*animation: 4s scrollUpAndPause linear infinite normal;*/

}另外自己做好css的兼容写法即可实现。

注意：

1、前提是把一张图片复制成3张，以实现无缝滚动，网上看了很多人此类无缝循环滚动的方法，实现出来之后，每次回到起点都会有跳动的感觉，这里经过摸索，给动画上移的距离设为图片的高度，就不会有跳动问题了，完美无限循环+无缝滚动；

2、图片每停3s滚动一次，且每次刚好停在正中间，上线留的衔接的图片距离相等，这里就要计算一下，每次动画上移距离= 图片实际显示高度-（所在区域的总高度-上间距高度）。

以下是图片滚动的js，如果要实现动态获取图片高度，则需要写下面的js：

代码语言：javascript复制function addKeyFrames(height,offsetHeight){

let style = document.createElement('style');

style.type = 'text/css';

let keyFrames = '\

@-webkit-keyframes scrollUpAndPause {\

0% {\

-webkit-transform: translateY(0);\

transform: translateY(0);\

}\

40% {\

-webkit-transform: translateY(0);\

transform: translateY(A_DYNAMIC_VALUE);\

}\

100% {\

-webkit-transform: translateY(0);\

transform: translateY(A_DYNAMIC_VALUE);\

}\

}\

@-moz-keyframes scrollUpAndPause {\

0% {\

-webkit-transform: translateY(0);\

transform: translateY(0);\

}\

40% {\

-webkit-transform: translateY(0);\

transform: translateY(A_DYNAMIC_VALUE);\

}\

100% {\

-webkit-transform: translateY(0);\

transform: translateY(A_DYNAMIC_VALUE);\

}\

}\

@-o-keyframes scrollUpAndPause {\

0% {\

-webkit-transform: translateY(0);\

transform: translateY(0);\

}\

40% {\

-webkit-transform: translateY(0);\

transform: translateY(A_DYNAMIC_VALUE);\

}\

100% {\

-webkit-transform: translateY(0);\

transform: translateY(A_DYNAMIC_VALUE);\

}\

}\

@keyframes scrollUpAndPause {\

0% {\

-webkit-transform: translateY(0);\

transform: translateY(0);\

}\

40% {\

-webkit-transform: translateY(0);\

transform: translateY(A_DYNAMIC_VALUE);\

}\

100% {\

-webkit-transform: translateY(0);\

transform: translateY(A_DYNAMIC_VALUE);\

}\

}\

@-webkit-keyframes scrollUp {\

0% {\

-webkit-transform: translateY(0);\

transform: translateY(0);\

}\

100% {\

-webkit-transform: translateY(0);\

transform: translateY(B_DYNAMIC_VALUE);\

}\

}\

@-moz-keyframes scrollUp {\

0% {\

-webkit-transform: translateY(0);\

transform: translateY(0);\

}\

100% {\

-webkit-transform: translateY(0);\

transform: translateY(B_DYNAMIC_VALUE);\

}\

}\

@-o-keyframes scrollUp {\

0% {\

-webkit-transform: translateY(0);\

transform: translateY(0);\

}\

100% {\

-webkit-transform: translateY(0);\

transform: translateY(B_DYNAMIC_VALUE);\

}\

}\

@keyframes scrollUp {\

0% {\

-webkit-transform: translateY(0);\

transform: translateY(0);\

}\

100% {\

-webkit-transform: translateY(0);\

transform: translateY(B_DYNAMIC_VALUE);\

}\

}';

keyFrames = keyFrames.replace(/A_DYNAMIC_VALUE/g, '-'+(height-(offsetHeight-height)/2)+'px');

keyFrames = keyFrames.replace(/B_DYNAMIC_VALUE/g, '-'+height+'px');

style.innerHTML = keyFrames;

document.getElementsByTagName('head')[0].appendChild(style);

}

// 初始化图片滚动动画高度

function initAnimate() {

const adLeftHeight = document.getElementById("adLeft").offsetHeight; // 左侧区域高度

const adLeftWidth = document.getElementById("adLeft").offsetWidth; // 左侧区域宽度

let leftImage = new Image();

let leftImageWidth = "";

let leftImageHeight = "";

leftImage.src = window.campaign.image_url;

leftImage.onload = function () {

leftImageWidth = leftImage.width;

leftImageHeight = leftImage.height;

let imageRealHeight = adLeftWidth * (leftImageHeight / leftImageWidth);

// const imageBoxScrollHeight = document.getElementById("imageBox").scrollHeight; // 三张图片的总高度

// const imageHeight = imageBoxScrollHeight/3;// 单张图片高度

addKeyFrames(imageRealHeight,adLeftHeight);

}

}以上js对应的html:

代码语言：javascript复制

以上html对应的css:

代码语言：javascript复制.ad_left{

width:44vw;

height: 100vh;

overflow: hidden;

.image-box{

width:100%;

height: auto;

.image-item {

width: 100%;

height: auto;

display: block;

animation: 5s scrollUpAndPause linear infinite normal;

}

}

}