STUDY_html_012_C.html
<html> <meta charset="UTF-8"> <style> スタイル </style> <div style="position:fixed;top:0;left:20;"> <div class="クロック"> <div class="テンポ"></div> <div class="マル"></div> </div> <div><img src="metronome.svg"style="width:102%; text-align:center;margin-top:50px;"></div> </div> </html>
<style>
.テンポ{position:absolute;
width:24px;
height:24px;
left:-9.4px;
top:91px;
background-image:url(CENTER.svg);
background-position:center bottom;
background-size:contain;
background-repeat:no-repeat;}
.マル{position:absolute;
width:12px;
height:12px;
left:-3.8px;
top:170px;
background-image:url(maru.svg);
background-position:center bottom;
background-size:contain;
background-repeat:no-repeat;}
.クロック{width:6px;
height:180px;
position:absolute;
top:84px;
left:49.8%;
background-color:#999999;
transform-origin:center bottom;
animation:shake 2s infinite;}
.レングス{max-width:400px;}
</style>
<style>
.テンポ{position:absolute;
width:24px;
height:24px;
left:-9.4px;
top:91px;
background-image:url(CENTER.svg);
background-position:center bottom;
background-size:contain;
background-repeat:no-repeat;}
.マル{position:absolute;
width:12px;
height:12px;
left:-3.8px;
top:170px;
background-image:url(maru.svg);
background-position:center bottom;
background-size:contain;
background-repeat:no-repeat;}
.クロック{width:6px;
height:180px;
position:absolute;
top:84px;
left:49.8%;
background-color:#999999;
transform-origin:center bottom;
animation:shake 1.5s infinite;}
@keyframes shake{0%{transform:scaleY(1.0)rotate(-25deg);}
50%{transform:scaleY(1.0)rotate(25deg);}
100%{transform:scaleY(1.0)rotate(-25deg);}}
.レングス{max-width:400px;}
</style>
sample_STUDY_html_012_C [ sample_STUDY_html_012_C_1.html \ sample_STUDY_html_012_C_2.html ] 
サンプル・ダウンロード 
