Python matplotlibを使って学ぶ統計処理 正規分布 新しいページはコチラ
提供: yonewiki
(→アニメーションマーカー) |
(→アニメーションマーカー) |
||
168行: | 168行: | ||
.marker-animation.active{ /*mraker-animation.activeというスタイルになると*/ | .marker-animation.active{ /*mraker-animation.activeというスタイルになると*/ | ||
background-position: -100% .5em; /*マーカー領域のまるまる1区画分の位置に背景領域を設定し、*/ | background-position: -100% .5em; /*マーカー領域のまるまる1区画分の位置に背景領域を設定し、*/ | ||
− | /* | + | /*更に背景高さ位置を上から0.5em(1emは文字1文字分の幅に相当なので、*/ |
− | /*文字半分くらい) | + | /*文字半分くらい)に設定、背景領域の下側が押し出される感じ */ |
} | } | ||
182行: | 182行: | ||
background-repeat: repeat-x; /*100%を超える領域も使うのでその部分はx方向に繰り返す*/ | background-repeat: repeat-x; /*100%を超える領域も使うのでその部分はx方向に繰り返す*/ | ||
background-size: 200% .8em; /*領域の大きさは横は2倍に 高さマーカー高さ幅は0.8emに*/ | background-size: 200% .8em; /*領域の大きさは横は2倍に 高さマーカー高さ幅は0.8emに*/ | ||
− | background-position: 0 .5em; /* | + | background-position: 0 .5em; /*背景の横位置は0に、上は0.5emに。この位置に戻そうとするような動きになる*/ |
transition: all 2s ease; /*動かす指定で違うところのpositionになっていると2秒かけて最後に指定した*/ | transition: all 2s ease; /*動かす指定で違うところのpositionになっていると2秒かけて最後に指定した*/ | ||
/*positionにする。*/ | /*positionにする。*/ | ||
294行: | 294行: | ||
</span> | </span> | ||
− | background-size: 200% 0. | + | background-size: 200% 0.1em |
− | background-position: 0px 0. | + | background-position: 0px 0.5em ← -100% 0.5em |
<span class="marker-animation3"> | <span class="marker-animation3"> | ||
ここにマーカーをつける文章をいれる | ここにマーカーをつける文章をいれる | ||
</span> | </span> |