###前提・実現したいこと
CSSのみでスライドショーを実現させたいのですが、うまく行きません。
画像の上に乗っているテキストも同じようにスライドショーにしたいです。
何がうまくいかない原因なのかを教えていただきたいです。
html
1 <div class="mainPhoto"> 2 <p>違<span>いのわかる</span>大人<span>の</span>ヘアサロン</p> 3 <div class="mainshow"> 4 <img src="<?php echo get_template_directory_uri(); ?>/img/main2.jpg" width="960" height="457" alt="" class="slideA"/> 5 <img src="<?php echo get_template_directory_uri(); ?>/img/main_2.jpg" width="960" height="457" alt="" class="slideB"/> 6 </div> 7 </div>
css
1main .mainPhoto{ 2display: block; 3margin: 0 auto; 4width: 100%; 5height: auto; 6max-width: 960px; 7position: relative; 8} 9.mainPhoto p { 10display: inline-block; 11position: absolute; 12top: 20px; 13left: 20px; 14font-family:"Tsukushi A Round Gothic","筑紫A丸ゴシック"; 15font-weight:lighter; 16font-size: 3.6rem; 17text-shadow: 180 0 5px #edf8ff, 190 0 10px #edf8ff, 200 0 15px #edf8ff, 210 0 20px #edf8ff, 220 0 25px #edf8ff, 230 0 30px #edf8ff, 240 0 35px #edf8ff, 250 0 40px #edf8ff, 260 0 45px #edf8ff, 270 0 50px #edf8ff; 28} 29.mainPhoto span { 30font-size: 2.0rem; 31} 32main .mainPhoto{ 33 display: block; 34 margin: 0 auto; 35 width: 100%; 36 height: auto; 37 max-width: 960px; 38 position: relative; 39} 40.mainshow { 41 position:relative; 42} 43.mainshow img { 44 animation-name: album; 45 -webkit-animation-name: album; 46 animation-duration: 10s; 47 -webkit-animation-duration: 10s; 48 animation-iteration-count: infinite; 49 -webkit-animation-iteration-count: infinite; 50 opacity: 0; 51} 52.mainshow .slideA { 53 display: block; 54 margin: 0 auto; 55} 56.mainshow .slideB { 57 position: absolute; 58 top: 0; 59} 60 61@keyframes album { 62 0% { 63 opacity: 0; 64 } 65 66 12.5% { 67 opacity: 1; 68 } 69 70 37.5% { 71 opacity: 1; 72 } 73 50% { 74 opacity: 0; 75 } 76 } 77 78.mainshow img { 79 animation-name: album; 80 animation-duration: 10s; 81 animation-iteration-count: infinite; 82 opacity: 0; 83} 84 85.mainshow .slide2 { 86 animation-delay:5s; 87}
よろしくお願い致します。
回答1件
あなたの回答
tips
プレビュー