CSS3 HTML5网页动画时钟特效

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<title>网页时钟特效
</title>
<style>
	body{
		background: #575757;
	}
	div{
		position: absolute;
	}
	#clock{
		left: 50%;
		top: 50%;
		margin-left: -100px;
		margin-top: -100px;
	}
	#clock-outer{
		left: 0;
		top: 0;
		width: 164px;
		height: 164px;
		border: 18px solid #fff;
		border-radius: 200px;
		-webkit-animation: outer 1.4s;
	}
	#clock-inner{
		left: 18px;
		top: 18px;
		width: 164px;
		height: 165px;
		border-radius: 164px;
		background: #e3e3e3;
		box-shadow: inset 0 10px 10px #aaa, 0 40px 45px #000;
		-webkit-transform-origin: center center;
		-webkit-animation: inner 1.8s;
	}
	#clock-center{
		left: 90px;
		top: 90px;
		width: 20px;
		height: 20px;
		border-radius: 20px;
		background: #fff;
		box-shadow: 0 3px 3px #aaa;
		-webkit-animation: outer 1.4s;
	}
	.pointer{
		background: #fff;
		box-shadow: 0 0 5px #ddd;
		-webkit-transform-origin: top center;
		top: 100px;
	}
	.hour{
		width: 12px;
		height: 55px;
		left: 94px;
		border-radius: 14px;
		-webkit-transform: rotate(270deg);
	}
	.minute{
		width: 10px;
		height: 70px;
		left: 95px;
		border-radius: 10px;
		-webkit-transform: rotate(180deg);
	}
	.shadow{
		opacity: 0;
	}
	#pointer-hour-1{
		-webkit-animation: hour 2.5s;
	}
	#pointer-hour-2{
		-webkit-animation: hour-shadow .5s 1.4s;
	}
	#pointer-hour-3{
		-webkit-animation: hour-shadow .5s 1.6s;
	}
	#pointer-hour-4{
		-webkit-animation: hour-shadow .5s 1.8s;
	}
	#pointer-minute-1{
		-webkit-animation: minute 2.4s;
	}
	#pointer-minute-2{
		-webkit-animation: minute-shadow .5s 1.4s;
	}
	#pointer-minute-3{
		-webkit-animation: minute-shadow .5s 1.6s;
	}
	#pointer-minute-4{
		-webkit-animation: minute-shadow .5s 1.8s;
	}
	@-webkit-keyframes inner{
		0%{
			-webkit-transform: scale(0);
			opacity: 0;
		}
		70%{
			-webkit-transform: scale(1.05);
		}
		80%{
			-webkit-transform: scale(0.9);
		}
		100%{
			-webkit-transform: scale(1);
			opacity: 1;
		}
	}
	@-webkit-keyframes outer{
		0%{
			opacity: 0;
		}
		50%{
			opacity: 0;
		}
		100%{
			opacity: 1;
		}
	}
	@-webkit-keyframes center{
		0%{
			opacity: 0;
		}
		80%{
			opacity: 0;
		}
		100%{
			opacity: 1;
		}
	}
	@-webkit-keyframes hour{
		0%{
			opacity: 0;
		}
		70%{
			opacity: 0;
			-webkit-transform: rotate(0);
		}
		100%{
			opacity: 1;
			-webkit-transform: rotate(270deg);
		}
	}
	@-webkit-keyframes minute{
		0%{
			opacity: 0;
		}
		70%{
			opacity: 0;
			-webkit-transform: rotate(0);
		}
		100%{
			opacity: 1;
			-webkit-transform: rotate(180deg);
		}
	}
	@-webkit-keyframes hour-shadow{
		0%{
			opacity: 0;
			-webkit-transform: rotate(0);
		}
		100%{
			opacity: 1;
			-webkit-transform: rotate(270deg);
		}
	}
	@-webkit-keyframes minute-shadow{
		0%{
			opacity: 0;
			-webkit-transform: rotate(0);
		}
		100%{
			opacity: 1;
			-webkit-transform: rotate(180deg);
		}
	}
</style>
<div id="clock">
	<div id="clock-inner">
	</div>
	<div id="clock-outer">
	</div>
	<div id="pointer-hour-4" class="pointer hour shadow">
	</div>
	<div id="pointer-hour-3" class="pointer hour shadow">
	</div>
	<div id="pointer-hour-2" class="pointer hour shadow">
	</div>
	<div id="pointer-hour-1" class="pointer hour">
	</div>
	<div id="pointer-minute-4" class="pointer minute shadow">
	</div>
	<div id="pointer-minute-3" class="pointer minute shadow">
	</div>
	<div id="pointer-minute-2" class="pointer minute shadow">
	</div>
	<div id="pointer-minute-1" class="pointer minute">
	</div>
	<div id="clock-center">
	</div>
</div>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

CSS3 HTML5网页动画时钟特效

分类

CSS3

描述

一款运行于HTML5环境的CSS3动画时钟特效，希望大家喜欢这个效果，本效果在网页打开的时候才可以看到，会看到一个时钟伴随动画慢慢出现，不过测试发现，这个CSS3网页时钟并不能随系统时间走动，只是一个动画样式，学习CSS3技术有用。