当前位置:首页>默认>背景会流动的Banner区块

背景会流动的Banner区块

背景会流动的Banner区块

Html代码:

<div class="toptu">
    <div class="item scroll">
        <img class="scroll-image lazyloaded"
            src="https://img.ahap.cn/files/2022/01/20220201094537171.jpg"
            data-was-processed="true">
        <img class="scroll-image lazyloaded"
            src="https://img.ahap.cn/files/2022/01/20220201094537171.jpg"
            data-was-processed="true">
        <div class="sc-1wssj0-17 hVBrzU">
            <img src="https://img.ahap.cn/logo/logo.svg"
                class="lazyloaded" data-was-processed="true">
        </div>
    </div>
</div>

Css代码:

.item.scroll {
    left: 0px;
    width: 100%;
    height: 420px;
    background-size: auto 100%;
    pointer-events: none;
    background-position: center center;
    background-repeat: no-repeat;
    transition: opacity 0.3s ease 0s;
    white-space: nowrap;
    overflow: hidden;
    position: relative;
    font-size: 0;
    background: #000;
    word-wrap: break-word;
    box-sizing: border-box;
    outline: none;
}

.item.scroll .scroll-image {
    position: relative;
    height: 100%;
    transform: translateX(0px);
    animation: banner 40s linear infinite;
    opacity: 0.5;
    border: 0;
    -ms-interpolation-mode: bicubic;
    vertical-align: middle;
}

.item img {
    display: inline-block;
    height: auto;
    max-width: 100%;
    vertical-align: middle;
}

.hVBrzU {
    position: absolute;
    top: 70px;
    left: 0px;
    right: 0px;
    text-align: center;
    font-size: 16px;
    white-space: normal;
    width: 100%;
    margin: auto;
}

.item img {
    display: inline-block;
    height: auto;
    max-width: 100%;
    vertical-align: middle;
}

.sc-1wssj0-17 img {
    width: auto;
}

    @-webkit-keyframes banner {
        from {
            -webkit-transform: translateX(0);
            -ms-transform: translateX(0);
            transform: translateX(0);
        }

        to {
            -webkit-transform: translateX(-100%);
            -ms-transform: translateX(-100%);
            transform: translateX(-100%);
        }
    }

    @keyframes banner {
        from {
            -webkit-transform: translateX(0);
            -ms-transform: translateX(0);
            transform: translateX(0);
        }

        to {
            -webkit-transform: translateX(-100%);
            -ms-transform: translateX(-100%);
            transform: translateX(-100%);
        }
    }
一、本站上的部份代码及教程来源于互联网,仅供网友学习交流。如有侵权,无意侵害您的权益,请发送邮件至xutian#ahap.cn或点击右侧 联系我们,我们将尽快处理。
二、请勿将购买的资源教程转载或分享与他人!

给TA充电
共{{data.count}}人
人已充电
WordPress美化默认

修改7b2文章列表样式-网格模式

2022-6-17 20:26:11

默认

个人主页HTML源码

2022-7-27 13:13:49

4 条回复 A文章作者 M管理员
  1. ⁡498

    站长你有没有发现在你自己创建的帖子下回复别人的评论,别人是看不到的,小铃铛也没用通知,你给别人点赞,别人就能看得见通知,比如你回复我,我在右上角的小铃铛是没得推送的,也没有消息记录

    • ahap

      一开始不知道你在说啥,后来才发现这个问题,其实b2主题有这个回复评论提醒,但应该是出现bug了,现在只有自己回复自己才会有提醒,别人回复你是不提醒你的。

  2. ahap

    [好看]

  3. ahap

    [赞]

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索