practice

　　　　

<html>

<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Train One"rel="stylesheet">
<style>
body{background-color:#eeffee;}
div{position:fixed;
top:-30px;
left:0;
width:460px;
height:160px;
background:linear-gradient(-20deg,#eeffee 40%,#88d1b2 50%,#eeffee 60%);
text-align:center;
z-index:-10;}
p{position:absolute;
top:-30px;
left:160px;
stroke-width:0.2px;
font-family:"Train One";
font-size:40px;
color:#004400;
z-index:10;
text-shadow:2px 2px 3px #888888;
animation:アニメーション_1 4s infinite;}
@keyframes アニメーション_1{0%{transform:translateY(40px);
opacity:0;}
25%{transform:none;
opacity:1;}
50%{transform:translateY(100px)opacity:0;}
to{transform:translateY(20px);
opacity:0;}}
span{margin-top:100px;
font-family:"Train One";
font-size:28px;
color:#004400;
display:inline-block;
z-index:20;
text-shadow:2px 2px 3px #888888;
animation:アニメーション_2 4s infinite;}
@keyframes アニメーション_2{0%{transform:translateY(-20px);
opacity:0;}
50%{opacity:1;
transform:none;}
to{transform:translateY(20px);
opacity:0;}}
.ライン{position:absolute;
top:120px;
left:-10px;
width:480px;
background:linear-gradient(to right,#004400,#ffffff,#004400);
height:1px;
border:none;
z-index:30;}
.トライアングル{position:absolute;
top:100px;
left:230px;
font-size:10px;
color:#004400;
z-index:40;}
</style>

<p>STUDY</p>
<div>
<span style="animation-delay:0.3s">H</span>
<span style="animation-delay:0.35s">T</span>
<span style="animation-delay:0.4s">M</span>
<span style="animation-delay:0.45s">L</span>
<span style="animation-delay:0.5s"> </span>
<span style="animation-delay:0.55s">C</span>
<span style="animation-delay:0.6s">S</span>
<span style="animation-delay:0.65s">S</span>
<span style="animation-delay:0.7s"> </span>
<span style="animation-delay:0.75s">J</span>
<span style="animation-delay:0.8s">a</span>
<span style="animation-delay:0.85s">v</span>
<span style="animation-delay:0.9s">a</span>
<span style="animation-delay:0.95s">S</span>
<span style="animation-delay:1s">c</span>
<span style="animation-delay:1.05s">r</span>
<span style="animation-delay:1.2s">i</span>
<span style="animation-delay:1.25s">p</span>
<span style="animation-delay:1.3s">t</span>
</div>
<hr class="ライン">
<p class="トライアングル">▼</p>

</html>