仿造小红书页面代码html,jQuery仿小红书登录页，背景图垂直循环滚动登录页，向上循环滚动的动画，实现一张背景图片的无缝向上循环js滚动...

jQuery仿小红书登录页，背景图垂直循环滚动登录页，向上循环滚动的动画，实现一张背景图片的无缝向上循环js滚动

先看效果图：

图片是gif看着有点卡顿，网页里面其实很流畅的

此代码使用CSS3动画实现，很方便超好用，纯CSS实现一张背景图片的无缝自动向上滚动：

html

此文本是与图片分离的

css

@-webkit-keyframes scrollToUp {

0% {

background-position: 0 0;

}

100% {

background-position: 0 -258px; // 向上滚动则就是图片的高度的负值，否则为图片的宽度，也可以百分比

}

}

@keyframes scrollToUp {

0% {

background-position: 0 0;

}

100% {

background-position: 0 -258px;

}

}

#imgBgc{

height: 1000px;

background-image: url("./../assets/bac.svg"); /* 什么图片都可以*/

background-attachment: fixed; /* 让背景图片和文本脱离*/

background-position: center center;

-webkit-animation: scrollToUp 5s linear infinite; /* 引入 scrollToUp动画 linear 表示匀速执行动画可避免卡顿*/

animation: scrollToUp 5s linear infinite;

}

然后就可以了，惊喜不惊喜！