今天用css写了个图片连续横向滚动,完成效果如下:
总共用了两张图,一张背景图,一张滚动图,html结构如下:
<div class="img-box"> <img src="背景图地址"> <div class="roll-img1"><img src="滚动图片地址"></div> <div class="roll-img2"><img src="滚动图片地址"></div> </div>
然后是css
/* 动画1 */ @keyframes rollimg1 { 0% { left: 0; } 100% { left: -100%; } } /* 动画1 */ @keyframes rollimg2 { 0% { left: 100%; } 100% { left: 0; } } /* 最外层 */ .img-box{ position: relative; overflow: hidden; } /* 背景图 */ .img-box>img{ display: block; position: relative; line-height: 1; width: 100%; height: auto; z-index: 1; } /* 最开始滚动的图片 */ .roll-img1{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; overflow: hidden; animation: rollimg1 12s infinite linear; display: flex; align-items: center; } /* 接着滚动的图片 */ .roll-img2{ position: absolute; top: 0; left: 100%; width: 100%; height: 100%; z-index: 2; overflow: hidden; animation: rollimg2 12s infinite linear; display: flex; align-items: center; }
以上就是用css的“@keyframes”动画效果来实现图片横向滚动的全部代码了,调节滚动速度修改“animation”里面的“12s”中的数字即可。
相关推荐
- 记录瀑布流+下拉无限加载+lightbox页面踩的坑05-20
- swiper做导航栏时自动跳转至对应分类的代码12-07
- css实现的图片连续横向滚动效果07-31
- html图片和css背景图片哪个先开始加载?css占位图怎么操作?04-10
- css写三角形的原理和使用方法11-30
- 一个输入框调用多个搜索引擎的js代码08-17
- 一个纯html+css的下拉导航动画效果01-24
- JQ特效之:页面向上滚动时弹出模块06-09
- 比较简单易懂的跟随滚动侧栏模块 JQ+html+css03-25
- 一个页面可多处重复使用的简单tab标签jQuery代码01-11
欢迎 你 发表评论: 取消回复
- 最新文章
- 热文排行
- 最多评论
- 1天兴工作室官网购物活动:全场8折优惠券 不限次数不限金额04-17
- 2天兴工作室zblog纯博客主题 vue3+小程序双版本03-19
- 3vue3项目引入vant报错的错误原因和解决办法03-12
- 4天兴工作室zblog百科主题 可搭配会员插件实现知识付费盈利03-06
- 5zblog怎么截取指定字数的摘要?zblog摘要自定义截取方法介绍02-29
- 6天兴工作室2023双11活动:五折优惠券大放送11-05
- 7腾讯云2023双11活动:2H2G3M轻量服务器88一年限新用户11-05
- 8新老同享 阿里云2023双11活动:2核2G3M带宽云服务器99元/年!10-31
- 9天兴工作室zblog免登录付费阅读插件 支持支付宝微信支付虎皮椒支付10-09
- 标签聚合
- ×1标题×1图片加alt×1zblog注册功能×1zblog淘宝插件×1zblog主题修改×1导航栏设置×1辣鸡百度×1emlog首页模板文件×1主机特价×1zblog修改主题无效×1wordpress安装×1emlog分类×1zblog娱乐模板×1阿里云2020采购×1云服务器×1双11抢红包插件×1win8平板×1Search Plus2×1视频播放×1qq企业邮箱
最新评论
-
天兴工作室
可以看下更新记录,上个月29日才更新的 -
访客
现在这个主题还更新吗 -
天兴工作室
打开编辑文字,选中代码语言,然后不管是回车断行还是复制粘贴,都不会被分为一行一框啊,所以没理解你是咋办到的 -
访客
zblog文章中发多行代码,被分成一行一个框,一行一个框,如何调整成和你的一样的一段代码在一个框中 -
天兴工作室
这个功能本来就有