求助：将CSS3顶部下滑切换效果改为底部上滑切换

没问题，我帮你搞定这个从底部向上滑动的效果！你之前只把top改成bottom没生效，是因为还有几个关联的属性没同步调整，比如动画的目标属性、容器的外边距方向这些。下面是修改好的完整代码：

修改后的CSS代码 #

* { margin:0; padding:0; font-family:"Helvetica Neue", Helvetica, Sans-serif; word-spacing:-2px; } 
h1 { font-size:40px; font-weight:bold; color:#191919; -webkit-font-smoothing: antialiased; } 
h2 { font-weight:normal; font-size:20px; color:#888; padding:5px 0; } 

.message { 
    background:#181818; 
    color:#FFF; 
    position: absolute; 
    bottom: -250px; /* 初始位置改为底部隐藏 */
    left: 0; 
    width: 100%; 
    height: 250px; 
    padding: 20px; 
    transition: bottom 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94); /* 动画属性改为bottom */
    overflow: hidden; 
    box-sizing: border-box; 
} 
.message h1 { color:#FFF; } 

#toggle { 
    position:absolute; 
    appearance:none; 
    cursor:pointer; 
    left:-100%; 
    top:-100%; 
} 

#toggle + label { 
    position:absolute; 
    cursor:pointer; 
    padding:10px; 
    background: #26ae90; 
    width: 100px; 
    border-radius: 3px; 
    padding: 8px 10px; 
    color: #FFF; 
    line-height:20px; 
    font-size:12px; 
    text-align:center; 
    -webkit-font-smoothing: antialiased; 
    cursor: pointer; 
    margin:20px 50px; 
    transition:all 500ms ease; 
} 
#toggle + label:after { content:"Open" } 

.container { 
    transition: margin 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94); 
    padding:5em 3em; 
} 

#toggle:checked ~ .message { 
    bottom: 0; /* 选中时滑到底部0位置 */
} 
#toggle:checked ~ .container { 
    margin-bottom: 250px; /* 容器改为向下让出空间 */
} 
#toggle:checked + label { background:#dd6149; } 
#toggle:checked + label:after { content:"Close" }

对应的HTML代码（无需修改） #

<input type="checkbox" name="toggle" id="toggle" /> 
<label for="toggle"></label> 
<div class="container"> 
    <h1>Pure CSS3 Slide Up Toggle Demo</h1> 
    <h2> Click the Open button to see hidden mesage.</h2> 
</div> 
<div class="message">
    <h1> hello, I'm a hidden message. You found it.</h1> 
    <h2>Now Click the Heart button in the bottom to support CSS3</h2> 
</div>

关键修改点说明 #

• 调整.message的初始定位：从top: -250px改为bottom: -250px，让它一开始在视口底部外面
• 修改过渡动画的目标属性：把transition: top ...改成transition: bottom ...，确保动画监听的是底部位置变化
• 调整容器的外边距：把margin-top: 250px改成margin-bottom: 250px，因为现在是底部元素滑上来，需要让主容器向下移动，避免被遮挡
• 调整选中状态下的.message位置：从top: 0改为bottom: 0，让它滑到视口底部显示

这样修改后，点击按钮就能看到内容从底部向上滑动的效果啦！

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