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

Demo

● ● ● ● ● ● ●

HTML&CSS

HTMLindex.htmldownload

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

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

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

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

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

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

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

CSSstyle.cssdownload

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

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

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

	0%{
		color: #ccc;
	}

	10%{
		color: #333;
	}

	14%{
		color: #333;
	}

	21%{
		color: #ccc;
	}

	22%{
		color: #ccc;
	}

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