JavaScriptを使わずにCSSだけでスライドショーを実現する

Codepenを見ていたところ、CSSだけでスライドショーを実現しているコードがあったので、備忘録としてまとめ。

今回作ったスライドショーは「Responsive CSS Image Slider」のものを参考にしています。

作ったもの

今回は以下の様なものを作った。シンプルな感じのスライドショーです。

f:id:toumasuxp:20191030223608g:plain

コード

<div id="slider"> <div id="slider--inner"> <div id="slider__black" class="slider__child">BLACK</div> <div id="slider__green" class="slider__child">GREEN</div> <div id="slider__red" class="slider__child">RED</div> </div> </div>

body {
margin:0;
padding:0;
}
#slider {
margin:100px auto;
/* ここのサイズを変えたら、スライドショーのサイズが変わる */
width: 600px;
height: 400px;
overflow: hidden;
}
@keyframes slidy {
0% {left: 0%;}
33% {left: 0%;}
66% {left: -100%;}
100% {left: -200%;}
}
#slider--inner {
position: relative;
width: 300%;
left: 0;
margin: 0;
animation: 8s slidy infinite;
}
.slider__child {
width: 33.3%;
height: 300px;
line-height: 300px;
float: left;
color: #fff;
font-size: 64px;
font-weight: 700;
font-family: "メイリオ", sans-serif;
box-sizing: border-box;
text-align: center;
}
#slider__black{
background: #333;
}
#slider__green {
background: #55bb55;
}
#slider__red {
background: #cc4554;
}

ポイント解説

ReratedPosts

htmlのheadでみかけるhrefって何なの?