SSブログ

CSS:連続写真を重ねてX'masイルミネーションやスライドショーをブログで表示したい。② [パソコン]

htmlとcssファイルはU-page+、画像はブログにUPした画像でスライドショー表示しました。


htmlファイルの例
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>CSSでイルミネーション・html画像指定</title>
    <link rel="stylesheet" href="irumi5.css" type="text/css">
  </head>
<body>
<br> <br> CSS スライドショーのテスト<br> <br>
⑤イルミネーション・html画像指定
<DIV class="photo-illumination5">
 <IMG  src="http://suikasuship.blog.so-net.ne.jp/_images/blog/_82a/suikasuship/m_IMG_8335.JPG">
 <IMG  src="http://suikasuship.blog.so-net.ne.jp/_images/blog/_82a/suikasuship/m_IMG_8390-e8fc7.JPG">
 <IMG  src="http://suikasuship.blog.so-net.ne.jp/_images/blog/_82a/suikasuship/m_IMG_8260-752ae.JPG">
 <IMG  src="http://suikasuship.blog.so-net.ne.jp/_images/blog/_82a/suikasuship/m_IMG_1075-7ff11.JPG">
 <IMG  src="http://suikasuship.blog.so-net.ne.jp/_images/blog/_82a/suikasuship/m_IMG_8390-e8fc7.JPG">
</DIV>
</body>


ブログ画像ファイルのURL調査方法

  ①画像をブログに登録する。(下書き保存)


  ②公開してるページから画像を開きサムネイルを表示させる。PhotoList.png
 

③サムネイルを右クリックでプロパティを表示させる。property.png

  ④URLをコピーしてU-page+のhtmlに設定する。



CSSファイルの内容(irumi5.css


.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;
}


確認です。



nice!(1)  コメント(2) 
共通テーマ:旅行

nice! 1

コメント 2

kuwachan

ヘェ〜凄いです。
こんなこともできるのですね^ ^
by kuwachan (2017-08-30 18:00) 

スイカが好き

kuwachanさん
nice!とコメントありがとうございます。

良かったら使ってみてくださいな。(^。^)
少し手間がかかりますがブログに影響を与えないU-page+版にしました。
by スイカが好き (2017-08-30 20:59) 

コメントを書く

お名前:
URL:
コメント:
画像認証:
下の画像に表示されている文字を入力してください。

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。