どうも7noteです！光る文字やボタンの作り方
アニメーションをつけていろいろな要素をピカピカ光らせたい方へ。
文字やボタンをピカピカ光らせる方法を紹介。
ピカピカ光る文字の作り方
※過去の記事で作ったネオン文字を加工利用しています。
過去記事→ネオン風の文字を作る方法（無料フォントサイトも紹介）
index.html
<divclass="neon">NEON</div>style.css
body{background:#000;/* 背景色を黒に指定 */}.neon{color:#FFF;/* 文字色を白に変更 */font-size:50px;/* 文字サイズを50pxに指定 */font-family:Beon;/* ネオン風のフォントを指定(ダウンロードしたもの) */animation:flash1sinfinite;/* アニメーションflashを1秒ごとに繰り返す */}@keyframesflash{0%,100%{/* 明るく光るよう影を重ねる */text-shadow:0010px#fff,0020px#fff,0030px#fff,0040px#ff00de,0070px#ff00de,0080px#ff00de,00100px#ff00de,00150px#ff00de;}50%{/* 淡く光るよう影を重ねる */text-shadow:0010px#fff,0020px#fcfcfc,0030px#fcfcfc,0040px#fc00de;}}
ピカピカ光るボタンの作り方
index.html
<label><inputtype="button">push!</label>style.css
input{display:none;/* デフォルトのボタンを非表示にする */}label{color:#fff;/* 文字色を白に指定 */font-size:30px;/* 文字サイズを30pxに指定 */background:#f90;/* 背景色をオレンジに指定 */padding:10px20px;/* 余白を指定 */animation:flash1sinfinite;/* アニメーションflashを1秒ごとに繰り返す */}@keyframesflash{0%,100%{/* 明るく光るよう影を重ねる */box-shadow:0010px#ffc,0020px#ffc,0030px#ff9,0040px#ff6,0070px#fc6,0080px#f99,00100px#ff96,00150px#ff96;}50%{/* 淡く光るよう影を重ねる */box-shadow:0010px#fff,0020px#fff,0030px#ffc,0040px#ff9;}}
まとめ
・文字をピカピカ光らせるなら→text-shadow
・それ以外の要素をピカピカ光らせるなら→box-shadow
間違えないように気をつけてください。
おそまつ！
~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ