回転寿司のサイトを作ってみよう！
以下の内容をHTMLへ。
以下の内容を、style.cssへペーストし、リンクする。
* {
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%);
}
}
この記事は役に立ちましたか？
もし参考になりましたら、下記のボタンで教えてください。