fle✤x合理布局完成无缝拼接翻转的实例编码

2021-01-20 23:24 jianzhan

文中关键详细介绍了flex合理布局完成无缝拼接翻转的实例编码,共享给大伙儿,实际以下:

实例的演试

flex合理布局

说白了flex合理布局便是延展性盒合理布局,这类合理布局在手机端较为常见,但伴随着访问器的版本号升级,flex合理布局由于本身的优势,日趋常见。

构思:

  • 最先剖析这一小demo的构造,左右构造,大家能够用一个器皿,将其包囊(便是说白了的大小盒子)。
  • 上边是个导航栏,上面是个ul,下边大家便可以用2个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;
}

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无缝拼接翻转內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容,期待大伙儿之后多多的适用脚本制作之家!