CSSの「animationと@keyframes」を使って2画像のY軸回転で入替、画像内にテキストを表示するアニメーション


ご訪問
ありがとう
ございます
2020-1-4 Retouch
補足説明
1.初期画面は全て画像で表示
回転後(裏)は、枠だけが画像で字はテキストデータ。
2.「Stop / Start 」のタグは、上部にしか設置出来ない。
3.幅や高さは、インラインCSSで記述して下さい。
スタイルシートの記述では、反映されない。
4.画像は透過型だと回転したとき、裏になった画像やテキストの一部が裏映りする。
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<section class="anima_box_all" style="width:320px; height:250px;"> <label for="toggle">Stop / Start </label> <input id="toggle" type="checkbox"> <div class="wp_anima" style="height:210px; position:relative;"> <div class="front"> <img src="https:image/css_anima/anima1_front.gif" > </div> <div class="back"> <img src="https:image/css_anima/frame_1.gif"> <p class="txt1_style1">ご訪問<br>ありがとう<br>ございます</p> <p class="txt1_style2">2020-1-4 Retouch</p> </div> </div> </secton> |
- Line No
- 説明
- 1
- チェック・ボックスとアニメ本体を含めた全体枠の指定。
- 2-3
- Stop / Start チェック・ボックスの設定。
- 4-12
- アニメーション本体の設置、相対配置の指定
5-7行目:最初に表示される画像の設置
8-12行目:2つ目に表示される画像とテキストの設置
- 13
- アニメーション本体の終了タグ
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
.anima_box_all input:checked+div{ animation-play-state: paused; } .wp_anima { max-width:310px; animation: action_anima 12s linear infinite; transform-style: preserve-3d; } @keyframes action_anima { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .front, .back { position: absolute; max-width:310px; top: 0; left: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .back { transform: rotateY(180deg); } .txt1_style1{ position: absolute; top: 35px; text-align:center; line-height:1.5em; letter-spacing:0.25em; font-size: 1.75em; font-weight: bold; color: #0000ff; width: 100%;} .txt1_style2{ position:absolute; top:155px; left:130px; } |