当前位置 CSS模版园 >> 酷炫特效 >> css+div实现时钟效果

css+div实现时钟效果

css+div实现时钟效果

css+div实现时钟效果,无js代码

.clock{
	width:200px;
	height:200px;
	border-radius:100%;
	position:relative;
	background-image:url(images/bg.jpg);
	background-size:100%;
}

.line{
	height:4px;
	background-color:red;
	margin-left:-15px;
	margin-top:-2px;
}
.original{
	position:absolute;
	left:50%;
	top:50%;
	width:1px;
	height:1px;
	float:left;

}
.clock>.point{
	position:absolute;
	top:50%;
	left:50%;
	margin-left:-5px;
	margin-top:-6px;
	width:3px;
	height:3px;
	padding:5px;
	background-color:red;
	border-radius:13px;
}
.original.seconds{
	-webkit-animation:rotate_origin 60s linear infinite;
	animation:rotate_origin 60s linear infinite;
}
.original.seconds>.line{
	background-color:red;
	width:100px;
	height:2px;
}
.original.minutes{
	-webkit-animation:rotate_origin 3600s linear infinite;
	animation:rotate_origin 3600s linear infinite;
}
.original.minutes>.line{
	background-color:blue;
	width:80px;
	height:3px;
}
.original.hours{
	-webkit-animation:rotate_origin 86400s linear infinite;
	animation:rotate_origin 86400s linear infinite;
}
.original.hours>.line{
	width:60px;
	background-color:green;
}
@-webkit-keyframes rotate_origin{
	from{
		-webkit-transform:rotateZ(0deg);
	}
	to{
		-webkit-transform:rotateZ(360deg);
	}
}
@keyframes rotate_origin{
	from{
		transform:rotateZ(0deg);
	}
	to{
		transform:rotateZ(360deg);
	}
}

html:

<div class="clock">
  <div class="original hours">
    <div class="line"></div>
  </div>
  <div class="original minutes">
    <div class="line"></div>
  </div>
  <div class="original seconds">
    <div class="line"></div>
  </div>
  <div class="point"></div>
</div>

声明本站所有资源仅供学习与参考,请勿用于商业用途。转载请注明来自:cssteach.com

原文http://cssteach.com/html/show-13-58.html

推荐模版

热门网站模版

猜您喜欢

热门网站模版

热门网站模版

评论

若文章内容有错误或无法下载,请在回复中说明(可无需登录,直接评论)