STUDY_html_004_D.html
<html> <style> スタイル </style> <div class="タイトル表示"> <p class="下に移動"></p> <p class="HTML">HTML</p> <p class="CSS">CSS</p> <p>JavaScript</p> </div> </html>
<style>
.タイトル表示{font-family:Verdana,Geneva,sans-serif;
font-size:100px;
font-weight:bold;
text-align:center;
color:#456789;
text-shadow:5px 5px 10px #abcdef;}
.HTML{color:green;
font-weight:bold;
text-shadow:5px 5px 10px greenyellow;}
.CSS{color:red;
font-weight:bold;
text-shadow:5px 5px 10px gold;}
.下に移動{animation:下に移動 7s cubic-bezier(0.5,1.5,0.5,1.5)infinite;}
@keyframes 下に移動{0%{margin-top:-500px;}
5%{margin-top:450px;}
10%{margin-top:400px;}
15%{margin-top:350px;}
20%{margin-top:300px;}
25%{margin-top:250px;}
30%{margin-top:200px;}
35%{margin-top:150px;}
40%{margin-top:100px;}
45%{margin-top:50px;}
50%{margin-top:0px;}
55%{margin-top:-50px;}
60%{margin-top:-100px;}
65%{margin-top:-150px;}
70%{margin-top:-200px;}
75%{margin-top:-250px;}
80%{margin-top:300px;}
85%{margin-top:-350px;}
90%{margin-top:-400px;}
95%{margin-top:-450px;}
100%{margin-top:-500px;}}
</style>
・・・JavaScriptは使われていません
sample_STUDY_html_004_D.pdf 
サンプル・ダウンロード 
