二次元渐变效果五格模块-记录

71
您好！欢迎阅读我们的文章，祝您收获满满！
小辉Ai
开心宝
生成中...

效果预览

图片[1]-二次元渐变效果五格模块-记录
图片[1]-二次元渐变效果五格模块-记录
图片[1]-二次元渐变效果五格模块-记录

开始教程

首先将下方的css代码加平时自定义css的地方

/* 仅在桌面设备上生效的CSS */
@media (min-width: 769px) {
    .course-project-panel-course[data-v-d1c115ee] {
        background-color: #f5f5f7;
        padding: 24px 0;
        border-radius: 10px;
    }
    .course-project-panel-course ul[data-v-d1c115ee] {
        display: flex;
        justify-content: space-around;
    }
    .course-project-panel-course ul li[data-v-d1c115ee] {
        width: 100%;
        cursor: pointer;
        border-right: 1px solid #eaeaea;
        position: relative;
    }
    .course-project-panel-course ul li .top[data-v-d1c115ee] {
        text-align: center;
        opacity: 1;
        transition-duration: 1.5s;
    }
    .course-project-panel-course ul li .top .title[data-v-d1c115ee] {
        font-size: 22px;
        font-weight: 700;
        padding: 24px 0 20px;
    }
    .course-project-panel-course ul li .top .describe[data-v-d1c115ee] {
        font-size: 14px;
        color: #484848;
    }
    .course-project-panel-course ul li .top .line[data-v-d1c115ee] {
        width: 24px;
        height: 4px;
        background-color: #31a86c;
        margin: 10px auto 40px;
        border-radius: 50px;
    }
    .course-project-panel-course ul li .top .ivu-btn[data-v-d1c115ee] {
        font-size: 13px;
        width: 134px;
        height: 40px;
        color: #fff;
    }
    .course-project-panel-course ul li .top .vip[data-v-d1c115ee] {
        color: #31a86c;
    }
    .course-project-panel-course ul li .top .vip-line[data-v-d1c115ee] {
        background-color: #31a86c;
    }
    .course-project-panel-course ul li .top .vip-btn[data-v-d1c115ee] {
        background-color: #9bd5b8;
        border: 0 solid #0054f0 !important;
    }
    .course-project-panel-course ul li .top .vip-btn[data-v-d1c115ee]:hover {
        border: none;
        background-color: #31a86c;
    }
    .course-project-panel-course ul li .top .routine[data-v-d1c115ee] {
        color: #ff902e;
    }
    .course-project-panel-course ul li .top .routine-line[data-v-d1c115ee] {
        background-color: #ff902e;
    }
    .course-project-panel-course ul li .top .routine-btn[data-v-d1c115ee] {
        background-color: #fac6a1;
        border: 0 solid #0054f0 !important;
    }
    .course-project-panel-course ul li .top .routine-btn[data-v-d1c115ee]:hover {
        border: none;
        background-color: #ff902e;
    }
    .course-project-panel-course ul li .top .ten[data-v-d1c115ee] {
        color: #31a89b;
    }
    .course-project-panel-course ul li .top .ten-line[data-v-d1c115ee] {
        background-color: #31a89b;
    }
    .course-project-panel-course ul li .top .ten-btn[data-v-d1c115ee] {
        background-color: #7fc7c0;
        border: 0 solid #0054f0 !important;
    }
    .course-project-panel-course ul li .top .ten-btn[data-v-d1c115ee]:hover {
        border: none;
        background-color: #31a89b;
    }
    .course-project-panel-course ul li .top .double[data-v-d1c115ee] {
        color: #ffc343;
    }
    .course-project-panel-course ul li .top .double-line[data-v-d1c115ee] {
        background-color: #ffc343;
    }
    .course-project-panel-course ul li .top .double-btn[data-v-d1c115ee] {
        background-color: #fbd78b;
        border: 0 solid #0054f0 !important;
    }
    .course-project-panel-course ul li .top .double-btn[data-v-d1c115ee]:hover {
        border: none;
        background-color: #ffc343;
    }
    .course-project-panel-course ul li .top .nike[data-v-d1c115ee] {
        color: #439bff;
    }
    .course-project-panel-course ul li .top .nike-line[data-v-d1c115ee] {
        background-color: #439bff;
    }
    .course-project-panel-course ul li .top .nike-btn[data-v-d1c115ee] {
        background-color: #8abffc;
        border: 0 solid #0054f0 !important;
    }
    .course-project-panel-course ul li .top .nike-btn[data-v-d1c115ee]:hover {
        border: none;
        background-color: #439bff;
    }
    .course-project-panel-course ul li .vip-bottom[data-v-d1c115ee] {
        background: url(/images/nav_https://img.huliku.com/pic/aa0b646cf0cc7.png) 0 0 no-repeat;
    }
    .course-project-panel-course ul li .routine-bottom[data-v-d1c115ee] {
        background: url(/images/nav_https://img.huliku.com/pic/3470c0d56c173.png) 0 0 no-repeat;
    }
    .course-project-panel-course ul li .ten-bottom[data-v-d1c115ee] {
        background: url(/images/nav_https://img.huliku.com/pic/4f46d3890b42b.png) 0 0 no-repeat;
    }
    .course-project-panel-course ul li .double-bottom[data-v-d1c115ee] {
        background: url(/images/nav_https://img.huliku.com/pic/fe92e6bc958a3.png) 0 0 no-repeat;
    }
    .course-project-panel-course ul li .nike-bottom[data-v-d1c115ee] {
        background: url(/images/nav_https://img.huliku.com/pic/9da1215eca6e9.png) 0 0 no-repeat;
    }
    .course-project-panel-course ul li .bottom[data-v-d1c115ee] {
        width: 256px;
        height: 268px;
        color: #1b1b1b;
        border-radius: 10px;
        padding: 46px 28px 0;
        position: absolute;
        left: 0;
        top: -28px;
        opacity: 0;
        transform: scale(1);
        transition-duration: .5s;
    }
    .course-project-panel-course ul li .bottom .title[data-v-d1c115ee] {
        font-size: 23px;
        padding-bottom: 24px;
    }
    .course-project-panel-course ul li .bottom .describe[data-v-d1c115ee] {
        font-size: 14px;
    }
    .course-project-panel-course ul li .bottom .line[data-v-d1c115ee] {
        width: 24px;
        height: 4px;
        background-color: #fff;
        margin: 15px 0 30px;
        border-radius: 50px;
    }
    .course-project-panel-course ul li .bottom .bottom-btn[data-v-d1c115ee] {
        width: 80%;
        border: none;
        background-color: hsla(0, 0%, 100%, .5);
        font-size: 13px;
        height: 40px;
        color: #0c301e;
        text-shadow: 0 3px 20px #3c6751;
        text-align: center;
    }
    .course-project-panel-course ul li .bottom .bottom-btn[data-v-d1c115ee]:hover {
        background-color: #fff;
    }
    .course-project-panel-course ul li[data-v-d1c115ee]:last-child {
        border-right: none;
    }
    .course-project-panel-course ul li:hover .top[data-v-d1c115ee] {
        opacity: 0;
        transition-duration: .5s;
    }
    .course-project-panel-course ul li:hover .bottom[data-v-d1c115ee] {
        transform: scale(1.05);
        opacity: 1;
        transition-duration: 1s;
    }
}
/* 在移动设备上隐藏的样式 */
@media (max-width: 768px) {
    .desktop-only {
        display: none;
    }
}
/* 仅在桌面设备上生效的CSS */
@media (min-width: 769px) {
    .course-project-panel-course[data-v-d1c115ee] {
        background-color: #f5f5f7;
        padding: 24px 0;
        border-radius: 10px;
    }
    .course-project-panel-course ul[data-v-d1c115ee] {
        display: flex;
        justify-content: space-around;
    }
    .course-project-panel-course ul li[data-v-d1c115ee] {
        width: 100%;
        cursor: pointer;
        border-right: 1px solid #eaeaea;
        position: relative;
    }
    .course-project-panel-course ul li .top[data-v-d1c115ee] {
        text-align: center;
        opacity: 1;
        transition-duration: 1.5s;
    }
    .course-project-panel-course ul li .top .title[data-v-d1c115ee] {
        font-size: 22px;
        font-weight: 700;
        padding: 24px 0 20px;
    }
    .course-project-panel-course ul li .top .describe[data-v-d1c115ee] {
        font-size: 14px;
        color: #484848;
    }
    .course-project-panel-course ul li .top .line[data-v-d1c115ee] {
        width: 24px;
        height: 4px;
        background-color: #31a86c;
        margin: 10px auto 40px;
        border-radius: 50px;
    }
    .course-project-panel-course ul li .top .ivu-btn[data-v-d1c115ee] {
        font-size: 13px;
        width: 134px;
        height: 40px;
        color: #fff;
    }
    .course-project-panel-course ul li .top .vip[data-v-d1c115ee] {
        color: #31a86c;
    }
    .course-project-panel-course ul li .top .vip-line[data-v-d1c115ee] {
        background-color: #31a86c;
    }
    .course-project-panel-course ul li .top .vip-btn[data-v-d1c115ee] {
        background-color: #9bd5b8;
        border: 0 solid #0054f0 !important;
    }
    .course-project-panel-course ul li .top .vip-btn[data-v-d1c115ee]:hover {
        border: none;
        background-color: #31a86c;
    }
    .course-project-panel-course ul li .top .routine[data-v-d1c115ee] {
        color: #ff902e;
    }
    .course-project-panel-course ul li .top .routine-line[data-v-d1c115ee] {
        background-color: #ff902e;
    }
    .course-project-panel-course ul li .top .routine-btn[data-v-d1c115ee] {
        background-color: #fac6a1;
        border: 0 solid #0054f0 !important;
    }
    .course-project-panel-course ul li .top .routine-btn[data-v-d1c115ee]:hover {
        border: none;
        background-color: #ff902e;
    }
    .course-project-panel-course ul li .top .ten[data-v-d1c115ee] {
        color: #31a89b;
    }
    .course-project-panel-course ul li .top .ten-line[data-v-d1c115ee] {
        background-color: #31a89b;
    }
    .course-project-panel-course ul li .top .ten-btn[data-v-d1c115ee] {
        background-color: #7fc7c0;
        border: 0 solid #0054f0 !important;
    }
    .course-project-panel-course ul li .top .ten-btn[data-v-d1c115ee]:hover {
        border: none;
        background-color: #31a89b;
    }
    .course-project-panel-course ul li .top .double[data-v-d1c115ee] {
        color: #ffc343;
    }
    .course-project-panel-course ul li .top .double-line[data-v-d1c115ee] {
        background-color: #ffc343;
    }
    .course-project-panel-course ul li .top .double-btn[data-v-d1c115ee] {
        background-color: #fbd78b;
        border: 0 solid #0054f0 !important;
    }
    .course-project-panel-course ul li .top .double-btn[data-v-d1c115ee]:hover {
        border: none;
        background-color: #ffc343;
    }
    .course-project-panel-course ul li .top .nike[data-v-d1c115ee] {
        color: #439bff;
    }
    .course-project-panel-course ul li .top .nike-line[data-v-d1c115ee] {
        background-color: #439bff;
    }
    .course-project-panel-course ul li .top .nike-btn[data-v-d1c115ee] {
        background-color: #8abffc;
        border: 0 solid #0054f0 !important;
    }
    .course-project-panel-course ul li .top .nike-btn[data-v-d1c115ee]:hover {
        border: none;
        background-color: #439bff;
    }
    .course-project-panel-course ul li .vip-bottom[data-v-d1c115ee] {
        background: url(/images/nav_https://img.huliku.com/pic/aa0b646cf0cc7.png) 0 0 no-repeat;
    }
    .course-project-panel-course ul li .routine-bottom[data-v-d1c115ee] {
        background: url(/images/nav_https://img.huliku.com/pic/3470c0d56c173.png) 0 0 no-repeat;
    }
    .course-project-panel-course ul li .ten-bottom[data-v-d1c115ee] {
        background: url(/images/nav_https://img.huliku.com/pic/4f46d3890b42b.png) 0 0 no-repeat;
    }
    .course-project-panel-course ul li .double-bottom[data-v-d1c115ee] {
        background: url(/images/nav_https://img.huliku.com/pic/fe92e6bc958a3.png) 0 0 no-repeat;
    }
    .course-project-panel-course ul li .nike-bottom[data-v-d1c115ee] {
        background: url(/images/nav_https://img.huliku.com/pic/9da1215eca6e9.png) 0 0 no-repeat;
    }
    .course-project-panel-course ul li .bottom[data-v-d1c115ee] {
        width: 256px;
        height: 268px;
        color: #1b1b1b;
        border-radius: 10px;
        padding: 46px 28px 0;
        position: absolute;
        left: 0;
        top: -28px;
        opacity: 0;
        transform: scale(1);
        transition-duration: .5s;
    }
    .course-project-panel-course ul li .bottom .title[data-v-d1c115ee] {
        font-size: 23px;
        padding-bottom: 24px;
    }
    .course-project-panel-course ul li .bottom .describe[data-v-d1c115ee] {
        font-size: 14px;
    }
    .course-project-panel-course ul li .bottom .line[data-v-d1c115ee] {
        width: 24px;
        height: 4px;
        background-color: #fff;
        margin: 15px 0 30px;
        border-radius: 50px;
    }
    .course-project-panel-course ul li .bottom .bottom-btn[data-v-d1c115ee] {
        width: 80%;
        border: none;
        background-color: hsla(0, 0%, 100%, .5);
        font-size: 13px;
        height: 40px;
        color: #0c301e;
        text-shadow: 0 3px 20px #3c6751;
        text-align: center;
    }
    .course-project-panel-course ul li .bottom .bottom-btn[data-v-d1c115ee]:hover {
        background-color: #fff;
    }
    .course-project-panel-course ul li[data-v-d1c115ee]:last-child {
        border-right: none;
    }
    .course-project-panel-course ul li:hover .top[data-v-d1c115ee] {
        opacity: 0;
        transition-duration: .5s;
    }
    .course-project-panel-course ul li:hover .bottom[data-v-d1c115ee] {
        transform: scale(1.05);
        opacity: 1;
        transition-duration: 1s;
    }
}

/* 在移动设备上隐藏的样式 */
@media (max-width: 768px) {
    .desktop-only {
        display: none;
    }
}
/* 仅在桌面设备上生效的CSS */
@media (min-width: 769px) {
    .course-project-panel-course[data-v-d1c115ee] {
        background-color: #f5f5f7;
        padding: 24px 0;
        border-radius: 10px;
    }
    .course-project-panel-course ul[data-v-d1c115ee] {
        display: flex;
        justify-content: space-around;
    }
    .course-project-panel-course ul li[data-v-d1c115ee] {
        width: 100%;
        cursor: pointer;
        border-right: 1px solid #eaeaea;
        position: relative;
    }
    .course-project-panel-course ul li .top[data-v-d1c115ee] {
        text-align: center;
        opacity: 1;
        transition-duration: 1.5s;
    }
    .course-project-panel-course ul li .top .title[data-v-d1c115ee] {
        font-size: 22px;
        font-weight: 700;
        padding: 24px 0 20px;
    }
    .course-project-panel-course ul li .top .describe[data-v-d1c115ee] {
        font-size: 14px;
        color: #484848;
    }
    .course-project-panel-course ul li .top .line[data-v-d1c115ee] {
        width: 24px;
        height: 4px;
        background-color: #31a86c;
        margin: 10px auto 40px;
        border-radius: 50px;
    }
    .course-project-panel-course ul li .top .ivu-btn[data-v-d1c115ee] {
        font-size: 13px;
        width: 134px;
        height: 40px;
        color: #fff;
    }
    .course-project-panel-course ul li .top .vip[data-v-d1c115ee] {
        color: #31a86c;
    }
    .course-project-panel-course ul li .top .vip-line[data-v-d1c115ee] {
        background-color: #31a86c;
    }
    .course-project-panel-course ul li .top .vip-btn[data-v-d1c115ee] {
        background-color: #9bd5b8;
        border: 0 solid #0054f0 !important;
    }
    .course-project-panel-course ul li .top .vip-btn[data-v-d1c115ee]:hover {
        border: none;
        background-color: #31a86c;
    }
    .course-project-panel-course ul li .top .routine[data-v-d1c115ee] {
        color: #ff902e;
    }
    .course-project-panel-course ul li .top .routine-line[data-v-d1c115ee] {
        background-color: #ff902e;
    }
    .course-project-panel-course ul li .top .routine-btn[data-v-d1c115ee] {
        background-color: #fac6a1;
        border: 0 solid #0054f0 !important;
    }
    .course-project-panel-course ul li .top .routine-btn[data-v-d1c115ee]:hover {
        border: none;
        background-color: #ff902e;
    }
    .course-project-panel-course ul li .top .ten[data-v-d1c115ee] {
        color: #31a89b;
    }
    .course-project-panel-course ul li .top .ten-line[data-v-d1c115ee] {
        background-color: #31a89b;
    }
    .course-project-panel-course ul li .top .ten-btn[data-v-d1c115ee] {
        background-color: #7fc7c0;
        border: 0 solid #0054f0 !important;
    }
    .course-project-panel-course ul li .top .ten-btn[data-v-d1c115ee]:hover {
        border: none;
        background-color: #31a89b;
    }
    .course-project-panel-course ul li .top .double[data-v-d1c115ee] {
        color: #ffc343;
    }
    .course-project-panel-course ul li .top .double-line[data-v-d1c115ee] {
        background-color: #ffc343;
    }
    .course-project-panel-course ul li .top .double-btn[data-v-d1c115ee] {
        background-color: #fbd78b;
        border: 0 solid #0054f0 !important;
    }
    .course-project-panel-course ul li .top .double-btn[data-v-d1c115ee]:hover {
        border: none;
        background-color: #ffc343;
    }
    .course-project-panel-course ul li .top .nike[data-v-d1c115ee] {
        color: #439bff;
    }
    .course-project-panel-course ul li .top .nike-line[data-v-d1c115ee] {
        background-color: #439bff;
    }
    .course-project-panel-course ul li .top .nike-btn[data-v-d1c115ee] {
        background-color: #8abffc;
        border: 0 solid #0054f0 !important;
    }
    .course-project-panel-course ul li .top .nike-btn[data-v-d1c115ee]:hover {
        border: none;
        background-color: #439bff;
    }
    .course-project-panel-course ul li .vip-bottom[data-v-d1c115ee] {
        background: url(/images/nav_https://img.huliku.com/pic/aa0b646cf0cc7.png) 0 0 no-repeat;
    }
    .course-project-panel-course ul li .routine-bottom[data-v-d1c115ee] {
        background: url(/images/nav_https://img.huliku.com/pic/3470c0d56c173.png) 0 0 no-repeat;
    }
    .course-project-panel-course ul li .ten-bottom[data-v-d1c115ee] {
        background: url(/images/nav_https://img.huliku.com/pic/4f46d3890b42b.png) 0 0 no-repeat;
    }
    .course-project-panel-course ul li .double-bottom[data-v-d1c115ee] {
        background: url(/images/nav_https://img.huliku.com/pic/fe92e6bc958a3.png) 0 0 no-repeat;
    }
    .course-project-panel-course ul li .nike-bottom[data-v-d1c115ee] {
        background: url(/images/nav_https://img.huliku.com/pic/9da1215eca6e9.png) 0 0 no-repeat;
    }
    .course-project-panel-course ul li .bottom[data-v-d1c115ee] {
        width: 256px;
        height: 268px;
        color: #1b1b1b;
        border-radius: 10px;
        padding: 46px 28px 0;
        position: absolute;
        left: 0;
        top: -28px;
        opacity: 0;
        transform: scale(1);
        transition-duration: .5s;
    }
    .course-project-panel-course ul li .bottom .title[data-v-d1c115ee] {
        font-size: 23px;
        padding-bottom: 24px;
    }
    .course-project-panel-course ul li .bottom .describe[data-v-d1c115ee] {
        font-size: 14px;
    }
    .course-project-panel-course ul li .bottom .line[data-v-d1c115ee] {
        width: 24px;
        height: 4px;
        background-color: #fff;
        margin: 15px 0 30px;
        border-radius: 50px;
    }
    .course-project-panel-course ul li .bottom .bottom-btn[data-v-d1c115ee] {
        width: 80%;
        border: none;
        background-color: hsla(0, 0%, 100%, .5);
        font-size: 13px;
        height: 40px;
        color: #0c301e;
        text-shadow: 0 3px 20px #3c6751;
        text-align: center;
    }
    .course-project-panel-course ul li .bottom .bottom-btn[data-v-d1c115ee]:hover {
        background-color: #fff;
    }
    .course-project-panel-course ul li[data-v-d1c115ee]:last-child {
        border-right: none;
    }
    .course-project-panel-course ul li:hover .top[data-v-d1c115ee] {
        opacity: 0;
        transition-duration: .5s;
    }
    .course-project-panel-course ul li:hover .bottom[data-v-d1c115ee] {
        transform: scale(1.05);
        opacity: 1;
        transition-duration: 1s;
    }
}

/* 在移动设备上隐藏的样式 */
@media (max-width: 768px) {
    .desktop-only {
        display: none;
    }
}

然后再小工具-自定义htnl里添加如下代码即可

由于这个未适配手机端，因此我干脆将其在手机端被隐藏。如果需要在手机端正常显示，请删除以下部分代码，并根据需要自行调整以适配手机端。

CSS部分：

  • 添加媒体查询：在CSS中使用 @media (min-width: 769px) 媒体查询，将所有样式代码包裹在这个查询内，使这些样式只在屏幕宽度大于768px的设备（通常是平板和桌面设备）上生效。
  • 添加隐藏样式：新增了一个 @media (max-width: 768px) 媒体查询，定义 .desktop-only 类，在移动设备（宽度小于等于768px）上隐藏内容。

HTML部分：

  • 添加 desktop-only 类：在HTML代码的最外层 div 上添加了 desktop-only 类，确保这部分内容在移动设备上被隐藏。

© 版权声明

文章法典(文章版权声明)

  • ◆ 领地名称：开心宝要塞(开心宝)
  • ◆ 永久坐标：https://joyb.cc
  • ◆ 部分知识来自冒险者笔记，仅供修习参考（本站文章部分内容来源于网络，仅供学习参考，如有侵权请联系站长删除）
  • ◆ 资源配方不构成建造建议(本站资源不构成任何投资建议，仅代表个人观点)
  • ◆ 发现危险物品请立即通知卫兵(严禁发布违法信息，访客发现请立即举报)
  • ◆ 失效传送门请告知管理员更新(资源链接失效请联系我们，我们会及时更新)
THE END
建站美化
# 美化# 五格模块
喜欢就支持一下吧
相关推荐
哈喽~
全站积分可通过签到和每日任务获取，可别错过哦！
默认头像
封面
未选择歌曲
龟类养殖高效录制预加载技术页面页脚美化音乐播放器音乐下载工具音乐雷电将军防盗链防火墙闲与忙的思考趋势分析超低手续费支付赞赏