css设置背景图片随滚动缓慢滚动_CSS3 无限滚动的背景图

最新推荐文章于 2021-08-03 20:52:55 发布
最新推荐文章于 2021-08-03 20:52:55 发布
阅读量1.1k 收藏 1
点赞数 1
文章标签： css设置背景图片随滚动缓慢滚动
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39844267/article/details/111533978
版权
本文展示了如何使用CSS3动画实现背景图片随着页面滚动而平滑滚动的效果。通过定义关键帧动画和应用`transform: translateY()`，创建了两种不同的滚动样式：一种应用于整个页面背景，另一种应用于特定元素。这种方法可以为网站增添动态视觉效果。
摘要由CSDN通过智能技术生成

CSS

语言：

CSSSCSS

确定

*,

*:before,

*:after {

box-sizing: border-box;

}

@-webkit-keyframes scrollBad {

0% {

background-position: 0 0;

}

100% {

background-position: 0 -320px;

}

}

@-moz-keyframes scrollBad {

0% {

background-position: 0 0;

}

100% {

background-position: 0 -320px;

}

}

@keyframes scrollBad {

0% {

background-position: 0 0;

}

100% {

background-position: 0 -320px;

}

}

@-webkit-keyframes scrollGood {

0% {

transform: translateY(0);

}

100% {

transform: translateY(-320px);

}

}

@-moz-keyframes scrollGood {

0% {

transform: translateY(0);

}

100% {

transform: translateY(-320px);

}

}

@keyframes scrollGood {

0% {

transform: translateY(0);

}

100% {

transform: translateY(-320px);

}

}

.pen {

background-color: blue;

position: absolute;

top: 0px;

left: 0px;

height: 100%;

width: 100%;

}

.panel {

padding: 3rem;

height: 50%;

}

.top {

background-color: #3e69c3;

background-image: url(http://scarbroughstudios.com/img/codepen.svg);

background-position: center center;

background-size: 500px;

-webkit-animation: scrollBad 5s linear infinite;

-moz-animation: scrollBad 5s linear infinite;

animation: scrollBad 5s linear infinite;

}

.bottom {

background-color: #31cc70;

overflow: hidden;

position: relative;

}

.bottom .scroll {

background-image: url(http://scarbroughstudios.com/img/codepen.svg);

background-position: center center;

background-size: 500px;

position: absolute;

top: 0px;

left: 0px;

height: 400%;

width: 100%;

z-index: 1;

-webkit-animation: scrollGood 5s linear infinite;

-moz-animation: scrollGood 5s linear infinite;

animation: scrollGood 5s linear infinite;

}

h1 {

color: white;

font-weight: 400;

font-family: sans-serif;

margin: 0;

position: relative;

z-index: 2;

}

weixin_39844267
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS3动画实现背景滚动
csdn_zsdf的博客
04-26 8101
在上一个模仿微信打飞机的游戏中，在敌机掉落下来时，如果背景图片也可以一直无穷滚动的话，那么效果就会更好。 现在就是要利用CSS3来实现一张图片的无穷滚动。首先了解一下CSS3的动画属性： ①.animation-name: 用于将动画（@keyframes 语法）附加到元素上； ②. animation-duration: 定义动画完成一次迭代（从0%到100
强大的CSS：scroll-snap滚动事件停止及元素位置检测
web前端开发学习教程
05-21 561
一、Scroll Snap是前端必备技能 CSS Scroll Snap是个非常好用的特性，可以让网页容器滚动停止的时候，无需任何JS代码的参与，浏览器可以自动平滑定位到指定元素的指定位置。类似幻灯片广告效果就可以纯CSS实现。 而且CSS Scroll Snap的兼容性非常好，移动端几乎可以放心使用。 二、源自实际项目的scroll-snap场景 今天下午在实现一个功能需求的时候，正好遇到一个...
html背景自动切换带滚动,CSS3实现背景的无限滚动
weixin_36155610的博客
05-30 334
实现原理很简单~CSS3 的animation效果，配合160s循环改变background的position属性来实现~CSS3实现代码如下~#css3animationforbg{background:url(http://yesdesigning.com/img/srbg3.jpg)repeat-xcenter0;height:400px;width:500px;clear:b...
css3背景图片无间断滚动
记录踩过的坑只为了更好地填坑
01-05 3815
类名{ background: url(../images/bg.png) 0 bottom repeat-x;     -webkit-animation: animate-cloud 20s linearinfinite;     -moz-animation: animate-cloud 20s linear infinite;     -ms-animation: animate-
html中实现图片的无限滚动,CSS3 背景图片无限滚动之波浪效果的实现
weixin_30970867的博客
06-04 782
效果HTMLbody{background:#2f2e34;}.a,.b,.c{width:100%;height:240px;position:absolute;bottom:0;}.a{background:url(top1.png)0bottomrepeat-x;background-size:100%140px;-webkit-animation:anim...
滚动屏幕，背景图不变，顿时让你的网页高大上
10-30
当`background-attachment`设置为`fixed`时，背景图片就会固定在视口上，即使用户滚动页面，图片的位置也不会改变，从而实现了“滚动屏幕，背景图不变”的效果。 ```css body { background-image: url('your-...
CSS3冬季仙境场景背景景观特效.rar
最新发布
10-01
【标题】"CSS3冬季仙境场景背景景观特效.rar"是一个基于CSS3技术的网页特效资源，主要用于创建一种冬日仙境般的视觉效果。这种特效能够为网站添加动态且引人入胜的背景，提升用户体验，特别是在设计节日主题或者冬季...
js图片滚动效果时间可随意设定当鼠标移上去时停止
10-25
在探讨前端开发技术时，图片滚动效果是一个常见的需求，通常用于实现网页中图片的轮播展示。本知识点将详细介绍如何使用JavaScript（js）来实现一个图片滚动效果，该效果的特点是滚动的时间间隔可以自由设定，并且当...
parallax-background.js:更改页面滚动上CSS背景位置以模拟视差移动效果
05-10
4. **CSS属性操作**：通过JavaScript修改CSS的`background-position`属性，实现背景图的移动。例如，`element.style.backgroundPosition = 'xpx ypx'`可以设置背景图像的位置。 5. **性能优化**：频繁的滚动事件...
jquery实现的四列图片依次垂直往下缓慢滚动的图片展示效果demo
06-26
在本示例中，我们探讨的是使用jQuery库来创建一种独特的图片展示效果，具体表现为四列图片依次垂直向下缓慢滚动。这种效果可以增加网站的视觉吸引力，尤其适用于产品展示、摄影集或者画廊等场景。以下我们将详细讲解...
css3背景图片页面滚动视差效果
11-24
css3背景图片页面滚动视差效果
css背景图片的滚动属性_背景图片（CSS属性）
culi4814的博客
08-12 2904
css背景图片的滚动属性 描述 (Description) This property sets the background image of an element via the specified URI. The image is placed on top of the background-color, and if the image is opaque, the backgroun...
CSS实现图片无限循环无缝滚动
热门推荐
k464746的博客
10-26 1万+
实现代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * {
CSS背景设置定位滚动
boy火巨的博客
03-11 683
适用于body背景图，页面滚动时随页面滚动。相当于设置了定位 background:#205424url(//images.cnblogs.com/cnblogs_com/zyf0163/731133/o_4.jpg) no-repeat top center fixed; background-size:100% 100%; ...
css一张图无限循环滚动,纯css实现单张图片无限循环无缝滚动，
weixin_39673742的博客
08-03 1015
functionaddKeyFrames(height,offsetHeight){let style= document.createElement('style');style.type= 'text/css';let keyFrames= '\@-webkit-keyframes scrollUpAndPause {\0% {\-webkit-transform: translateY(0)...
整理css（一）：背景图可滚动样式等
farmerXU的博客
09-15 942
一：背景可滚动样式 html <div class="intro-box" style="background-image: url(图片地址);"> <h2>标题</h2> <p>内容</p> <a href="" class="btn-info">VIEW ALL</a> </div> css .intro-box{background-size: cover;background-att.
css设置背景图片随滚动缓慢滚动_（CSS）使背景图像滚动比一切更慢
weixin_39961943的博客
12-19 252
here is is my CSS code for the body:body {padding: 0px;margin: 0px;background-image: url("../images/background.jpg");background-repeat: no-repeat;background-color: grey;background-size: 100%;}What I w...
纯CSS代码 CSS里面背景图动画 一张背景图无缝衔接，循环走动 一张背景图
mab_1994的博客
12-03 1837
用跳帧做动画的时候，让背景图无缝衔接的循环走动 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>背景走</title> <style> *{ margin: 0px; padding: 0px; } html,bod
CSS3滚动视差效果的制作技巧
natalie86的专栏
03-03 1252
“视差(parallax)”效果现在在互联网上越来越流行了。如果你还没听说过什么是视差效果，它其实就是利用图片形成不同的层，分别以不同的速度，不同的方向移动产生的效果。这会产生出很奇妙的视觉效果，能有力的吸引住浏览者的目光。 观看演示 在web设计中，最常见的实现视差效果的方式是使用jQuery插件。但这种方法有一些弊端。这些插件大多都是在window对象的scroll事件上放
css设置背景图案和内容一起滚动
05-30
要实现背景图案和内容一起滚动，可以将背景图案设置为页面的背景，并将内容放置在一个容器内。然后使用CSS的background-attachment属性将背景图案固定在容器内，同时使用overflow属性设置容器内的内容可以滚动。例如： ```css body { background-image: url(bg-pattern.png); background-repeat: repeat; } .container { background-color: #fff; background-attachment: fixed; overflow-y: scroll; height: 500px; /* 设置容器高度 */ } ``` 在上面的示例中，背景图案被设置为页面的背景，并且重复显示。内容被放置在一个名为.container的容器内。使用background-attachment: fixed属性将背景图案固定在容器内，同时使用overflow-y: scroll属性设置容器内的内容可以垂直滚动。注意，要设置容器的高度，否则无法滚动。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值