CSSで好きなXmasイルミネーション

今まで撮ったXmasの写真を使ってCSSで遊んでいます。ブログは最初にサイトマップを作成して、気の向いたところから作成してます。スライドショーやツリーの瞬き、 街が輝くXmasの雰囲気はワクワクして好きです。

イルミネーション・スライドショー用のCSSソース

このブログで使用しているスライドショーCSSのソースです。
 
htmlで「photo-slideshow10」と「photo-illumination5」を使って
写真10枚と5枚指定のスライドショーが表現できます。

 

はてなブログにCSSを設定

 
管理画面の[デザイン]→[カスタマイズ]→[デザインCSS]でCSS編集画面を開き
下記の緑の文字のCSSを追加します。
 


スライドショータイプのhtml例


photo-slideshow10 で写真を指定します。
 
 <div class="photo-slideshow10">
  <img src="写真1" />
  <img src="写真2" />
  <img src="写真3" />
  <img src="写真4" />
  <img src="写真5" />
  <img src="写真6" />
  <img src="写真7" />
  <img src="写真8" />
  <img src="写真9" />
  <img src="写真10" />
</div>

点滅タイプのhtml例

photo-illumination5 で写真を指定します。
 
 <div class="photo-illumination5">
  <img src="写真1" />
  <img src="写真2" />
  <img src="写真3" />
  <img src="写真4" />
  <img src="写真5" />
 </div>

写真の枚数が足りない時

同じ写真を2回指定することで数合わせをしています。

例:写真が3枚しか無い時

<div class="photo-illumination5">
<img src="写真1" />
<img src="写真3" />
<img src="写真2" />
<img src="写真1" />
<img src="写真3" />
</div>

スライドショータイプのCSS 

写真がフェードアウトしてスライドショー
<!-- フェードインスライドショー10枚 -->
photo-slideshow10 { /* CSS クラス名 photo-slideshow8 */
height: 800px; /* 表示したい大きさ */
margin: 0 0 -120 0; /* 上右下左のマージンをまとめて指定する */
max-width: 100%; /* 領域の幅の最大値 */
position: relative; /* ボックスの配置方法 relative=相対位置への配置 */
width: 800px; /* 表示したい大きさ、height と合わせる */
}
.photo-slideshow10 img { /* CSS クラス名 photo-slideshow8 の 子孫セレクタ = img */
animation: slide10 100s infinite; /* アニメーションプロパティ一括指定 空白で区切る */
/* animation-name、 animation-duration、 animation-timing-function、*/
/* animation-delay、animation-iteration-count、 animation-direction */
/* animation-name アニメーション名 = slide10 */
/* animation-duratio アニメーション一回分の時間の長さを指定 秒 */
/* animation-iteration-count 繰り返し回数を指定 infinite=無限 */
-webkit-animation: slide10 100s infinite; /* -webkit- ベンダープレフィックス Chrome、Safari指令 */
height: auto; /* 領域の高さを指定 自動設定 */
max-width: 100%; /* 領域の幅の最大値 */
opacity: 0; /* 要素の透明度を指定 0.0(完全に透明) */
position: absolute; /* ボックスの配置方法 絶対位置=画像を全て重ねる */
}
/* @keyframes = アニメーションのキーフレーム (通過点)で制御する */
@keyframes slide10 { /* animation-name slide10 のキーフレームを指定 */
0% {opacity:0} /* opacity(要素透明度指定) 0.0(完全に透明)~1.0(完全に不透明) */
10% {opacity:1}
25% {opacity:0}
}
/* -webkit- = ベンダープレフィックス Chrome、Safari指令 */
@-webkit-keyframes slide10 {
0% {opacity:0} /* opacity(要素透明度指定) 0.0(完全に透明)~1.0(完全に不透明)*/
10% {opacity:1}
25% {opacity:0}
}
/* 各画像のアニメーションの開始時間をずらす */
/* CSS クラス名 photo-slideshow8 */
/* E:nth-of-type(n) 、疑似クラス、 n番目のその種類の要素にスタイルを適用する */
.photo-slideshow10 img:nth-of-type(1) {
animation-delay: 0s;
-webkit-animation-delay: 0s;
}
.photo-slideshow10 img:nth-of-type(1) {animation-delay: 0s; -webkit-animation-delay: 0s;}
.photo-slideshow10 img:nth-of-type(2) {animation-delay: 10s; -webkit-animation-delay: 10s;}
.photo-slideshow10 img:nth-of-type(3) {animation-delay: 20s; -webkit-animation-delay: 20s;}
.photo-slideshow10 img:nth-of-type(4) {animation-delay: 30s; -webkit-animation-delay: 30s;}
.photo-slideshow10 img:nth-of-type(5) {animation-delay: 40s; -webkit-animation-delay: 40s;}
.photo-slideshow10 img:nth-of-type(6) {animation-delay: 50s; -webkit-animation-delay: 50s;}
.photo-slideshow10 img:nth-of-type(7) {animation-delay: 60s; -webkit-animation-delay: 60s;}
.photo-slideshow10 img:nth-of-type(8) {animation-delay: 70s; -webkit-animation-delay: 70s;}
.photo-slideshow10 img:nth-of-type(9) {animation-delay: 80s; -webkit-animation-delay: 80s;}
.photo-slideshow10 img:nth-of-type(10) {animation-delay: 90s; -webkit-animation-delay: 90s;}

点滅タイプのCSS

写真が一瞬で切り変わるためクリスマスツリー点滅が表現できます。
<!--点滅スライドショー5枚 -->
.photo-illumination5 { /* CSS クラス名 photo-illumination5 */
height: 800px; /* 表示したい大きさ */
margin: 0 0 -120 0; /* 上右下左のマージンをまとめて指定する */
max-width: 100%; /* 領域の幅の最大値 */
position: relative; /* ボックスの配置方法 relative=相対位置への配置 */
width: 800px; /* 表示したい大きさ、height と合わせる */
}
.photo-illumination5 img { /* CSS クラス名 photo-illumination5 の 子孫セレクタ = img */
animation: illum5show 10s infinite; /* アニメーションプロパティ一括指定 空白で区切る */
/* animation-name、 animation-duration、 animation-timing-function、*/
/* animation-delay、animation-iteration-count、 animation-direction */
/* animation-name アニメーション名 = illum5show */
/* animation-duratio アニメーション一回分の時間の長さを指定 秒 */
/* animation-iteration-count 繰り返し回数を指定 infinite=無限 */
-webkit-animation: illum5show 10s infinite; /* -webkit- ベンダープレフィックス Chrome、Safari指令 */
height: auto; /* 領域の高さを指定 自動設定 */
max-width: 100%; /* 領域の幅の最大値 */
opacity: 0; /* 要素の透明度を指定 0.0(完全に透明) */
position: absolute; /* ボックスの配置方法 絶対位置=画像を全て重ねる */
}
/* @keyframes = アニメーションのキーフレーム (通過点)で制御する */
@keyframes illum5show { /* animation-name illum5show のキーフレームを指定 */
0% {opacity:0} /* opacity(要素透明度指定) 0.0(完全に透明)~1.0(完全に不透明) */
0.2% {opacity:1} /* 5個の画像なので1つ20%で不透明にする */
20% {opacity:1}
20.2% {opacity:0}
}
/* -webkit- = ベンダープレフィックス Chrome、Safari指令 */
@-webkit-keyframes illum5show {
0% {opacity:0} /* opacity(要素透明度指定) 0.0(完全に透明)~1.0(完全に不透明)*/
0.2% {opacity:1} /* 5個の画像なので1つ20%で不透明にする */
20% {opacity:1}
20.2% {opacity:0}
}
/* 各画像のアニメーションの開始時間をずらす */
/* CSS クラス名 photo-illumination5 */
/* E:nth-of-type(n) 、疑似クラス、 n番目のその種類の要素にスタイルを適用する */
.photo-illumination5 img:nth-of-type(1) { animation-delay: 0s; -webkit-animation-delay: 0s;}
.photo-illumination5 img:nth-of-type(2) { animation-delay: 2s; -webkit-animation-delay: 2s;}
.photo-illumination5 img:nth-of-type(3) { animation-delay: 4s; -webkit-animation-delay: 4s;}
.photo-illumination5 img:nth-of-type(4) { animation-delay: 6s; -webkit-animation-delay: 6s;}
.photo-illumination5 img:nth-of-type(5) { animation-delay: 8s; -webkit-animation-delay: 8s;}

注意:

CSSはインターネットを調べながら作成したものです、使い方が間違えていたらすみません。

 

f:id:neko_suika:20181126085019j:plain