今天用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”中的数字即可。
相关推荐
- 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
取消回复欢迎 你 发表评论:
- 最新文章
- 热文排行
- 最多评论
- 1zblog1.7版本“固定网站域名”按钮不见了怎么办?zblog固定网站域名功能设置步骤04-19
- 2zblog升级1.7报错“Invalid argument supplied for foreach”或者“unserialize(): Error at offset”的解决办法04-11
- 3wordpress面包屑导航怎么写?wordpress面包屑导航代码04-07
- 4wordpress页面调用指定模板的方法03-30
- 5天兴工作室wordpress娱乐资源主题 搭积木首页+多种列表样式03-21
- 6wordpress分类调用标签函数大全03-13
- 7wordpress调用今日发布文章数量和总文章数量的方法03-12
- 8天兴工作室zblog在线表单插件03-10
- 9天兴工作室:zblog在线表单插件使用视频教程03-10
- 标签聚合
- ×1圣诞元旦×1促销活动×2css×1稀烂×3阿里云双11×1流量王×2多说×5仿站×1如意短信包×1掌上营业厅×1全球通专属号码×1寒假校园营销×1新生关怀卡×1乐享3G×1中国空气能网×1幻灯片×27元智慧包×2广告位×1zblog1.3×115元版
最新评论
-
离心泵
谢谢老师的教导 -
鹏仔先生
求一个付费的 zblogphp 评论插件,输入QQ 获取QQ头像 名称 这种,带评论点赞。 评论于:天兴工作室zblog在线表单插件
-
鹏仔先生
给力 -
青梅工作室
大佬不错哈! -
akrin
请问 网站证书过期,导致无法登录后台,如何去掉https资源的自动跳转 谢谢