CSSのみで背景や画像などをキラキラ光らせるアニメーションサンプル集

2020-10-01CSS アニメーション サンプル集,CSS

CSSのみで背景や画像などをキラキラ光らせるアニメーションサンプル集

CSSのみで文字や画像などをドットタイプの星などでキラキラ光らせるアニメーションサンプル集です。

CSS関連のページは作成していますが、幾分センスと根気が足りないのでイマイチ感は多めにみてやってください。

背景をキラキラ光らせるCSSアニメーションサンプル

See the Pen CSS Pixel Stars Animation (background) by yochans (@yochans) on CodePen.

<div class="container">
  <div class="stars">
    <span class="s"></span>
    <span class="s"></span>
    <span class="s"></span>
    <span class="s"></span>
    <span class="s"></span>
    <span class="m"></span>
    <span class="m"></span>
    <span class="m"></span>
    <span class="m"></span>
    <span class="m"></span>
    <span class="l"></span>
    <span class="l"></span>
    <span class="l"></span>
    <span class="l"></span>
    <span class="l"></span>
   </div>
  <p>ONE NOTES</p>
  <p>背景をキラキラ光らせてみた</p>
</div>

<p><a href="https://1-notes.com/css-slide-animation/" target="_blank" rel="noopener">https://1-notes.com/css-slide-animation/</a></p>
body{
  padding:0;
  margin:0;
}

.container{
  display:flex;
  justify-content: center;
  align-items: center;
  position:relative;
  width: 100%;
  height:250px;
  background:#0c0c33;
  overflow: hidden;
}
.container p{
  padding:20px;
  margin:0;
  font-size:40px;
  font-weight: bold;
  color:#FFF;
}

.stars{
  position: absolute;
  left:0;
  top:0;
  width: 100%;
  height:100%;
}

.stars span{
  position:relative;
}

.stars span:before {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  
  /*星のサイズ調節*/
  transform:scale(0.20);
}

.stars span.s:before{
  
   /*20px 20pxが中央*/
  box-shadow: 20px 20px #FFFFFF;
}

.stars span.m:before{
  box-shadow: 
    /*1段目*/
    20px 10px #FFF176,
    /*2段目*/
    10px 20px #FFF176,
    20px 20px #FFFFFF,
    30px 20px #FFF176,
    /*3段目*/
    20px 30px #FFF176
}

.stars span.l:before{
  box-shadow: 
    /*0段目*/
    20px  0px #FDD835,
    /*1段目*/
    20px 10px #FFF176,
    /*2段目*/
     0px 20px #FDD835,
    10px 20px #FFF176,
    20px 20px #FFFFFF,
    30px 20px #FFF176,
    40px 20px #FDD835,
    /*3段目*/
    20px 30px #FFF176,
    /*4段目*/
    20px 40px #FDD835;
}


 /*
星の位置とアニメーション指定
最初の秒はアニメーション時間、2つ目は開始までの時間
*/
.stars span:nth-child(1){left:10%; top:10%; animation: star-anim 8s 0s infinite;}
.stars span:nth-child(2){left:80%; top:20%; animation: star-anim 6s 1s infinite;}
.stars span:nth-child(3){left:60%; top:40%; animation: star-anim 5s 2s infinite;}
.stars span:nth-child(4){left:20%; top:70%; animation: star-anim 7s 3s infinite;}
.stars span:nth-child(5){left:80%; top:80%; animation: star-anim 7s 4s infinite;}

.stars span:nth-child(6){left:40%; top:10%; animation: star-anim 4s 0s infinite;}
.stars span:nth-child(7){left:10%; top:50%; animation: star-anim 7s 1s infinite;}
.stars span:nth-child(8){left:50%; top:50%; animation: star-anim 8s 2s infinite;}
.stars span:nth-child(9){left:90%; top:90%; animation: star-anim 5s 3s infinite;}
.stars span:nth-child(10){left:80%; top:50%; animation: star-anim 7s 4s infinite;}

.stars span:nth-child(11){left:90%; top:10%; animation: star-anim 5s 0s infinite;}
.stars span:nth-child(12){left:10%; top:80%; animation: star-anim 6s 1s infinite;}
.stars span:nth-child(13){left:30%; top:20%; animation: star-anim 7s 2s infinite;}
.stars span:nth-child(14){left:60%; top:90%; animation: star-anim 8s 3s infinite;}
.stars span:nth-child(15){left:80%; top:50%; animation: star-anim 7s 4s infinite;}

/*アニメーションキーフレーム*/
@keyframes star-anim {
  0% {opacity:0;}
  5% {opacity:1;}
  10% {opacity:0;}
  55% {opacity:0;}
  60% {opacity:1;}
  95% {opacity:0;}
  100% {opacity:1;}
}

星のサイズを3段階作らなければ半分以下で済んだのですが、極力シンプルな構造にしようとしたらこうなりました。

星のデザインや色を変更するには

星のデザインや色を変更するにはbox-shadowの値を変更します。

透過部分は記述していませんが、サンプル5×5のドット絵風で作られています。

□□□□□
□□□□□
□□□□□
□□□□□
□□□□□

横0px 縦0pxが左上端で、横10px 縦0pxが最上段の左から2マス目、横40px縦40pxが右下端になります。

画像をキラキラ光らせるCSSアニメーションサンプル

See the Pen CSS Pixel Stars Animation by yochans (@yochans) on CodePen.

<div class="container">
<img src="https://1-notes.com/images/slime-button.svg" border="0" />
  <div class="stars">
    <span class="s"></span>
    <span class="s"></span>
    <span class="s"></span>
    <span class="s"></span>
    <span class="s"></span>
    <span class="m"></span>
    <span class="m"></span>
    <span class="m"></span>
    <span class="m"></span>
    <span class="m"></span>
    <span class="l"></span>
    <span class="l"></span>
    <span class="l"></span>
    <span class="l"></span>
    <span class="l"></span>
  </div>
</div>

背景とした最初のサンプルと違い、画像の上に表示するためimgタグは.starsの手前に記述しています。

親要素である.containerのサイズに合わせる形で画像を表示しており、次に続くstarsの要素はposition: absoluteで独立しているので画像の上に表示されています。

基本的に殆どは、背景の場合と同じで、違いがある部分は以下の通り、全コードはcodePenのエディタよりどうぞ。

.container{
  position:relative;
  width: 250px;
  height:250px;
  background:#191970;
}

.container img{
  width: 100%;
  height:100%;
}

文字をキラキラさせるCSSアニメーションサンプル

See the Pen CSS Pixel Stars Animation (text) by yochans (@yochans) on CodePen.

ちょっとフォントのデザインに頼り過ぎなのと、入れ子の扱いが雑過ぎた感はあります。

実際に使う場合はもうひとつ、親要素を挟まないと外のコンテンツに影響してしまうと思います。

上のサンプルコードと概ね同じです。
HTML・CSSコードはcodePenのエディタよりどうぞ。

CSS アニメーション サンプル集,CSS

Posted by Yousuke.U