ドットタイマー2　写真5枚用レスポンシブWebデザイン

Demo

● ● ● ● ●

HTML&CSS

HTMLindex.htmldownload

<span class="slide_show_timer_dot2_5">●</span>

<span class="slide_show_timer_dot2_5">●</span>

<span class="slide_show_timer_dot2_5">●</span>

<span class="slide_show_timer_dot2_5">●</span>

<span class="slide_show_timer_dot2_5">●</span>

CSSstyle.cssdownload

.slide_show_timer_dot2_5{
	color: #ccc;
	font-size: 0.5rem;
	margin: 0 0.1rem;
	animation: slide_show_timer_dot2_5 30s 0s linear infinite;
}

/* アニメーションを時間差で開始する */
.slide_show_timer_dot2_5:nth-of-type(2){
	animation-delay: 6s;
}
.slide_show_timer_dot2_5:nth-of-type(3){
	animation-delay: 12s;
}
.slide_show_timer_dot2_5:nth-of-type(4){
	animation-delay: 18s;
}
.slide_show_timer_dot2_5:nth-of-type(5){
	animation-delay: 24s;
}

/* アニメーション */
@keyframes slide_show_timer_dot2_5{

	0%{
		color: #000;
	}

	19%{
		color: #000;
	}
	
	20%{
		color: #ccc;
	}
	
	100%{
		color: #ccc;
	}
}
© 2025 wayday