ポケモンゲットだぜ!
ポケモンずかん
https://zukan.pokemon.co.jp/
スライドショーを作ってみよう！
スタイルシートをリンクする
|
1 |
<link href="style.css" rel="stylesheet"> |
スライドショー
|
1 2 3 4 5 6 7 |
<div class="slider"> <div class="slider-inner"> <div class="slider-item"><img src="001.png"></div> <div class="slider-item"><img src="002.png"></div> <div class="slider-item"><img src="003.png"></div> </div> </div> |
スタイルシート
|
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 |
.slider { width: 300px; height: 200px; overflow: hidden; margin: 0 auto; } .slider-item { width: 300px; float: left; } img{ width:100%; } .slider-inner { width: 300%; animation: slider 10s infinite ease; } @keyframes slider { 0% { transform: translateX(0); } 33% { transform: translateX(-300px); } 66% { transform: translateX(-600px); } 100% { transform: translateX(0); } } |
素材を使う
● ダウンロードする
