practice

　　　　

<html>

<meta charset="utf-8">
<style>
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700|Ruthie);
body{background:linear-gradient(0deg,rgba(255,255,255,1)0%,rgba(69,103,137,1)50%,rgba(18,52,86,1)100%);}
h1{position:absolute;
top:-30px;
left:76px;
font-family:"Ruthie";
font-size:180px;
line-height:370px;
margin:0;
color:#000000;
transition:color 1s 0.5s;}
h1:hover{color:#ffffff;
transition-delay:0s;}
span{position:absolute;
top:230px;
left:76px;
display:block;
font-family:"Bradley Hand";
font-weight:bold;
font-size:18px;}
span:hover{color:#ffffff;}
line{stroke-width:4;
stroke:#ffffff;
transition:all 0.4s ease-in-out;}
.スタディ{position:relative;
top:100px;
left:100px;
width:500px;
height:320px;
background-color:rgba(0,0,0,0);
color:#000000;
display:inline-block;
cursor:pointer;
box-shadow:inset 0 0 0 1px #123456;}
.スタディ:hover line{stroke-width:16;
transition-delay:0s;}
.スタディ:hover .ボックス_トップ{transform:translateX(-450px);}
.スタディ:hover .ボックス_ボトム{transform:translateX(450px);}
.スタディ:hover .ボックス_レフト{transform:translateY(450px);}
.スタディ:hover .ボックス_ライト{transform:translateY(-450px);}
.ボックス_トップ{stroke-dasharray:500 400;}
.ボックス_ボトム{stroke-dasharray:500 400;}
.ボックス_レフト{stroke-dasharray:500 220;}
.ボックス_ライト{stroke-dasharray:500 220;}
</style>

<div class="スタディ">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
<line class="ボックス_トップ"x1="0"y1="0"x2="1000"y2="0"/>
<line class="ボックス_ボトム"x1="500"y1="320"x2="-1000"y2="320"/>
<line class="ボックス_レフト"x1="0"y1="320"x2="0"y2="-1000"/>
<line class="ボックス_ライト"x1="500"y1="0"x2="500"y2="1000"/>
</svg>
<h1>Study</h1>
<span>HTML / CSS / JavaScript</span>
</div>

</html>