CSS:文字に輝きを走らせる×コメディ
コント；キラキラネームを深掘りし過ぎるギャル
※コードは下部へ
キラキラネームって規制されたらしいね
なー。宇多田ヒカルとか、どするん？
(え？)
女性タレントでもひかりちゃんとかいたよね
(あー、完全に間違えてんな。 漢字を当て字にして無理やり読ませるのがNGって事なんだけど、 キラキラした名前がダメだって思ってんな)
友倉くん、どしたん？
いや、大丈夫・・・・ (ややこしい事に巻き込まれんのも嫌だしな)
キンパもヤバくね？
あー、一応海外のもんだからいいんじゃね？
あぶねー
ウチらの推しメシ、奪わんでもろて
でもさー、もしかしたら、のぞみ、とかもダメなん？
(えぇー)
それなー、意味的にキラキラしかないわ。 新幹線どするん？
なー。 でもー、そう考えるとさ、人間みなキラキラしたものに惹かれる説ない？
説ある。 それダメってたらさ、どんよりした名前しかあるくない？
なー。 キラキラがダメならさー、エモとかチルもダメなんかな？
いや、それはギリセーフじゃね？
じゃ増えるかもね、エモ美とかチル子とか
(えーダサっ)
コード解説編
せめて文字だけでもキラキラさせてー
できるよ。 背景の白を移動させろし
テキストにキラリと光を走らせる方法です。文字にグラデーションカラーをつける時と、基本手は同じ発想で、背景を作り、そこに白のラインを作ってアミメーションというさせる。背景を文字で切り抜くという内容です。
htmlは普通に・・・・
例ではHOLIDAYと書いておきますが、まあ、普通にテキストを指定します。
HTML
< p class=“headTitle”>
HOLIDAYS
</p >
background-clipで切り抜いた色をアニメーションさせる
まず文字色は背景でつくリます。 linear-gradientで斜めに設定し、基本の文字色と光に見せる白を配置します。背景の幅を広く取り、白の部分を見せないようにします。
animationではshinerと名づけていますが、これをbackground-positionで移動させるようにします。
CSS
.headTitle{
font-size: 1.2rem;
background-image: linear-gradient(
70deg,
#5a2b15 45%, /* font color */
#FFF 45%,
#5a2b15 55% /* font color */
);
background-size: 500% 100%;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
animation: shine 3s infinite;
}
@keyframes shine {
0% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
なるー
あーやっぱキラキラしか勝たんわー
ねー、子供できたら、名前、どする？笑
んー、なんとかギリ頑張って男子なら「来人-らいと」とか
ええやん
(あー、それもう絶対受理されないだろ)
Share Me !