← Contents

  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 ]    

サンプル・ダウンロード  

トップにもどるボタン