Мини-слайдер CSS

переключатели - ссылки псевдоэлемент :target

by Ksenia Polyakova

HTML

<div class="slider">
	<div class="slide--1" id="1">раз</div>
	<div class="slide--2" id="2">два</div>
	<div class="slide--3" id="3">три</div>
	<div>
	<a href="#1" class="link">раз</a>
	<a href="#2" class="link">два</a>
	<a href="#3" class="link">три</a>
</div>
</div>

CSS

.slider {
	width: 200px;
	height:100px;
}

.slide--1 {
	width:100%;
	height: 100%;
	background-color: red;
	display: none;
}
.slide--2 {
	width:100%;
	height: 100%;
	background-color: yellow;
	display: none;
}
.slide--3 {
	width:100%;
	height: 100%;
	background-color: green;
	display: none;
}

.link {
	display: inline-block;
}

.slide--1:target {
	display: block;
	animation: eye 2s ease-in-out;
}

.slide--2:target {
	display: block;
	animation: eye 2s ease-in-out;
}

.slide--3:target {
	display: block;
	animation: eye 2s ease-in-out;
}

@keyframes eye {
	0% {opacity:0;}
	100% {opacity:100%;}
}