Hi all, Below is an example of slide screen using css.

HTML:-

  <input type="checkbox" id="opci" />
  <div class="baseM">
    <label for="opci" class="nombre"></label>
    <div class="nextSlide "></div>
    <span class="c pt"></span>
  </div>

CSS:-

body{
  background-color:#ECF0F1;
}
.nombre{
  cursor:pointer;
  color:#0b8cbc;
  font-size:1.4em;
  top:3px;
  right:10px;
  position:absolute;
}
.pt{
  color:white;
}
.nombre:before{
      content: "\2632";
      background:#ccc;
    border-radius: 30px;
    display: inline-block;
    height: 30px;
    margin: 5px 0 0;
    padding: 0 2px 3px;
    text-align: center;
    width: 30px;
    box-shadow:0 0 8px #333;
}
#opci{display:none;}
.nextSlide{
  color:white;
}
.baseM{
  overflow: hidden;
}
#opci ~ .baseM{
  transform:scale(1);
}
#opci:checked ~ .baseM .nombre{
  color:#fff;
}
#opci:checked ~ .baseM .nextSlide{
  animation: op-open 500ms cubic-bezier(0.405, 0.00, 0.165, 1.000);;
  width:100%;
  height:100%;
  top:0px;
  right:0px;
  border-radius: 0;
}
#opci ~ .baseM .nextSlide{
  animation: op-close 300ms cubic-bezier(0.405, 0.00, 0.165, 1.000);
  overflow: hidden;
  width:0px;
  height:0px;
}
.baseM{
  background-color:#fff;
  position:relative;
  height:280px;
  z-index:0;
}  
.nextSlide{
  position:absolute;
  top:20px;
  right:20px;
  border-radius: 50%;
  background:#0b8cbc;  
  z-index:-1;
}
@keyframes op-open {
    0%   {
      width:0px;
      height:0px;
      top:20px;
      right:20px;
    border-radius: 50%;
          }
    100% {
      width:1000px;
      height:1000px;
      top:-480px;
      right:-480px;
    border-radius: 50%;
          }
}
@keyframes op-close {
    0%   {
        width:100%;
        height:100%;
        top:0px;
        right:0px;
        border-radius: 0;
          }
    100% {
         width:0%;
        height:0%;
        top:20px;
        right:20px;
        border-radius: 0;
  }
}
.baseM{ 
  margin:4px;
  width:220px;
  font-size:1em;
  color:#828282;
  box-shadow: rgba(0,0,0,0.1) 0px 1px 3px;
}

Out put:-