今天用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
取消回复欢迎 你 发表评论:
- 最新文章
- 热文排行
- 最多评论
- 1主题的暗黑模式是什么?怎么设置和使用暗黑模式?01-19
- 2zblog判断插件是否安装或者启用的代码介绍01-16
- 3translate3d和z-index冲突导致z-inde值无效的解决办法01-10
- 4zblogphp提示“ Call to undefined function openssl_pkey_get_public()”的原因和解决办法12-25
- 5zblogphp1.6版本报错“非法访问”的原因和解决办法12-23
- 6wordpress导航栏自定义添加class和rel="nofollow"的步骤12-13
- 7swiper做导航栏时自动跳转至对应分类的代码12-07
- 8zblogphp自带js框架评论接口大全12-04
- 9wordpress提示"Error establishing a database connection"的解决办法11-10
- 标签聚合
- ×1回家×1cms×1沃派36元套餐×1立体主题×1乡镇V网×1A60刷机×1网站地图×1骗局×1话费账单×1电信WiFi×22017×2圣诞节×4宝塔×1修改模板×1方言×1爸爸×1改模板×1团购×2emlog下载×1WLAN
最新评论
-
吸料机
已经解决 -
xinling2020.com
我今天在路上还在想我的个人博客要是写到1W文章数量会不会崩,看到这几十万我就放心了。这辈子也不可能有这样的数据~!哈哈 -
访客
不知道百度**收录怎么样 -
天兴工作室
这玩意你看下php手册啊https://www.php.net/manual/zh/function.date.php,m就是星期几 -
风羽
PHP版没有直接的星期几哦,找了好久没有,只能用JS转换~