html+js实现图片上放文字加标题按钮的大气banner特效+手机自适应

html+js实现图片上放文字加标题按钮的大气banner特效+手机自适应

        <style>
    .slideshow-container {
        width: 100%;
        height: 100%; /* Adjust as needed */
        overflow: hidden;
        position: relative;
    }
    .slide {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: absolute;
        transition: transform 0.5s ease-in-out;

    }
    .slide img {
        max-width: 100%;
        height: 100%;
    }
    .slide-in {
        transform: translateY(-100%);
    }
    .slide-out {
        transform: translateY(100%);
    }
    .text-x {
    text-align: center;
    margin-top: 20px;
    position: absolute;

    /*图片遮罩效果*/
    padding: 100vh 0 100vh 0;
    background: rgb(0 0 0 / 0.3);

}

@keyframes dropIn {
    0% {
        opacity: 0;
        transform: translateY(-200px); /* 初始位置在上方50px */
    }
    100% {
        opacity: 1;
        transform: translateY(0); /* 最终位置在原始位置 */
    }
}

@keyframes dropout {
    0% {
        opacity: 0;
        transform: translateY(200px); /* 初始位置在上方50px */
    }
    100% {
        opacity: 1;
        transform: translateY(0); /* 最终位置在原始位置 */
    }
}

    .button-x {
        margin-top: 20px;
    }
    .btn-container {
        position: absolute;
        top: 50%;
        right: 10px;
        transform: translateY(-50%);
        display: flex;
        flex-direction: column;
    }
    .btn-container button {
        margin: 10px 0;
        padding: 10px;
        font-size: 16px;
        cursor: pointer;
    }
    .h2x{
        font-size: 3em;
    font-weight: 700;
    line-height: 1.5em;
    color: #F0F0F0;

    margin-bottom: 40px;

    opacity: 0; /* 初始设置为透明 */
    animation: dropIn 2s ease forwards; /* 应用动画 */

    }
    .px{
        color: var(--treck-white);
    font-weight: 500;

    font-size: 18px;

    margin-bottom: 30px;

    color: #F0F0F0;

    opacity: 0; /* 初始设置为透明 */
    animation: dropout 2s ease forwards; /* 应用动画 */

    margin: 50px 200px 50px 200px;

    }

    .thm-btn {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    border: none;
    -webkit-appearance: none;
    appearance: none;
    outline: none!important;
    background-color: #0c3c60;
    color: #ffffff;
    font-size: 18px;
    font-weight: 600;
    padding: 9px 49px 13px;
    overflow: hidden;
    transition: all 0.5s linear;
    z-index: 1;

    cursor: pointer;

    opacity: 0; /* 初始设置为透明 */
    animation: dropout 2s ease forwards; /* 应用动画 */

}

.thm-btn:hover {

    color:#0c3c60;
    background-color: #ffffff; /* 目标背景色为白色 */
    cursor: pointer;
}

.dco-a{
    color: inherit; /* 继承父元素的文字颜色 */
    text-decoration: none; /* 取消下划线 */
    cursor: pointer;
}

    /* 手机媒体查询 */
@media only screen and (max-width: 1023px) {
  /* 在屏幕宽度小于等于x时应用以下样式 */

  .video{

            height: 100vh  !important;

        }

        .h2x {
    font-size: 10em !important;
        }

        .px{
            font-size: 38px !important;

            margin: 50px 100px 80px 100px !important;
            font-weight: bold !important;
        }

        .thm-btn{

            font-size: 58px !important;
            height: 5vh !important;

        }

}   

</style>

<div class="video">
<div class="slideshow-container">
    <div class="slide current">

        <!--背景图-->
        <img src="https://image.heiqw.com/i/2024/07/23/126ge24.png" alt="Slide 1">

        <div class="text-x">
            <h2 class="h2x">图片上的标题</h2>
            <p class="px">图片上的文字</p>
            <div class="button-x">
                <a class="dco-a" href="http://baidu.com" target="_blank"><button class="thm-btn">图片上的按钮</button></a>
            </div>
        </div>
    </div>

</div>

</div>