phone

<style>
.cutephone {
position: relative;
width: 283px;
height: 500px;
margin: auto;
border: 14px #F2D5E6 solid;
border-top-width: 60px;
border-bottom-width: 60px;
border-radius: 36px;
}

.cutephone:before {
content: "";
display: block;
width: 60px;
height: 5px;
position: absolute;
top: -30px;
left: 50%;
transform: translate(-50%, -50%);
background: #DBB4CB;
border-radius: 10px;
}

.cutephone:after {
content: "";
display: block;
width: 35px;
height: 35px;
position: absolute;
left: 50%;
bottom: -65px;
transform: translate(-50%, -50%);
background: #F2D5E6;
border-radius: 50%;
box-shadow: inset 13px 0px 6px -10px #DBB4CBAD, inset -13px 0px 6px -10px #DBB4CBAD, inset 0px 13px 6px -10px #DBB4CBAD, inset 0px -13px 6px -10px #DBB4CBAD;
}

.cutephone .screen {
width: 255px;
height: 380px;
background: #fff;
box-shadow: inset 11px 0px 6px -10px #42424260, inset -11px 0px 6px -10px #42424260, inset 0px 11px 6px -10px #42424260, inset 0px -11px 6px -10px #42424260;
}

.lines {
position: absolute;
left: 0;
top: 0;
width: 255px;
height: 380px;
pointer-events: none;
z-index: 300;
opacity: 0.05;
}

.lines:before {
content: '';
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
pointer-events: none;
background: linear-gradient(to bottom, transparent 20%, rgba(0, 0, 0, .5) 51%);
background-size: 100% 4px;
will-change: background, background-size; animation: scanlines 0.2s linear infinite;
}

@keyframes scanlines {
from {
background: linear-gradient(to bottom, transparent 10%, rgba(0, 0, 0, .5) 51%); background-size: 100% 4px; }
to {
background: linear-gradient(to bottom, rgba(0, 0, 0, .5) 50%, transparent 51%);
background-size: 100% 4px;
}
}
@media only screen and (max-width: 600px);
{
</style>
</head>

<body>
<div class="cutephone">
<div class="screen">
<div class="lines"></div>
</div>
</div>

<script>
function waithide()
{
var obj = document.getElementById("lockscreen");
obj.style.opacity = '0';
window.setTimeout(
function removethis()
{
obj.style.display='none';
}, 300);
}
</script>
</body>