Div用纯CSS向上滑动

Question

Is it possible with pure css to have the control overlay div slide up from the bottom once the arrow is clicked? I have a max height of 119px; so the overlay stops right below the numbers. I have added a transition and a .close property but I cant seem to toggle it to the arrow div. Can anyone give suggestions? Thanks.

 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

On 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

Use a checkbox and a label and check if the state of the checkbox is checked or not. Hide it with an opacity. Positioning might be an issue for this example, but to answer your question it is possible. Click on the arrow. Fiddle Hope this helps.

 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; } 

 <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>