css做指针表 |css3媒体查询自动生成

//样式定义
.pointer_container{
	position: relative;
	width: 200px;
	height: 200px;
	border-radius: 50%;
	background-image: linear-gradient(to bottom, #000 50%, #fff 50%), 
linear-gradient(to right, #000 50%, #fff 50%);
	background-position: center center;
	background-size: 2px 60%, 60% 2px;
	background-repeat: no-repeat;
}
.pointer{
	position: absolute;
	top: 50%;
	left: 50%;
	transform-origin: left center;
	transform: translate(-50%, -50%);
	height: 50px;
	width: 2.5px;
	background-color: #f00;
	border-top-left-radius: 50% 50%;
	border-top-right-radius: 50% 50%;
}

如上代码所示，大家定义了两个CSS类，分别是.pointer_container和.pointer。其中，.pointer_container是用来容纳指针的主要容器，大家设置了其为圆形，并使用了两个渐变背景图案，实现了指针表的所有刻度线。

而.pointer类则是定义了指针本身的样式，大家设置它为绝对定位，并使用transform属性实现了指针的旋转效果。

通过以上CSS样式的定义，大家就成功制作出了一款简单实用的指针表。在实际使用中，大家可以根据需求增加更多的样式定义，以达到更好的效果。