html - div用纯css向上滑动

Question

单击箭头后，是否可以使用纯 css 让控件覆盖 div 从底部向上滑动？我的最大高度为 119px；所以叠加层就停在数字下方。我添加了一个过渡和一个 .close 属性，但我似乎无法将其切换到箭头 div。任何人都可以提出建议吗？谢谢。

html, body { 
  height: 100%;
  width: 100%; margin: 0; padding: 0; background: pink;  /* fallback for old browsers */
  background-color:black;}

.music-container {
  width:555px;
  height:400px;
  background-color:white;
  border: 1px solid white;
  border-radius:5px;
  box-shadow: 0px 15px 54px -12px rgba(94,97,120,1);
  position: absolute;
  top:0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;}


.playing-now {
  width:180px;
  height:175px;
  border: 1px solid transparent;
  border-radius:5px;
  background-size:cover;
  position: absolute;
  top:0;
  bottom: 130px;
  left: 0;
  right: 0;
  margin: auto;}

.playing-now:hover {
  transform:scale(1.01);
  cursor:pointer;}

.current-time {
  position: absolute;
  top:120px;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;}

.music-bar {
  padding: 0 3rem;}

progress {
  border: 0;
  color: #ED5483;
  height: 5px;
  width: 45%;
  -webkit-appearance: none;}

progress::-webkit-progress-value {
  background: #7f7f7f; 
  border-radius: 10px;}

progress::-webkit-progress-bar {
  height: 2.7px;
  background: #d8d8d8;
  border-radius: 10px;}

.progress-dot {
  width:4.5px;
  height:4.5px;
  border: 1px solid #7f7f7f;
  background-color:#7f7f7f;
  border-radius:50%;
  position: absolute;
  top:0;
  bottom: -117.5px;
  left: 0;
  right: 165px;
  margin: auto;}

.playing-bar:hover {
  cursor:pointer;}

.time {
  margin-top:265px;
  font-family:Helvetica, sans-serif;
  font-size:13px;
  color:#7f7f7f;}

.time-left {
  float:left; margin-left:138px;}

.time-right {
  float:right; margin-right:138px;}

.song-name {
  position: absolute;
  text-align:center;
  top:305px;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  font-weight:bold;
  font-family:Helvetica, sans-serif;}

.artist {
  position: absolute;
  text-align:center;
  top:330px;
  bottom: 0;
  left: 0;
  color:red;
  right: 0;
  margin: auto;
  font-family:Helvetica, sans-serif;}

.arrow {
  transform: scale(0.9);
  position: absolute;
  top: 375px;
  bottom: 0;
  left: 0;
  width:55px;
  right: 0;
  margin: auto;}

.arrow:hover {
  cursor:pointer;
  transform: scale(1);
  left:2px;}

.left-side-arrow {  
  transform: rotate(-19deg);
  width:15px;
  height:3px;
  background-color:#d8d8d8;
  border:2px;
  border-radius:7px;
  position: absolute;
  top:0;
  bottom: 0;
  left: 0px;
  right: 12px;
  margin: auto;}

.right-side-arrow {  
  transform: rotate(-340deg);
  width:15px;
  height:3px;
  background-color:#d8d8d8;
  border:2px;
  border-radius:7px;
  position: absolute;
  top:0.5px;
  bottom: 0;
  left: 13.5px;
  right: 0;
  margin: auto;}

.control-overlay {
  width:550px;
  max-height:119px;
  background-color:rgba(0,255,255,0.5);
  overflow-y: hidden;
  transition-property: all;
	transition-duration: .5s;
	transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
  border: 1px solid transparent;
  border-radius:5px;
  position:absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;}

.control-overlay.closed {
  max-height: 0;}

<div class="music-container">
  <div class="playing-now"></div>
  <div class="playing-time">
    <div class="time">
      <span class="time-left">0:24</span>
      <span class="time-right">-2:19</span>
    </div>
  </div>
  <div class="arrow">
    <div class="left-side-arrow"></div>
    <div class="right-side-arrow"></div>
  </div>
  <div class="control-overlay">
    
    <p>controls here</p>
    <br/>
    <p>controls here</p>
    
  </div>
</div>

Answer 1

在代码笔上:https://codepen.io/stevensonmt/pen/MGVqEW

HTML:

<div class="music-container">
  <div class="playing-now"></div>
  <div class="playing-time">
    <div class="time">
      <span class="time-left">0:24</span>
      <span class="time-right">-2:19</span>
    </div>
  </div>
  <input type="checkbox" id="toggle_controls" />

  <div class="control-overlay">

    <p>controls here</p>
    <br/>
    <p>controls here</p>

  </div>
  <label for="toggle_controls" onclick>
  <div class="arrow">
    <div class="left-side-arrow"></div>
    <div class="right-side-arrow"></div>
  </div>
  </label>
</div>

CSS:

html, body { 
  height: 100%;
  width: 100%; margin: 0; padding: 0; background: pink;  /* fallback for old browsers */
  background-color:black;}

.music-container {
  width:555px;
  height:400px;
  background-color:white;
  border: 1px solid white;
  border-radius:5px;
  box-shadow: 0px 15px 54px -12px rgba(94,97,120,1);
  position: absolute;
  top:0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;}


.playing-now {
  width:180px;
  height:175px;
  border: 1px solid transparent;
  border-radius:5px;
  background-size:cover;
  position: absolute;
  top:0;
  bottom: 130px;
  left: 0;
  right: 0;
  margin: auto;}

.playing-now:hover {
  transform:scale(1.01);
  cursor:pointer;}

.current-time {
  position: absolute;
  top:120px;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;}

.music-bar {
  padding: 0 3rem;}

progress {
  border: 0;
  color: #ED5483;
  height: 5px;
  width: 45%;
  -webkit-appearance: none;}

progress::-webkit-progress-value {
  background: #7f7f7f; 
  border-radius: 10px;}

progress::-webkit-progress-bar {
  height: 2.7px;
  background: #d8d8d8;
  border-radius: 10px;}

.progress-dot {
  width:4.5px;
  height:4.5px;
  border: 1px solid #7f7f7f;
  background-color:#7f7f7f;
  border-radius:50%;
  position: absolute;
  top:0;
  bottom: -117.5px;
  left: 0;
  right: 165px;
  margin: auto;}

.playing-bar:hover {
  cursor:pointer;}

.time {
  margin-top:265px;
  font-family:Helvetica, sans-serif;
  font-size:13px;
  color:#7f7f7f;}

.time-left {
  float:left; margin-left:138px;}

.time-right {
  float:right; margin-right:138px;}

.song-name {
  position: absolute;
  text-align:center;
  top:305px;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  font-weight:bold;
  font-family:Helvetica, sans-serif;}

.artist {
  position: absolute;
  text-align:center;
  top:330px;
  bottom: 0;
  left: 0;
  color:red;
  right: 0;
  margin: auto;
  font-family:Helvetica, sans-serif;}

.arrow {
  transform: scale(0.9);
  position: absolute;
  top: 375px;
  bottom: 0;
  left: 0;
  width:55px;
  right: 0;
  margin: auto;}

.arrow:hover {
  cursor:pointer;
  transform: scale(1);
  left:2px;}

.left-side-arrow {  
  transform: rotate(-19deg);
  width:15px;
  height:3px;
  background-color:#d8d8d8;
  border:2px;
  border-radius:7px;
  position: absolute;
  top:0;
  bottom: 0;
  left: 0px;
  right: 12px;
  margin: auto;}

.right-side-arrow {  
  transform: rotate(-340deg);
  width:15px;
  height:3px;
  background-color:#d8d8d8;
  border:2px;
  border-radius:7px;
  position: absolute;
  top:0.5px;
  bottom: 0;
  left: 13.5px;
  right: 0;
  margin: auto;}

.control-overlay {
  width:550px;
  max-height:119px;
  background-color:rgba(0,255,255,0.5);
  overflow-y: hidden;
  transition-property: all;
    transition-duration: .5s;
    transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
  border: 1px solid transparent;
  border-radius:5px;
  position:absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;}

.control-overlay.closed {
  max-height: 0;}

input[type="checkbox"]{
    display: none;
}
/* checked */
input[type=checkbox]:checked ~ .control-overlay {
   background: hsla(120, 80%, 50%, .8);
   max-height: 0;
}

input[type=checkbox]:checked ~ label {
   background: hsla(220, 80%, 50%, .8);
}