メインイメージの周囲を、カップアイスが並んでいく。
【サンプル】https://wwweb.jp/sample/002/
HTMLとCSSを用意しCSSをリンクする。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>タイトルを入力</title>
</head>
<body>
</body>
</html>HTMLコード
<h1>タイトル</h1>
<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>
<p><img src="banner.jpg"></p>
<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>CSSコード
body{
text-align:center;
}
* {
margin: 0;
padding: 0;
}
ul,
li {
list-style: none;
}
img{width:50%;}
li>img{
width:300px;}
.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%);
}
}
</style>
この記事は役に立ちましたか？
もし参考になりましたら、下記のボタンで教えてください。