求助：点击按钮实现Hero图片滑出/滑入屏幕的交互效果

一、重构HTML结构 #

调整布局，让Hero图、左右箭头都能触发滑出/滑回动作，同时明确状态控制逻辑：

<section>
    <div class="pv-wrapper">
        <h1>PHOTO + VIDEO</h1>
        <div class="btn-container">
            <ul>
                <li class="automotive"><a href="automotive.html">Automotive</a></li>
                <li class="video"><a href="video.html">Video</a></li>
                <li class="portraits"><a href="portraits.html">Portraits</a></li>
                <li class="landscapes"><a href="landscapes.html">Landscapes</a></li>
            </ul>
        </div>
        <!-- 隐藏的checkbox作为状态控制器 -->
        <input type="checkbox" id="hero-toggle" class="hero-toggle">
        <!-- 左侧触发箭头 -->
        <label for="hero-toggle" class="slider-arrow left-arrow">
            <img src="images/right-arrow.png" alt="滑出图库">
        </label>
        <!-- Hero图片容器，点击可触发滑动 -->
        <label for="hero-toggle" class="photo-slider">
            <!-- 右侧返回按钮，默认隐藏 -->
            <label for="hero-toggle" class="slider-arrow right-arrow">
                <img src="images/left-arrow.png" alt="返回Hero图">
            </label>
        </label>
    </div>
</section>

二、修改CSS实现交互 #

1. 基础布局调整 #

.pv-wrapper {
    width: 100%;
    height: 750px;
    position: relative;
    border-left: 100px solid orange;
    color: rgba(0, 0, 0, 0.5);
    font-size: small;
    overflow: hidden; /* 防止Hero图滑出时溢出容器 */
}
.pv-wrapper h1 {
    font-size: 50px;
    color: white;
    text-transform: uppercase;
    letter-spacing: 3px;
    position: absolute;
    bottom: 225px;
    left: -40px;
    margin-left: -30px;
    transform: rotate(270deg);
    transform-origin: 0 0;
}
.btn-container ul {
    display: inline-block;
    padding: 50px 0 0 50px;
    font-family: 'Poppins-Light';
    font-size: 40px;
    line-height: 120%;
}
.btn-container ul li a {
    text-decoration: none;
    color: black;
    transition: color 0.4s ease;
}
.btn-container ul li a:hover {
    color: #68C8E5;
}
/* 隐藏状态控制用的checkbox */
.hero-toggle {
    display: none;
}

2. Hero图悬停弹跳动画 #

/* 定义左右轻微弹跳的动画 */
@keyframes bounce-horizontal {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}
.photo-slider {
    position: absolute;
    height: 750px;
    width: calc(100% - 100px); /* 减去左侧橙色边框宽度 */
    left: 100px;
    top: 0;
    background: url(../images/rs3-bg.jpg);
    background-size: cover;
    background-position: 75% 50%;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); /* 用贝塞尔曲线让动画更流畅 */
    cursor: pointer;
}
/* 鼠标悬停时播放弹跳动画 */
.photo-slider:hover {
    animation: bounce-horizontal 0.6s ease-in-out infinite;
}

3. 滑动交互逻辑 #

/* checkbox被选中时，Hero图向右滑出屏幕 */
.hero-toggle:checked ~ .photo-slider {
    transform: translateX(100%);
}
/* 箭头按钮通用样式 */
.slider-arrow {
    position: absolute;
    z-index: 10;
    cursor: pointer;
}
/* 左侧箭头定位 */
.left-arrow {
    left: 20px;
    top: 90px;
}
/* 右侧返回按钮默认隐藏 */
.right-arrow {
    right: 20px;
    top: 20px;
    display: none;
}
/* Hero图滑出后，显示右侧返回按钮 */
.hero-toggle:checked ~ .photo-slider .right-arrow {
    display: block;
}
.slider-arrow img {
    width: 20px;
}

三、关键问题修正说明 #

1. 滑动方向修正：你之前用top属性控制位置导致向下滑动，改用transform: translateX()实现左右滑动，且transform的渲染性能更优，动画更流畅。
2. 动画触发逻辑：悬停弹跳动画通过@keyframes定义后，绑定到hover状态；滑动交互通过隐藏的checkbox作为状态开关，利用:checked伪类控制transform值，实现点击触发的平滑过渡。
3. 交互区域优化：将Hero图本身设为label，点击图片即可触发滑动，同时添加右侧返回按钮，满足双向切换需求。

内容的提问来源于stack exchange，提问作者olchickenbeard