当前位置：移动技术网 > IT编程>网页制作>CSS > 纯css实现单张图片无限循环无缝滚动

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

2020年03月12日 | 移动技术网IT编程 | 我要评论

我做不到,小番茄种植,异杀物语

参考链接：

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

需求是一共有两个，
1、单张竖图持续向上无缝滚动，

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

一、用js setinterval定时器实现

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

二、用css3 animation动画实现

需求1动画：

 @-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动画：

@-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

<div class="box">
    <div class="image-item">
    </div>
    <div class="image-item">
    </div>
    <div class="image-item">
    </div>
</div>

style:

 .box {
            width: 500px;
            height: 500px;
            overflow: hidden;
        }

应用动画：

.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：

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:

<div class="ad_left" id="adleft">
        <div class="image-box" id="imagebox">
            <img class="image-item" src="xxx.jpg" alt="">
            <img class="image-item" src="xxx.jpg" alt="">
            <img class="image-item" src="xxx.jpg" alt="">
        </div>
</div>

以上html对应的css:

.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;
          }
        }
      }

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！点击进行留言回复

CSS3实现缺角矩形，折角矩形以及缺角边框

这篇文章主要介绍了CSS3实现缺角矩形，折角矩形以及缺角边框，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小... [阅读全文]
详解CSS3新增的背景属性

CSS3新增属性：background-clip ，background-origin ， background-size，本文给大家分享CSS3新增的背景属性... [阅读全文]
css3 flex布局 justify-content:space-between 最后一行左对齐

这篇文章主要介绍了css3 flex布局 justify-content:space-between 最后一行左对齐,文中通过示例代码介绍的非常详细，对大家的学... [阅读全文]
详解如何使用CSS3中的结构伪类选择器和伪元素选择器

这篇文章主要介绍了详解如何使用CSS3中的结构伪类选择器和伪元素选择器，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们... [阅读全文]
CSS3 旋转立方体问题详解

这篇文章主要介绍了CSS3 旋转立方体问题详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学... [阅读全文]
Grid 宫格常用布局的实现

这篇文章主要介绍了Grid 宫格常用布局的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学... [阅读全文]
css3一个简易的 LED 数字时钟实现方法

这篇文章主要介绍了css3一个简易的 LED 数字时钟实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着... [阅读全文]
2分钟教你实现环形/扇形菜单(基础版)

这篇文章主要介绍了2分钟教你实现环形/扇形菜单(基础版)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来... [阅读全文]
CSS3实现网站商品展示效果图

这篇文章主要介绍了CSS3实现网站商品展示效果图，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习... [阅读全文]
如何用border-image实现文字气泡边框的示例代码

这篇文章主要介绍了如何用border-image实现文字气泡边框的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋... [阅读全文]

网友评论


验证码：

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

2020年03月12日 | 移动技术网IT编程 | 我要评论

您可能感兴趣的文章:

相关文章:

网友评论