So-net無料ブログ作成

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


確認です。



ダイエット中、7月末に84Kgでスタートして 現在体重81.4Kg  年末までに80Kgが目標

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:
コメント:
画像認証:
下の画像に表示されている文字を入力してください。