<div class="wrap">
<a href="#show" class="modal-open">Click To Show</a>
<div class="overlay" id="show">
<div class="modal">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 560 280" preserveAspectRatio="true">
<line id="svg_3" fill="none" stroke="#000000" stroke-width="2" x1="2.0" y1="2.0" x2="558" y2="2.0"/>
<line id="svg_4" fill="none" stroke="#000000" stroke-width="2" x1="558" y1="278" x2="558" y2="2.0"/>
<line id="svg_2" fill="none" stroke="#000000" stroke-width="2" x1="2.0" y1="278" x2="558" y2="278"/>
<line id="svg_5" fill="none" stroke="#000000" stroke-width="2" x1="2.0" y1="2.0" x2="2.0" y2="278"/>
</svg>
<div class="modal-inner">
<a href="#" class="modal-close" title="Close Modal">X</a>
<h3>Modal Title</h3>
</div>
</div>
</div>
</div>
@import url(https://fonts.googleapis.com/css?family=Cantarell:400,400italic,700italic,700);
@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css);
* {
padding:0;
margin:0;
position:relative;
box-sizing:border-box;
}
html {
height:100%;
min-height:100%;
}
body {
height:100%;
min-height:100%;
font-family: 'Cantarell', sans-serif;
font-size: 14px;
background: radial-gradient(ellipse at center, rgba(2,162,239,1) 0%,rgba(3,106,179,1) 100%);
color:#424242;
}
.wrap {
height:100%;
top:0px;
}
svg {
width:560px;
position:relative;
height:280px;
margin:0 auto;
display:block;
}
svg line {
stroke-width:2px;
stroke:rgba(2,162,239,1);
}
svg #svg_2 {
stroke-dasharray: 1680;
stroke-dashoffset: 1680;
}
svg #svg_4 {
stroke-dasharray: 1680;
stroke-dashoffset: -280;
}
svg #svg_3 {
stroke-dasharray: 1680;
stroke-dashoffset: -580;
}
svg #svg_5 {
stroke-dasharray: 1680;
stroke-dashoffset: -280;
}
@keyframes anim-dash {
90% {
stroke:rgba(2,162,239,1);
}
100% {
stroke:#ffffff;
stroke-dashoffset: 0;
opacity:1;
}
}
.overlay {
background:rgba(0,0,0,.5);
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
opacity:0;
z-index:-999;
}
.modal {
position:absolute;
width:560px;
height:280px;
top:50%;
left:50%;
transform:translate(-100%,-40%);
}
.modal-inner {
position:absolute;
top:3px;
left:3px;
width:554px;
height:274px;
background:rgba(255,255,255,1);
opacity:0;
}
.modal-close {
float:right;
z-index:+2;
color:#424242;
margin:5px 5px 0 0;
font-size:20px;
font-weight:bold;
text-decoration:none;
text-align:center;
line-height:20px;
height:20px;
width:20px;
}
.modal-inner h3 {
display:block;
text-align:center;
font-size:22px;
padding:20px 20px 10px 20px;
}
.overlay:target .modal, .overlay:target {
animation:display .6s forwards;
z-index:auto;
}
.overlay:target .modal svg line{
animation: anim-dash .6s forwards;
animation-delay:.6s;
}
.overlay:target .modal .modal-inner {
animation:display .6s forwards;
animation-delay:1s;
}
@keyframes display {
to {
opacity:1;
}
}
a.modal-open {
display:block;
padding:20px;
color:#424242;
font-weight:bold;
margin:0 auto;
transform:translateY(100%);
width:200px;
background:#e0e0e0;
border-radius:2px;
text-align:center;
text-decoration:none;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.