お知らせ

事例ー１　画像のY軸回転

2019-11-26 追加

テーマ設定はデフォルトなので、カスタマイズ・メニューの「ＣＳＳ追加と置換」を参照してください。

ステップ１：画像を挿入する。

ステップ２：画像にクラスを付ける（タグ編集）。
ここでは、class="nc3_logo" 　です。

ステップ３：デフォルトテーマの style.css に以下を追記する。
（サーバーのファイル・マネージャー）。

.nc3_logo {
  display: inline-block;
  animation: nc3_w205 6s linear infinite;}
@keyframes nc3_w205 {
  0%   { transform: rotateY(0deg); }
  100% { transform: rotateY(360deg); }
}
/* ３行目 nc3_w205 は任意名、@keyframes で使う。
          6s は６秒で回転 */
 

事例ー２　２つの画像入れ替えてY軸回転、裏面でテキスト表示

2019-12-20 追加

＊＊＊＊＊　現在、編集・テスト中　＊＊＊＊＊

１．ボックスの中に２つの画像を挿入し、ボックスと画像にクラスを設定。
　　クラス名は任意です、この事例に添った名前で説明

１）ボックス名：img_anima_nc3_logo_front_back"

２）画像のクラス名：挿入すると多くのクラスや設定が表示されるが、気にしないでクラス名の先頭に「任意のクラス名」を入れる。（２、４行目）

ＨＴＭＬ（アニメーション本体）

<div class="img_anima_nc3_logo_front_back ">
  <img class="img_anima_nc3_logo_back
    <!-- 以降にNC3が挿入するクラスや設定、ＵＲＬが入る --> />
  <img class="img_anima_nc3_logo_front
    <!-- 以降にNC3が挿入するクラスや設定、ＵＲＬが入る --> />
 <p class="img_anima_nc3_logo_front"  <!-- テキスト挿入と装飾 -->
   style="position: absolute; top: 260px; text-align: center;
   font-size: 1.75em; font-weight: bold; color: blue;
   width: 100%;">ご訪問&nbsp;感謝 !</p>
</div>
ＮＣ３ロゴ訪問感謝

ご訪問 感謝 !

 

ＣＳＳ（アニメーション本体）

.img_anima_nc3_logo_front_back {
  width:205px;
  height:350px;
  animation: img_anima_nc3_logo_front_back 8s linear infinite;
  transform-style: preserve-3d;
  animation-delay: 1.5s;
/*  animation-iteration-count: 5; */
}
@keyframes img_anima_nc3_logo_front_back {
  0%   { transform: rotateY(0deg); }
  100% { transform: rotateY(360deg); }
}
.img_anima_nc3_logo_front, .img_anima_nc3_logo_back {
  position: absolute;
  top: 0;
  left: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.img_anima_nc3_logo_front {
  transform: rotateY(180deg);
}
.img_anima_nc3_logo_front_back:hover {
  animation-play-state: paused;
}

アニメーションの「停止・再開」トグル・ボタンを入れる場合。

アニメーションの「停止と再開」は、一般的には「JavaScript」を使いますが、ＣＳＳで簡単に出来る方法を見つけたので紹介します。任意のクラス名でボックスを作り、下記の位置にアニメ本体のＨＴＭＬを入れだけです。

ＨＴＭＬ

<div class="kn_anima_box>
  <label for="toggle">停止・再開&nbsp;&nbsp;</label>
  <input id="toggle" type="checkbox" />
  <!-- ＊＊＊　アニメーション本体のＨＴＭＬを入れる　＊＊＊ -->
</div>

ＣＳＳ

.kn_anima_box input:checked+div{
  animation-play-state: paused;
}