网站美化-侧边栏引导卡片【引导小工具】

03812
图片[1]-网站美化-侧边栏引导卡片【引导小工具】-晴天生活分享日志

后台小工具→自定义HTML:

<div class="flex items-center justify-start">
    <div data-v-15ac1b16="" class="ad flex-1" style="max-width: 320px; --rgb: 241,144,144; --default: #8f2a2a; --control-color: #932b2b; --bg: rgba(241,144,144,1); --bgTrans: rgba(241,144,144,0); --textShadow: -1px -1px rgba(255,255,255,.8),
    .1053em .1053em rgba(82,0,0,0.12),
    .1842em .1842em .1316em rgba(82,0,0,0.12); --image-shadow: 0 1em 1em rgba(82,0,0,0.3);">
        <div data-v-15ac1b16="" class="bg-wrapper">
            <div data-v-15ac1b16="" class="strip">
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
            </div>
            <div data-v-15ac1b16="" class="strip">
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
            </div>
            <div data-v-15ac1b16="" class="strip">
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
            </div>
            <div data-v-15ac1b16="" class="strip">
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
            </div>
            <div data-v-15ac1b16="" class="strip">
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
            </div>
            <div data-v-15ac1b16="" class="strip">
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
            </div>
            <div data-v-15ac1b16="" class="strip">
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
            </div>
            <div data-v-15ac1b16="" class="strip">
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
                <div data-v-15ac1b16="" class="img"
                    style="background-image: url(https://www.wniui.com/wp-content/uploads/2024/10/62cf2ef8d620241018224019.webp);">
                </div>
            </div>
        </div>
        <div data-v-15ac1b16="" class="wrapper">
            <div data-v-15ac1b16="" class="icon flex items-center"><img data-v-15ac1b16=""
                    src="https://www.wniui.com/image/icon.png" ></div>
            <div data-v-15ac1b16="" class="toolbar is-light">
                <div data-v-15ac1b16="" class="info">
                    <p data-v-15ac1b16="">专业建站</p>
                    <p data-v-15ac1b16=""><span data-v-15ac1b16="" class="tag font-slogan">广告</span>网站搭建、托管、优化等业务</p>
                </div>
                <div data-v-15ac1b16="" class="get-more">
                    <a href="https://www.foxccs.com">查看</a>
                </div>
            </div>
        </div>
    </div>
</div>

后台自定义CSS:

.ad[data-v-15ac1b16] {
    padding: 10px 15px;
    overflow: hidden;
    width: 100%;
    max-width: 320px;
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.6);
    position: relative;
    font-size: 14px;
    box-shadow: #00000073 0 25px 20px -20px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
}

.ad[data-v-15ac1b16]:before {
    content: "";
    position: absolute;
    background: linear-gradient(rgb(255 255 255 / 10%), rgb(155 213 255));
    z-index: 2;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: .5em
}

.ad .bg-wrapper[data-v-15ac1b16] {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 200%;
    height: 200%;
    overflow: hidden;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    z-index: 1;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 20px;
    -webkit-transform: translateX(-70px);
    transform: translate(-70px)
}

.ad .bg-wrapper .img[data-v-15ac1b16] {
    width: 60px;
    background-size: 100% 100%;
    height: 120px;
    border-radius: 5px;
    position: relative
}

.ad .bg-wrapper .img[data-v-15ac1b16]:before {
    content: "";
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 5px;
    position: absolute;
    background: rgba(255, 255, 255, 0.5);
    z-index: 2
}

.ad .bg-wrapper .strip[data-v-15ac1b16] {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-transform: rotate(-30deg);
    transform: rotate(-30deg);
    -webkit-transform-origin: top;
    transform-origin: top;
    gap: 10px;
    -webkit-animation: bgMove-15ac1b16 60s linear infinite;
    animation: bgMove-15ac1b16 60s linear infinite
}

.ad .bg-wrapper .strip[data-v-15ac1b16]:nth-of-type(2n) {
    -webkit-animation: bgMoveReverse-15ac1b16 60s linear infinite;
    animation: bgMoveReverse-15ac1b16 60s linear infinite
}

@-webkit-keyframes bgMove-15ac1b16 {
    0% {
        -webkit-transform: rotate(-30deg) translateY(0);
        transform: rotate(-30deg) translateY(0)
    }

    to {
        -webkit-transform: rotate(-30deg) translateY(-80%);
        transform: rotate(-30deg) translateY(-80%)
    }
}

@keyframes bgMove-15ac1b16 {
    0% {
        -webkit-transform: rotate(-30deg) translateY(0);
        transform: rotate(-30deg) translateY(0)
    }

    to {
        -webkit-transform: rotate(-30deg) translateY(-80%);
        transform: rotate(-30deg) translateY(-80%)
    }
}

@-webkit-keyframes bgMoveReverse-15ac1b16 {
    0% {
        -webkit-transform: rotate(-30deg) translateY(-85%);
        transform: rotate(-30deg) translateY(-85%)
    }

    to {
        -webkit-transform: rotate(-30deg) translateY(5%);
        transform: rotate(-30deg) translateY(5%)
    }
}

@keyframes bgMoveReverse-15ac1b16 {
    0% {
        -webkit-transform: rotate(-30deg) translateY(-85%);
        transform: rotate(-30deg) translateY(-85%)
    }

    to {
        -webkit-transform: rotate(-30deg) translateY(5%);
        transform: rotate(-30deg) translateY(5%)
    }
}

.ad .wrapper[data-v-15ac1b16] {
    position: relative;
    z-index: 4;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-flex-direction: column;
    flex-direction: column;
    color: #4d7bff;
}

.ad .wrapper .icon img[data-v-15ac1b16] {
    width: 50px;
    height: 50px;
    border-radius: 9px
}

.ad .wrapper .toolbar[data-v-15ac1b16] {
    width: 100%;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    margin-top: 5px;
    gap: 5px
}

.ad .wrapper .toolbar .info[data-v-15ac1b16] {
    color: #4d7bff;
    ;
    gap: 2px;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-flex: 1;
    flex: 1
}

.ad .wrapper .toolbar .info p[data-v-15ac1b16] {
    margin: 0;
    font-size: 12px
}

.ad .wrapper .toolbar .info p[data-v-15ac1b16]:first-child {
    font-size: 16px;
    font-weight: 700
}

.ad .wrapper .toolbar .info p .tag[data-v-15ac1b16] {
    background: #4d7bff;
    color: #e2e8f0;
    padding: 2px 5px;
    border-radius: 5px;
    margin-right: 5px
}

.ad .wrapper .toolbar .get-more[data-v-15ac1b16] a {
    padding: 4px 15px;
    border-radius: 15px;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    background: #4d7bff;
    color: #e2e8f0;
    cursor: pointer;
    font-size: 12px;
    opacity: .8;
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -ms-transition: .3s;
    -o-transition: .3s;
}

.ad .wrapper .toolbar .get-more[data-v-15ac1b16] a:hover {
    opacity: 1
}
------本页内容已结束，喜欢请分享------

感谢您的来访，获取更多精彩文章请收藏本站。

© 版权声明
文章来源
管理员
隐私政策
PrivacyPolicy
用户协议
UseGenerator
许可协议
NC-SA 4.0

1. 资源都是经过站长或作者收集测试修改后发布分享。转载请在文内以超链形式注明出处，谢谢合作！
2. 本站除原创内容，其余所有内容均收集自互联网，仅限用于学习和研究目的，本站不对其内容的合法性承担任何责任。如有版权内容，请通知我们或作者删除，其版权均归原作者所有，本站虽力求保存原有版权信息，但因众多资源经多次转载，已无法确定其真实来源，或已将原有信息丢失，所以敬请原作者谅解！
3. 本站用户所发布的一切资源内容不代表本站立场，并不代表本站赞同其观点和对其真实性负责，若您对本站所载资源作品版权归属存有异议，请留言附说明联系邮箱，我们将在第一时间予以处理 ，同时向您表示歉意！为尊重作者版权，请购买原版作品，支持您喜欢的作者，谢谢！
4. 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客如有发现请立即向站长举报；本站资源文件大多存储在云盘，如发现链接或图片失效，请联系作者或站长及时更新。
THE END
未分类
喜欢就支持一下吧
点赞12 分享
admin的头像-晴天生活分享日志
<span style=测试-晴天生活分享日志">
测试
测试
2年前 362
<span style=彩虹易支付使用教程-晴天生活分享日志">
彩虹易支付使用教程
彩虹易支付使用教程
2年前 337
测试发卡-晴天生活分享日志
测试发卡
测试发卡
2年前 237
<span style=测试发卡2-晴天生活分享日志">
测试发卡2
测试发卡2
2年前 235
<span style=测试-晴天生活分享日志">
测试
测试
2年前 152
<span style=测试-晴天生活分享日志">
测试
测试
2年前 151
相关推荐
评论 抢沙发
头像
欢迎您留下宝贵的见解！
提交
头像

昵称

取消
昵称

请填写用户信息：

  • 昵称
  • 邮箱
表情
[aoman][baiyan][bishi][bizui][cahan][ciya][dabing][daku][deyi][doge][fadai][fanu][fendou][ganga][guzhang][haixiu][hanxiao][zuohengheng][zhuakuang][zhouma][zhemo][zhayanjian][zaijian][yun][youhengheng][yiwen][yinxian][xu][xieyanxiao][xiaoku][xiaojiujie][xia][wunai][wozuimei][weixiao][weiqu][tuosai][tu][touxiao][tiaopi][shui][se][saorao][qiudale][qinqin][qiaoda][piezui][penxue][nanguo][liulei][liuhan][lenghan][leiben][kun][kuaikule][ku][koubi][kelian][keai][jingya][jingxi][jingkong][jie][huaixiao][haqian][aini][OK][qiang][quantou][shengli][woshou][gouyin][baoquan][aixin][bangbangtang][xiaoyanger][xigua][hexie][pijiu][lanqiu][juhua][hecai][haobang][caidao][baojin][chi][dan][kulou][shuai][shouqiang][yangtuo][youling]
代码

请输入代码：

确认
图片

    暂无评论内容