本文主要介绍了flex布局实现无缝滚动的示例代码,分享给大家,具体如下:
案例的演示
flex布局
所谓flex布局就是弹性盒布局,这种布局在移动端比较常用,但随着浏览器的版本更新,flex布局因为自身的优点,日渐常用。
思路:
动画效果
css部分代码
* { margin: 0; padding: 0; } a { text-decoration: none; } .box-big { position: absolute; display: flex; left: 50%; top: 50%; border: 1px solid #9FD6FF; transform: translate(-50%, -50%); width: 707px; height: 170px; /* background-color: pink; */ flex-wrap: wrap; overflow: hidden; } .box-top { width: 707px; height: 30px; border-bottom: 1px solid #9FD6FF; background-color: #FEFEFE; } .div-bottom { width: 707px; height: 136px; /* background-color: darkgoldenrod; */ overflow: hidden; } .st-icon-android { display: inline-block; width: 15px; height: 15px; background-image: url(../img/hd.gif); margin: 8px; } h5 { position: absolute; top: 6PX; left: 30px; color: #307DD1; } ul { position: absolute; left: 90px; width: 3000px; height: 100%; animation: run 20s linear infinite; } li { list-style: none; float: left; width: 140px; height: 100%; margin: 0 5px 0 5px; /* background-color: gold; */ flex-wrap: wrap; } .photo { margin-top: 5px; width: 140px; height: 105px; text-align: center; /* background-color: springgreen; */ } p { text-align: center; } img { cursor: pointer; } @keyframes run { 0% { left: 0; } 100% { left: -745px; } }
到此这篇关于flex布局实现无缝滚动的示例代码的文章就介绍到这了,更多相关flex无缝滚动内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!
限制 input 输入框只能输入纯数字 1、onkeyup = value=value.replace(/[^\d]/g,'...
本文学习的内容主要如下所示: 1.关闭按钮 2.Carets 3.快速设置浮动 4.内容区域...
原始代码: center.html : !DOCTYPE htmlhtml lang=Zhhead meta charset=UTF-8 ...
Dreamweaver中想要给文字中的个别文字添加背景色,该怎么添加呢?下面我们就来看...
1.情人最后难免沦为朋友,可是,我们连朋友都做不成。 2.等待不是为了你能回来...
一 前言 本篇文章主要从 react-hooks 起源,原理,源码角度,开始剖析 react-hoo...
(这个Xmind感兴趣的话可以加文末公众号发送「快速阅读」即可获取) 如何快速阅读...
网站登录需要密码,使用Dreamweaver创建表单的时候,该怎么设置6位数的密码呢?...
思路: 一个外层盒子设置背景;一个内层盒子设置宽高背景,并设置animate让盒子...
再次感谢大家对 Flutter Engage China 活动 的关注和积极参与!我们在活动前后收...