WEB制作

【css】positionで要素を中央に配置する方法

https://arts-factory.net/position/

HTML


<div class=”box”>
<p>テキストテキスト</p>
<img src=xxx.jpg width=”600″ height=”400″ alt=”xxxx” >
</div>

CSS

.box{
    position: relative;
}
.box p{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

【css】cssでいろんなアニメーションをつける

https://b-risk.jp/blog/2021/01/anim-reference/

@keyframeでアニメーション

https://into-the-program.com/slidein/

テキストにマスクをしてアニメーションする

https://b-risk.jp/blog/2019/10/text-mask-animation/

パスのマスクサンプルジェネレーター

https://ics-creative.github.io/210604_mask_variations/css_sample.html

マスクの使い方

https://github.com/ics-creative/210604_mask_variations/blob/main/canvas_sample.html