广告代码

哈喽，大家好，今天源开站长请鹏仔喝杯奶茶，定制了此款网站图片广告代码分享给大家，广告代码可自由搭配，一行可设置为1个图、2个图、3个图。

在PC端，鼠标滑过我加了一个抖动效果，图片也加了圆角、还有广告标识。

使用教程

将css代码与HTML代码复制，粘贴到需要展示的位置即可。

推荐尺寸

广告图片高度建议统一、一致即可（如60px、70px最佳）；

一行多张的广告图的，建议长、宽尺寸保持一致效果最佳（一张图的1200*60、那么两张图的600*60、三张图的400*60）。

css代码

<style>    .tp-img-ads-layer {
        width: 100%;
        margin: 0 auto;
    }
    .tp-img-ads-layer a {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        padding: 2px;
        box-sizing: border-box;
    }
    .tp-img-ads-layer a img {
        display: block;
        width: 100%;
        min-height: 40px;
        max-height: 80px;
        border-radius: 6px;
        transition: transform 0.2s ease;
    }
    .tp-img-ads-layer a:hover img {
        animation: tpshake 0.4s infinite;
    }
    .tp-img-ads-layer a::after {
        content: '广告';
        display: block;
        color: rgba(255,255,255,.5);
        font: 600 12px/18px sans-serif;
        background: rgba(0,0,0,.3);
        border-top-left-radius: 6px;
        padding: 3px 6px;
        box-sizing: border-box;
        position: absolute;
        bottom: 2px;
        right: 2px;
    }
    .tp-one-img a,    .tp-two-img,    .tp-three-img {
        width: 100%;
    }
    .tp-two-img,    .tp-three-img {
        display: flex;
        justify-content: space-between;
    }
    .tp-two-img a { width: 49.7%; }
    .tp-three-img a { width: 33%; }
    @keyframes tpshake {
        0% { transform: translate(0, 0); }
        25% { transform: translate(-2px, 0); }
        50% { transform: translate(2px, 0); }
        75% { transform: translate(-2px, 0); }
        100% { transform: translate(2px, 0); }
    }</style>

html代码

<div class="tp-img-ads-layer">
        <!-- 一行一个长图 -->
        <div class="tp-one-img">
            <a href="#" target="_blank">
                <img src="https://www.fzhan.com/logo.png" alt="">
            </a>
        </div>
        <!-- 一行两个长图 -->
        <div class="tp-two-img">
            <a href="#" target="_blank">
                <img src="https://www.fzhan.com/logo.png" alt="">
            </a>
            <a href="#" target="_blank">
                <img src="https://www.fzhan.com/logo.png" alt="">
            </a>
        </div>
        <!-- 一行三个长图 -->
        <div class="tp-three-img">
            <a href="#" target="_blank">
                <img src="https://www.fzhan.com/logo.png" alt="">
            </a>
            <a href="#" target="_blank">
                <img src="https://www.fzhan.com/logo.png" alt="">
            </a>
            <a href="#" target="_blank">
                <img src="https://www.fzhan.com/logo.png" alt="">
            </a>
        </div>
    </div>