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

在codepen上：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);
}

Answer 2

使用复选框和标签，检查是否选中了复选框的状态。用不透明度隐藏它。定位可能是这个例子的一个问题，但回答你的问题是可能的。单击箭头。 Fiddle希望这有帮助。

＆＃13;

＆＃13;

html, body { 
  height: 100%;
  width: 100%; margin: 0; padding: 0; background: pink;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to left, #ffdde1, pink);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to left, #ffdde1, pink); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */}

.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;
  z-index: 2;}

.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;}
  
  #slideUp{
    width: 60px;
    position: relative;
    top: 110px;
    z-index: 5;
    left: 85px;
    opacity: 0;
    cursor: pointer;
  }
  
  #slideUp:checked  + .arrow + .control-overlay {
    max-height: 0px;
  }
  
  
  
  
  

＆＃13;

<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="slideUp">
  
  <div class="arrow">
  <label for="slideUp"></label>
    <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>

＆＃13;

＆＃13;

＆＃13;