記事一覧
文字（打ち込み）をキラリと光らせる（HTML、CSS）
文字（打ち込み）をキラリと光らせる（HTML、CSS）
この記事は2022年10月に公開しました。
内容が今と違う場合があります。
内容が今と違う場合があります。
目次
文字をキラリと光らせる
手順
background-clip を使います。background-color で文字の色を、background-image で光を作り、光の大きさと位置を動かします。③と④は光が動くので、画像はその途中の1場面です。
動きは、デモページで確かめられます。
①背景で光を作成
②文字を打ち込む
③背景を移動、変化させる
④背景を文字でマスクする
コード
④の形のコードです。
HTML
<div class="demo-box">
<div class="demo-text">IMG-FLOW</div>
</div>CSS
.demo-box{
display: flex;
justify-content: center;
background-color: #000;
}
.demo-text{
color: transparent;
background-color: #306bb1;
background-image: radial-gradient(circle, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 75%);
background-repeat: no-repeat;
background-size: 0em 0em;
background-position: 0% 0%;
-webkit-background-clip: text;
background-clip: text;
animation-name: demo_kirari;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
padding: 10px;
}
@keyframes demo_kirari{
0% {
background-size: 0em 0em;
background-position: 0% 50%;
}
50% {
background-size: 2em 2em;
}
100% {
background-size: 0em 0em;
background-position: 100% 50%;
}
}あとがき
打ち込んだ文字を光らせる手順を、4つに分けて紹介しました。
次の3つを組み合わせています。
次の3つを組み合わせています。
- color: transparent と background-color
- 文字そのものを透明にして、background-color の色を文字の色として見せます。
- background-image
- radial-gradient で白い光を作り、animation で大きさと位置を変えます。
- background-clip: text
- 背景を文字の形で切り抜きます。
background プロパティの使い方次第で、他にも面白いアニメーションを作れそうです。
IMG-flowで働くという選択
この記事を書いているIMG-flowは、大阪のWeb制作会社です。
どんな人と、どんな進め方で仕事をしているのかは、採用ページにまとめています。
クリエイター採用を見る
どんな人と、どんな進め方で仕事をしているのかは、採用ページにまとめています。
この記事は参考になりましたか？
ご回答ありがとうございました
