Tv off

by ipoly

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div id='root' ng-app=''>
    
   
    <iframe id="kdmaincontainer" ng-class='{"logout-tv":turnOff}' src='http://www.qq.com'>
    </iframe>
    <div class="turn-off-line"></div>
    <div class="turn-off-dot"></div>
    <button class='btn' ng-class='{"btn-danger":turnOff,"btn-success":!turnOff}' ng-click='turnOff=!turnOff'>Toggle</button>
</div>

CSS

#root:after {
    content:'';
    display:block;
    background-color:#000;
    width:100vw;
    height:100vh;
}
button {position: absolute;top:0;}
#kdmaincontainer {
    background:#fff;
    position:absolute;
    top:0;
    left:0;
    width:100vw;
    height:100vw;
}
#kdmaincontainer.logout-tv {
    -webkit-animation:logoutTv .5s 1 forwards ease;
    -moz-animation:logoutTv .5s 1 forwards ease;
    animation:logoutTv .5s 1 forwards ease;
    top:0;
    left:0;
    position:absolute;
    width:100vw;
    height:100vh;
}
#kdmaincontainer.logout-tv~.turn-off-line {
    top:50%;
    left:0;
    width:100%;
    height:2px;
    background:#fff;
    opacity:0;
    z-index:1000;
    -webkit-animation:logoutTvLine .3s .35s 1 forwards ease;
    -moz-animation:logoutTvLine .3s .35s 1 forwards ease;
    animation:logoutTvLine .3s .35s 1 forwards ease;
    position:absolute;
}
#kdmaincontainer.logout-tv~.turn-off-line:after {
    content:"";
    display:block;
    margin:-3px auto 0;
    width:50%;
    height:6px;
    background:#fff;
    -webkit-border-radius:100%;
    -moz-border-radius:100%;
    border-radius:100%;
    box-shadow:0 0 20px 10px rgba(255, 255, 255, 0.6)
}
#kdmaincontainer.logout-tv~.turn-off-dot {
    top:50%;
    left:50%;
    background-color:#fff;
    -webkit-border-radius:20px;
    -moz-border-radius:20px;
    border-radius:20px;
    width:10px;
    height:10px;
    margin-top:-5px;
    -webkit-transform:scaleX(0) scaleY(0);
    -moz-transform:scaleX(0) scaleY(0);
    transform:scaleX(0) scaleY(0);
    -webkit-box-shadow:0 0 8px #fff;
    -moz-box-shadow:0 0 8px #fff;
    box-shadow:0 0 8px #fff;
    -webkit-animation:logoutTvDot .3s .6s 1 forwards ease;
    -moz-animation:logoutTvDot .3s .6s 1 forwards ease;
    animation:logoutTvDot .3s .6s 1 forwards ease;
    z-index:1000;
    position:absolute
}
@-webkit-keyframes logoutTv {
    0% {
        -webkit-transform:scaleX(1) scaleY(1)
    }
    40% {
        -webkit-transform:scaleX(2) scaleY(.0005)
  ...