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:-
0 Comment(s)