位置: IT常识 - 正文

探究前端的跑马灯效果是如何用css实现的(前端处理map)

编辑:rootadmin
探究前端的跑马灯效果是如何用css实现的 📋 个人简介💖 作者简介:大家好,我是阿牛,全栈领域优质创作者😜📝 个人主页:馆主阿牛🔥🎉 支持我:点赞👍+收藏⭐️+留言📝📣 系列专栏:前端实用小demo🍁💬格言:迄今所有人生都大写着失败,但不妨碍我继续向前!🔥

推荐整理分享探究前端的跑马灯效果是如何用css实现的(前端处理map),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:有前端后端代码怎么跑起来,前端怎么跑项目,有前端后端代码怎么跑起来,前端跑马灯实现,前端跑马灯实现,探究前端的跑马技术,探究前端的跑马技巧,探究前端的跑马模型,内容如对您有帮助,希望把文章链接给更多的朋友!

目录📋 个人简介前言最终效果做法分析源码结语前言

无意见看到了一个网站的一个动画的跑马灯效果很不错,这篇博客将用css实现跑马灯效果,剖析它是如何实现的!并且我也推荐用css实现这种无缝滚动的跑马灯,效果看起来更平滑,用js定时器实现的会有明显的抖动效果!

最终效果

源码在文末获取!

目标网站效果:

我做出的效果:

当然你要是放一些好看的图片就看起来更好了,这里只是对标我项目需求,没有更换好看的图片!

做法分析探究前端的跑马灯效果是如何用css实现的(前端处理map)

这个效果用css实现很简单,无非就是一个css动画,鼠标移动到上面动画暂停。 这张图显示怎么做很清晰吧!让比较长的小盒子在红色盒子里滚动就行,然后超出这个红色视口盒子就隐藏!

也就是让css动画向左移动蓝色盒子的长度,然后让动画无限循环!

/* 动画 */@keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-3008px); }}

当然,这里我要重点说的是这个bug,这样做的最终并不是无缝衔接的!

如上图,当一次动画结束,循环进入下一次循环的时候,后面总会有空白,对于这个问题,我们怎样实现无缝衔接滚动呢? 很简单,就是加长滚动的这个绿色盒子,给他加后面几张图片,这几张图片和开始的几张图片相同,至于加几张图片就看你的红色大盒子的长度了,也就是说红色盒子决定你能看到几张图滚动,你就要加几张图作为这个视觉误差!(放到css中,这三张图片的外边距+图片长度=红色盒子的长度,动画滚动的长度依旧不变)

现在原理搞清楚了,以后写这种效果不是很简单,当然,放到我们的实际项目中,肯定是会有一点视觉误差的,因为我们的视口盒子(图中的红色盒子)总是在项目中有固定的长度,你还要做好图片的长度计算,要不要加外边距等等,还是要算一下像素的,最后差一点像素也没关系!但是不能差太多哦!不然后面空白太多了!

至于整个页面的布局,我依旧建议建议使用flex布局,只能说flex确实快捷方便好用,这个布局中还要涉及到定位,浮动+定位的方式也会出现一些莫名的定位问题!

css在这个项目中还有一些:hover

.scroll_box:hover ul{ /* 当鼠标放在图片上的时候能够暂停动画 */ animation-play-state:paused;}.scroll_box ul li:hover{ box-shadow: 0 -1px 10px 0 rgb(0 0 0 / 11%); /* 盒子阴影 */ cursor: pointer;}/* 展示作者信息 */.scroll_box ul li:hover .info{ display: flex;}

另外,我项目中用的是bootstrap,因此下面的代码中引入了bootstrap3的css(基本没起作用,大多样式我自己写的,你要不想引入,作者头像的border-radius:50%记得设置)

源码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>图片走马灯效果</title> <link href="../../static/css/bootstrap.min.css" rel="stylesheet"> <style> *{ padding: 0; margin: 0; } .scroll_box { /* 不想看到超出盒子范围的图片,因此需要overflow:hidden;进行隐藏 */ overflow: hidden; width: 1128px; height: 340px; margin:100px auto; } .scroll_box ul{ display: flex; margin-top: 10px; width: 4136px; height: 320px; animation: scroll 15s infinite linear; } .scroll_box ul li { position: relative; display: flex; justify-content: center; align-items: center; height: 320px; width: 360px; list-style: none; margin: 0 8px; border-radius: 15px; } .scroll_box ul li img{ width: 300px; } .scroll_box ul li .info{ display: none; align-items: center; position: absolute; height: 60px; width: 330px; left: 15px; bottom: 15px; background-color: rgb(62, 60, 60); border-radius: 15px; } .scroll_box ul li .info img{ width: 40px; margin: 0 25px; border: 1px solid #939292; } .scroll_box ul li .info p{ margin: 0; color: #fff; } .scroll_box:hover ul{ /* 当鼠标放在图片上的时候能够暂停动画 */ animation-play-state:paused; } .scroll_box ul li:hover{ box-shadow: 0 -1px 10px 0 rgb(0 0 0 / 11%); /* 盒子阴影 */ cursor: pointer; } /* 展示作者信息 */ .scroll_box ul li:hover .info{ display: flex; } /* 动画 */ @keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-3008px); } }</style></head><body><div class="container"> <div class="row"> <div class="scroll_box"> <ul> <li> <img src="../../static/images/wordcloud/2023-03-17/circle_1a0efbbc-c4b2-11ed-9fea-8cc84b9d23ab.png"> <div class="info"> <img src="413e5a3e-c4b2-11ed-8481-8cc84b9d23ab.png" class="img-circle" alt=""> <p>作者:<span>阿牛</span></p> </div> </li> <li> <img src="../../static/images/wordcloud/2023-03-17/heart_1a0efbbc-c4b2-11ed-9fea-8cc84b9d23ab.png"> <div class="info"> <img src="413e5a3e-c4b2-11ed-8481-8cc84b9d23ab.png" class="img-circle" alt=""> <p>作者:<span>阿牛</span></p> </div> </li> <li> <img src="../../static/images/wordcloud/2023-03-17/heart_76460c9f-c4dc-11ed-8ac2-8cc84b9d23ab.png"> <div class="info"> <img src="413e5a3e-c4b2-11ed-8481-8cc84b9d23ab.png" class="img-circle" alt=""> <p>作者:<span>阿牛</span></p> </div> </li> <li> <img src="../../static/images/wordcloud/2023-03-17/circle_76460c9f-c4dc-11ed-8ac2-8cc84b9d23ab.png"> <div class="info"> <img src="413e5a3e-c4b2-11ed-8481-8cc84b9d23ab.png" class="img-circle" alt=""> <p>作者:<span>阿牛</span></p> </div> </li> <li> <img src="../../static/images/wordcloud/2023-03-17/circle_1a0efbbc-c4b2-11ed-9fea-8cc84b9d23ab.png"> <div class="info"> <img src="413e5a3e-c4b2-11ed-8481-8cc84b9d23ab.png" class="img-circle" alt=""> <p>作者:<span>阿牛</span></p> </div> </li> <li> <img src="../../static/images/wordcloud/2023-03-17/heart_1a0efbbc-c4b2-11ed-9fea-8cc84b9d23ab.png"> <div class="info"> <img src="413e5a3e-c4b2-11ed-8481-8cc84b9d23ab.png" class="img-circle" alt=""> <p>作者:<span>阿牛</span></p> </div> </li> <li> <img src="../../static/images/wordcloud/2023-03-17/heart_76460c9f-c4dc-11ed-8ac2-8cc84b9d23ab.png"> <div class="info"> <img src="413e5a3e-c4b2-11ed-8481-8cc84b9d23ab.png" class="img-circle" alt=""> <p>作者:<span>阿牛</span></p> </div> </li> <li> <img src="../../static/images/wordcloud/2023-03-17/heart_76460c9f-c4dc-11ed-8ac2-8cc84b9d23ab.png"> <div class="info"> <img src="413e5a3e-c4b2-11ed-8481-8cc84b9d23ab.png" class="img-circle" alt=""> <p>作者:<span>阿牛</span></p> </div> </li> <!-- 用于衔接造成视觉误差的的3张图 --> <li> <img src="../../static/images/wordcloud/2023-03-17/circle_1a0efbbc-c4b2-11ed-9fea-8cc84b9d23ab.png"> <div class="info"> <img src="413e5a3e-c4b2-11ed-8481-8cc84b9d23ab.png" class="img-circle" alt=""> <p>作者:<span>阿牛</span></p> </div> </li> <li> <img src="../../static/images/wordcloud/2023-03-17/heart_1a0efbbc-c4b2-11ed-9fea-8cc84b9d23ab.png"> <div class="info"> <img src="413e5a3e-c4b2-11ed-8481-8cc84b9d23ab.png" class="img-circle" alt=""> <p>作者:<span>阿牛</span></p> </div> </li> <li> <img src="../../static/images/wordcloud/2023-03-17/heart_76460c9f-c4dc-11ed-8ac2-8cc84b9d23ab.png"> <div class="info"> <img src="413e5a3e-c4b2-11ed-8481-8cc84b9d23ab.png" class="img-circle" alt=""> <p>作者:<span>阿牛</span></p> </div> </li> </ul> </div> </div> </div></body></html>结语

如果你觉得博主写的还不错的话,可以订阅下面的这个flask专栏,这是博主唯一的付费专栏,我做的这个效果也是最近项目的一部分,这个项目也是用flask做的,我会将他全部总结开源到这个flask专栏中。

【flask从入门到实战】专栏9.9火热订阅中,已包含两个项目,全站独一无二的脚手架搭建,直接复制简单无脑操作,项目结构类似Django,感兴趣的可以看看哦!

🏰系列专栏 👉flask框架快速入门

其他专栏请前往博主主页查看!

本文链接地址:https://www.jiuchutong.com/zhishi/300508.html 转载请保留说明!

上一篇:2022年终总结:少年不惧岁月长,彼方尚有荣光在。(2022年终总结)

下一篇:HTML小游戏11 —— 横版恐龙大冒险游戏(附完整源码)(html在线小游戏)

  • 苹果se2有面容识别功能吗(se2有没有面容)

    苹果se2有面容识别功能吗(se2有没有面容)

  • 苹果xr多少寸(苹果xr多少寸屏幕是多少厘米)

    苹果xr多少寸(苹果xr多少寸屏幕是多少厘米)

  • wps怎么在空白页加横线(wps怎么在空白页打字)

    wps怎么在空白页加横线(wps怎么在空白页打字)

  • 苹果简短验证一直空白(苹果简短验证一直失败)

    苹果简短验证一直空白(苹果简短验证一直失败)

  • 微信视频聊天对方看不到我,是什么原因(微信视频聊天对方接收不到怎么回事)

    微信视频聊天对方看不到我,是什么原因(微信视频聊天对方接收不到怎么回事)

  • qq视频通话人数上限

    qq视频通话人数上限

  • 苹果11首次充电怎么冲(苹果11首次充电多长时间合适)

    苹果11首次充电怎么冲(苹果11首次充电多长时间合适)

  • 华为p40pro卡槽2在哪(华为p40pro卡槽2在哪里怎么打开)

    华为p40pro卡槽2在哪(华为p40pro卡槽2在哪里怎么打开)

  • iphone接入电脑不停提示信任(iphone接入电脑没反应)

    iphone接入电脑不停提示信任(iphone接入电脑没反应)

  • 闲鱼号怎么注销(闲鱼号怎么注销后还能在开通吗)

    闲鱼号怎么注销(闲鱼号怎么注销后还能在开通吗)

  • 如何申请京东plus退费(如何申请京东plus试用)

    如何申请京东plus退费(如何申请京东plus试用)

  • 删除应用和设置保留个人文件是什么意思(删除应用和设置但保留个人文件是删除c盘的吗)

    删除应用和设置保留个人文件是什么意思(删除应用和设置但保留个人文件是删除c盘的吗)

  • 表格怎么批量填充同样的文字(表格怎么批量填充)

    表格怎么批量填充同样的文字(表格怎么批量填充)

  • 苹果通话记录自动没了(苹果通话记录自动清除怎么关闭)

    苹果通话记录自动没了(苹果通话记录自动清除怎么关闭)

  • office2010找不到安装源(office2010找不到卸载程序)

    office2010找不到安装源(office2010找不到卸载程序)

  • 下标怎么打快捷键(快捷键打下标)

    下标怎么打快捷键(快捷键打下标)

  • 服务器用什么防火墙(服务器用什么防护软件)

    服务器用什么防火墙(服务器用什么防护软件)

  • 小米京东自营旗舰店和官网有啥区别(小米京东自营旗舰店手机是正品吗)

    小米京东自营旗舰店和官网有啥区别(小米京东自营旗舰店手机是正品吗)

  • 户户通遥控器怎么调试(户户通遥控器怎么拆)

    户户通遥控器怎么调试(户户通遥控器怎么拆)

  • 把老手机复制到新手机(从老手机上复制到新手机上怎么复制)

    把老手机复制到新手机(从老手机上复制到新手机上怎么复制)

  • vivo手机怎么给mp3传歌(vivo手机怎么给mp4下载小说)

    vivo手机怎么给mp3传歌(vivo手机怎么给mp4下载小说)

  • 云闪付支持微信收款吗(云闪付支持微信收款码)

    云闪付支持微信收款吗(云闪付支持微信收款码)

  • iphone11支持动态壁纸吗(苹果11有动态照片吗)

    iphone11支持动态壁纸吗(苹果11有动态照片吗)

  • 无线装置已关闭是什么意思(无线装置已关闭,需关闭飞行模式才能拨打电话)

    无线装置已关闭是什么意思(无线装置已关闭,需关闭飞行模式才能拨打电话)

  • 机票行程单上没有日期怎么回事
  • 工会经费入账
  • 残保金每次缴纳都是一样的吗
  • 退伍士兵增值税减免账务处理
  • 增值税发票选择确认平台勾选注意事项
  • 企业所得税清算报备表清算结束日
  • 绿化支出如何做会计处理?
  • 刷单成本计入什么费用?
  • 仓储货架工厂仓库货架
  • 收到的出口退税款一直有余额吗
  • 不同税额怎么抵扣
  • 案例分析建筑业发展趋势
  • 去新建的外贸公司好不好
  • 土地增值税成本扣除项目
  • 未按规定期限办理身份证
  • 工资薪金支出税收额是什么意思
  • 公司注销过程中如果有纠纷怎么办
  • 开具红字专用发票要求
  • 应交增值税未认证怎么办
  • 跨境电商的账务怎么做
  • mac压盘
  • 企业所得税费用扣除比例
  • 如何修改选区边缘
  • PHP:mb_output_handler()的用法_mbstring函数
  • 职工薪酬可能计入什么科目
  • 错账是什么
  • 企业类型变更是什么意思
  • 会计不忙
  • 浏览器无痕浏览后警察能查到吗
  • mysql_install_db命令 初始化MySQL数据目录
  • 异地项目需要预缴增值税吗
  • 工业企业成本核算会计分录
  • 营业外支出科目代码
  • 转出未交增值税借方余额表示什么
  • 增值税认证清单路径
  • 销售返利账务处理及注意事项
  • 帝国cms配置数据库
  • About BitRock
  • 办公室租金会有公摊吗
  • 简述sql server 2008的新增功能
  • PostgreSQL中的OID和XID 说明
  • 应付劳务费怎么做账
  • 物业管理费专票税率是多少
  • 企业所得税汇算表
  • 城建税和教育附加税怎么算
  • 疫情捐款可以抵扣增值税吗
  • 其他债权投资期末公允价值的变动应当计入
  • 股权转让溢价部分会计分录
  • 将本月发生的制造费用在甲、乙产品之间
  • 企业计提任意盈余公积的比例
  • 库存商品进项税额转出分录怎么写
  • 应收票据背书转让分录
  • 非流动资产基金借贷方表示
  • 其它应付款为负
  • 哪些资产减值损失一经计提不得转回
  • 公司卖土地怎么避税
  • xp系统中文语言包
  • 安装win7系统后鼠标键盘不能用
  • CentOS 5.4 rsync+inotify配置触发式(实时)文件远程同步
  • win8录音文件保存在哪
  • win10系统打开网页一会儿就没了
  • ubuntu怎么打开系统设置
  • ubuntu如何安装wps
  • mcshield.exe是什么进程
  • win7数据保护
  • edge以ie
  • 使用iso镜像文件
  • tplinkwr740n设置
  • jQuery插件ajaxFileUpload使用详解
  • 如何解决焦虑的心理
  • 安卓开发解析xml
  • Linux进程通信(IPC)方式简介
  • 在javascript中逻辑运算符包括
  • javascript常见问题
  • 安卓手机电驴
  • 一般纳税人开具的增值税普通发票和专用发票的区别
  • 亚马逊墨西哥站扣款20
  • 浙江省个体工商户税收政策
  • 直辖市税务局
  • 企业注册的步骤
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设