ですしおすし
回転寿司のサイトを作ってみよう！
以下の内容をHTMLへ。
|
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 |
<div class="slide"> <div class="slide-wrap top"> <ul> <li>画像</li> <li>画像</li> <li>画像</li> <li>画像</li> <li>画像</li> </ul> <ul> <li>画像</li> <li>画像</li> <li>画像</li> <li>画像</li> <li>画像</li> </ul> </div> <div class="slide-wrap bottom"> <ul> <li>画像</li> <li>画像</li> <li>画像</li> <li>画像</li> <li>画像</li> </ul> <ul> <li>画像</li> <li>画像</li> <li>画像</li> <li>画像</li> <li>画像</li> </ul> </div> </div> |
以下の内容を、style.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 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 |
* { margin: 0; padding: 0; } ul, li { list-style: none; } .slide { margin-top: 3px; } .slide-wrap { display: flex; } .slide-wrap.bottom { margin-top: 3px; justify-content: flex-end; } .slide-wrap ul { display: flex; } .slide-wrap.top ul:first-child { animation: slideTop 50s -25s linear infinite; } .slide-wrap.top ul:last-child { animation: slideTop2 50s linear infinite; } .slide-wrap.bottom ul:first-child { animation: slideBottom 50s linear infinite; } .slide-wrap.bottom ul:last-child { animation: slideBottom2 50s -25s linear infinite; } .slide-wrap li { /*width: 19.7436vw;*/ } .slide-wrap.top li { margin-right: 4px; } .slide-wrap.bottom li { margin-left: 4px; } @keyframes slideTop { 0% { transform: translateX(100%); } to { transform: translateX(-100%); } } @keyframes slideTop2 { 0% { transform: translateX(0%); } to { transform: translateX(-200%); } } @keyframes slideBottom { 0% { transform: translateX(0%); } to { transform: translateX(200%); } } @keyframes slideBottom2 { 0% { transform: translateX(-100%); } to { transform: translateX(100%); } } |
