成都创新互联网站制作重庆分公司

flex布局如何实现无缝滚动

这篇文章将为大家详细讲解有关flex布局如何实现无缝滚动,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

公司主营业务:网站设计制作、成都网站设计、移动网站开发等业务。帮助企业客户真正实现互联网宣传,提高企业的竞争能力。成都创新互联是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化,感谢他们对我们的高要求,感谢他们从不同领域给我们带来的挑战,让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。成都创新互联推出新化免费做网站回馈大家。

案例的演示

flex布局如何实现无缝滚动

flex布局

所谓flex布局就是弹性盒布局,这种布局在移动端比较常用,但随着浏览器的版本更新,flex布局因为自身的优点,日渐常用。

思路:

  • 首先分析这个小demo的结构,上下结构,我们可以用一个容器,将其包裹(就是所谓的大盒子)。

  • 上方是个导航,上边是个ul,下面我们就可以用两个div,宽度的100%,高度自定义。

  • 接下来我们就来开启和模型,记住一定的父盒子哦!display:flex;,那么怎么上下分呢?在继续添加 flex-wrap: wrap;就是上下分离了,是不是很方便。

  • 接下来就是下边部分了,div里嵌套了ul,而且ul的高度好理解,是div的高度,那么ul多少宽呢?,可以无限宽!!! 我们让ul的宽度是3000px

  • 我们接下来放li,你一看,li里面的也是上下结构,所以呢,嘿嘿!li是不是也要开启flex呀 flex-wrap: wrap;。上方div是放img,下边一个a标签。

  • 记住哦,li用浮动起来哦!并考虑overflow:hidden放在那里

动画效果

  • 我们有五张图片,我们现在让它从右向左移动。那么我们叫ul移动,带动li移动是不是可以。

  • 我们用@keyframes改变ul的left的值,但是问题来了,我放五张图片,ul移动,右边就没了,空白了。肿么办???

  • 我们是不是可以将五个li,在后面再复制一份,放在后边呀。 答案是可以的!!当我们的left正好将第一组li,移除,那么第二组就刚好不上来。那么我们用 animation: run 20s linear infinite;无限循环是不是就好了。

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;
}

h6 {
    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布局如何实现无缝滚动
转载源于:http://cxhlcq.com/article/jgoiog.html

其他资讯

在线咨询

微信咨询

电话咨询

028-86922220(工作日)

18980820575(7×24)

提交需求

返回顶部