动画实现始终效果案例（动画的使用，居中的使用）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>时钟案例</title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}
			.clock {
				width: 300px;
				height: 300px;
				border: 10px solid #CCCCCC;
				/* border-radius: 160px; */
				/* 百分比参照元素的实际宽高 */
				border-radius: 50%;
				margin: 100px auto;
				position: relative;
			}

			/* 先设置共同的样式 */
			.line {
				width: 8px;
				height: 300px;
				background-color: #CCCCCC;
				position: absolute;
				left: 50%;
				/* 参照父元素 */
				top: 0;
				/* 参照元素本身 */
				transform: translate(-50%, 0);
			}
			.line1, .line4 {
				/* 统一针对线条1，4设置宽一些 */
				width: 10px;
			}
			.line2 {
				/* 要把之前的transform值也写一份，不然会有UI异常。 */
				transform: translate(-50%, 0) rotate(30deg);
			}
			.line3 {
				transform: translate(-50%, 0) rotate(60deg);
			}
			.line4 {
				transform: translate(-50%, 0) rotate(90deg);
			}
			.line5 {
				transform: translate(-50%, 0) rotate(120deg);
			}
			.line6 {
				transform: translate(-50%, 0) rotate(150deg);
			}

			.cover {
				width: 250px;
				height: 250px;
				border-radius: 50%;
				background-color: #fff;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
			}
			.hour {
				width: 6px;
				height: 80px;
				background-color: red;
				position: absolute;
				/* 定位 */
				left: 50%;
				/* 水平居中 */
				top: 50%;
				transform: translate(-50%, -100%);
				transform-origin: center bottom;
				/* 添加动画 */
				animation: clockAnimation 43200s linear infinite ;
			}
			.minute {
				width: 4px;
				height: 100px;
				background-color: green;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -100%);
				transform-origin: center bottom;
				/* 添加动画 */
				animation: clockAnimation 3600s linear infinite ;
			}
			.second {
				width: 2px;
				height: 120px;
				background-color: gray;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -100%);
				/* 设置旋转轴心 */
				transform-origin: center bottom;
				/* 添加动画 */
				animation: clockAnimation 60s linear infinite ;
				/* steps与animation-timing-function的其他属性冲突 */
				animation-timing-function: steps(60);
			}
			.center {
				width: 20px;
				height: 20px;
				background-color: #CCCCCC;
				position: absolute;
				left: 50%;
				top: 50%;
				border-radius: 10px;
				transform: translate(-50%, -50%);
			}
			/* 创建动画 */
			@keyframes clockAnimation {
				from {
					transform: translate(-50%, -100%) rotate(0deg);
				}
				to {
					transform: translate(-50%, -100%) rotate(360deg);
				}
			}
		</style>
	</head>
	<body>
		<div class="clock">
			<div class="line line1"></div>
			<div class="line line2"></div>
			<div class="line line3"></div>
			<div class="line line4"></div>
			<div class="line line5"></div>
			<div class="line line6"></div>
			<!-- 覆盖物 -->
			<div class="cover"></div>
			<div class="hour"></div>
			<div class="minute"></div>
			<div class="second"></div>
			<div class="center"></div>
		</div>
		</div>
	</body>
</html>
动画实现始终效果案例（动画的使用，居中的使用）

猜你喜欢
