纯css3实现动态钟表动画（若要时间准点，需要解注下面的js，并注释.second中前两行代码以同步动画）

最新推荐文章于 2024-04-27 21:35:02 发布
最新推荐文章于 2024-04-27 21:35:02 发布
阅读量241 收藏 1
点赞数 1
文章标签： css css3 animation html5 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40893095/article/details/106025006
版权

在这里插入图片描述

<!doctype html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="Generator" content="EditPlus®">
	<meta name="Author" content="">
	<meta name="Keywords" content="">
	<meta name="Description" content="">
	<!-- <link rel="stylesheet" href="css/public.css" /> -->
	<title>Document</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}

		ul li {
			list-style-type: none;
		}

		#watch {
			width: 540px;
			height: 540px;
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			margin: auto;
		}

		.shell {
			width: 500px;
			height: 500px;
			border-width: 20px;
			border-color: transparent #d2d8df #d2d8df;
			border-style: solid;
			border-radius: 50%;
			transform: rotate(45deg);
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			margin: auto;
			animation: rot1 0.8s 0.5s linear forwards;
			animation-timing-function: cubic-bezier(0.645, -0.18, 0.605, 1.36);
		}

		@keyframes rot1 {
			0% {
				transform: rotate(45deg);
			}

			100% {
				transform: rotate(315deg);
			}
		}

		.dial {
			width: 434px;
			height: 434px;
			border: 18px solid #373F4A;
			border-radius: 50%;
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			margin: auto;
		}

		.internal {
			width: 436px;
			height: 436px;
			background-color: #262C33;
			border-radius: 50%;
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			margin: auto;
		}

		.internal ul {
			width: 420px;
			height: 420px;
			border-radius: 50%;
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			margin: auto;
		}

		.internal ul li {
			width: 420px;
			height: 420px;
			border-radius: 50%;
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			margin: auto;
			opacity: 0;
		}

		.internal ul li:before {
			content: "";
			display: inline-block;
			width: 10px;
			height: 30px;
			background-color: #D3D4D5;
			border-radius: 10px;
			position: absolute;
			top: 0px;
			left: calc(50% - 5px);
		}

		.internal ul li:after {
			content: "";
			display: inline-block;
			width: 10px;
			height: 30px;
			background-color: #D3D4D5;
			border-radius: 10px;
			position: absolute;
			bottom: 0px;
			left: calc(50% - 5px);
		}

		@keyframes show {
			0% {
				opacity: 0;
			}

			100% {
				opacity: 1;
			}
		}

		.internal ul li:nth-child(1) {
			transform: rotate(30deg);
			animation: show 0.4s 250ms linear forwards;
		}

		.internal ul li:nth-child(2) {
			transform: rotate(60deg);
			animation: show 0.4s 500ms linear forwards;
		}

		.internal ul li:nth-child(3) {
			transform: rotate(90deg);
			animation: show 0.4s 750ms linear forwards;
		}

		.internal ul li:nth-child(4) {
			transform: rotate(120deg);
			animation: show 0.4s 1000ms linear forwards;
		}

		.internal ul li:nth-child(5) {
			transform: rotate(150deg);
			animation: show 0.4s 1250ms linear forwards;
		}

		.internal ul li:nth-child(6) {
			transform: rotate(180deg);
			animation: show 0.4s linear forwards;
		}

		.internal ul li span {
			display: block;
			width: 100%;
			height: 100%;
			position: absolute;
			opacity: 0;
		}

		.internal ul li span:before {
			content: "";
			display: inline-block;
			width: 9px;
			height: 9px;
			background-color: #D3D4D5;
			border-radius: 50%;
			position: absolute;
			bottom: 0px;
			left: calc(50% - 5px);
		}

		.internal ul li span:nth-child(1) {
			transform: rotate(6deg);
		}

		.internal ul li span:nth-child(2) {
			transform: rotate(12deg);
		}

		.internal ul li span:nth-child(3) {
			transform: rotate(18deg);
		}

		.internal ul li span:nth-child(4) {
			transform: rotate(24deg);
		}

		.internal ul li span:nth-child(5) {
			transform: rotate(186deg);
		}

		.internal ul li span:nth-child(6) {
			transform: rotate(192deg);
		}

		.internal ul li span:nth-child(7) {
			transform: rotate(198deg);
		}

		.internal ul li span:nth-child(8) {
			transform: rotate(204deg);
		}

		.internal ul li:nth-child(6) span:nth-child(1) {
			animation: show 0.4s 50ms linear forwards;
		}

		.internal ul li:nth-child(6) span:nth-child(5) {
			animation: show 0.4s 50ms linear forwards;
		}

		.internal ul li:nth-child(6) span:nth-child(2) {
			animation: show 0.4s 100ms linear forwards;
		}

		.internal ul li:nth-child(6) span:nth-child(6) {
			animation: show 0.4s 100ms linear forwards;
		}

		.internal ul li:nth-child(6) span:nth-child(3) {
			animation: show 0.4s 150ms linear forwards;
		}

		.internal ul li:nth-child(6) span:nth-child(7) {
			animation: show 0.4s 150ms linear forwards;
		}

		.internal ul li:nth-child(6) span:nth-child(4) {
			animation: show 0.4s 200ms linear forwards;
		}

		.internal ul li:nth-child(6) span:nth-child(8) {
			animation: show 0.4s 200ms linear forwards;
		}

		.internal ul li:nth-child(1) span:nth-child(1) {
			animation: show 0.4s 300ms linear forwards;
		}

		.internal ul li:nth-child(1) span:nth-child(5) {
			animation: show 0.4s 300ms linear forwards;
		}

		.internal ul li:nth-child(1) span:nth-child(2) {
			animation: show 0.4s 350ms linear forwards;
		}

		.internal ul li:nth-child(1) span:nth-child(6) {
			animation: show 0.4s 350ms linear forwards;
		}

		.internal ul li:nth-child(1) span:nth-child(3) {
			animation: show 0.4s 400ms linear forwards;
		}

		.internal ul li:nth-child(1) span:nth-child(7) {
			animation: show 0.4s 400ms linear forwards;
		}

		.internal ul li:nth-child(1) span:nth-child(4) {
			animation: show 0.4s 450ms linear forwards;
		}

		.internal ul li:nth-child(1) span:nth-child(8) {
			animation: show 0.4s 450ms linear forwards;
		}

		.internal ul li:nth-child(2) span:nth-child(1) {
			animation: show 0.4s 550ms linear forwards;
		}

		.internal ul li:nth-child(2) span:nth-child(5) {
			animation: show 0.4s 550ms linear forwards;
		}

		.internal ul li:nth-child(2) span:nth-child(2) {
			animation: show 0.4s 600ms linear forwards;
		}

		.internal ul li:nth-child(2) span:nth-child(6) {
			animation: show 0.4s 600ms linear forwards;
		}

		.internal ul li:nth-child(2) span:nth-child(3) {
			animation: show 0.4s 650ms linear forwards;
		}

		.internal ul li:nth-child(2) span:nth-child(7) {
			animation: show 0.4s 650ms linear forwards;
		}

		.internal ul li:nth-child(2) span:nth-child(4) {
			animation: show 0.4s 700ms linear forwards;
		}

		.internal ul li:nth-child(2) span:nth-child(8) {
			animation: show 0.4s 700ms linear forwards;
		}

		.internal ul li:nth-child(3) span:nth-child(1) {
			animation: show 0.4s 800ms linear forwards;
		}

		.internal ul li:nth-child(3) span:nth-child(5) {
			animation: show 0.4s 800ms linear forwards;
		}

		.internal ul li:nth-child(3) span:nth-child(2) {
			animation: show 0.4s 850ms linear forwards;
		}

		.internal ul li:nth-child(3) span:nth-child(6) {
			animation: show 0.4s 850ms linear forwards;
		}

		.internal ul li:nth-child(3) span:nth-child(3) {
			animation: show 0.4s 900ms linear forwards;
		}

		.internal ul li:nth-child(3) span:nth-child(7) {
			animation: show 0.4s 900ms linear forwards;
		}

		.internal ul li:nth-child(3) span:nth-child(4) {
			animation: show 0.4s 950ms linear forwards;
		}

		.internal ul li:nth-child(3) span:nth-child(8) {
			animation: show 0.4s 950ms linear forwards;
		}

		.internal ul li:nth-child(4) span:nth-child(1) {
			animation: show 0.4s 1050ms linear forwards;
		}

		.internal ul li:nth-child(4) span:nth-child(5) {
			animation: show 0.4s 1050ms linear forwards;
		}

		.internal ul li:nth-child(4) span:nth-child(2) {
			animation: show 0.4s 1100ms linear forwards;
		}

		.internal ul li:nth-child(4) span:nth-child(6) {
			animation: show 0.4s 1100ms linear forwards;
		}

		.internal ul li:nth-child(4) span:nth-child(3) {
			animation: show 0.4s 1150ms linear forwards;
		}

		.internal ul li:nth-child(4) span:nth-child(7) {
			animation: show 0.4s 1150ms linear forwards;
		}

		.internal ul li:nth-child(4) span:nth-child(4) {
			animation: show 0.4s 1200ms linear forwards;
		}

		.internal ul li:nth-child(4) span:nth-child(8) {
			animation: show 0.4s 1200ms linear forwards;
		}

		.internal ul li:nth-child(5) span:nth-child(1) {
			animation: show 0.4s 1300ms linear forwards;
		}

		.internal ul li:nth-child(5) span:nth-child(5) {
			animation: show 0.4s 1300ms linear forwards;
		}

		.internal ul li:nth-child(5) span:nth-child(2) {
			animation: show 0.4s 1350ms linear forwards;
		}

		.internal ul li:nth-child(5) span:nth-child(6) {
			animation: show 0.4s 1350ms linear forwards;
		}

		.internal ul li:nth-child(5) span:nth-child(3) {
			animation: show 0.4s 1400ms linear forwards;
		}

		.internal ul li:nth-child(5) span:nth-child(7) {
			animation: show 0.4s 1400ms linear forwards;
		}

		.internal ul li:nth-child(5) span:nth-child(4) {
			animation: show 0.4s 1450ms linear forwards;
		}

		.internal ul li:nth-child(5) span:nth-child(8) {
			animation: show 0.4s 1450ms linear forwards;
		}

		.hour,
		.minute,
		.second {
			width: 420px;
			height: 420px;
			border-radius: 50%;
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			margin: auto;
		}

		.tip1 {
			border-left: 7px solid transparent;
			border-right: 7px solid transparent;
			border-bottom: 15px solid #fff;
			position: absolute;
			top: 16px;
			left: 203px;
			animation: run1 0.8s 2300ms cubic-bezier(0.69, -0.06, 0.49, 1.4) forwards;
			transform: translateY(180px);
		}

		@keyframes run1 {
			0% {
				transform: translateY(180px);
			}

			100% {
				transform: translateY(0px);
			}
		}

		.pointer1 {
			background-color: #fff;
			width: 14px;
			height: 0px;
			position: absolute;
			bottom: 50%;
			left: 203px;
			border-top-left-radius: 2px;
			border-top-right-radius: 2px;
			animation: long1 0.8s 2300ms cubic-bezier(0.69, -0.06, 0.49, 1.4) forwards;
		}

		@keyframes long1 {
			0% {
				height: 0px;
			}

			100% {
				height: 180px;
			}
		}

		/*.hour{
				transform: rotate(-60deg);
				animation: spin1 43200s 3900ms linear infinite;
			}
			@keyframes spin1{
				0%{transform: rotate(-60deg);}
				100%{transform: rotate(300deg);}
			}*/
		.tip2 {
			border-left: 10px solid transparent;
			border-right: 10px solid transparent;
			border-bottom: 15px solid #fff;
			position: absolute;
			top: 66px;
			left: 200px;
			animation: run2 0.8s 1500ms cubic-bezier(0.69, -0.06, 0.49, 1.4) forwards;
			transform: translateY(130px);
		}

		@keyframes run2 {
			0% {
				transform: translateY(130px);
			}

			100% {
				transform: translateY(0px);
			}
		}

		.pointer2 {
			background-color: #fff;
			width: 20px;
			height: 0px;
			position: absolute;
			bottom: 50%;
			left: 200px;
			border-top-left-radius: 2px;
			border-top-right-radius: 2px;
			animation: long2 0.8s 1500ms cubic-bezier(0.69, -0.06, 0.49, 1.4) forwards;
		}

		@keyframes long2 {
			0% {
				height: 0px;
			}

			100% {
				height: 130px;
			}
		}

		/*
			.minute{
				transform: rotate(84deg);
				animation: spin2 3600s 3900ms linear infinite;
			}
			@keyframes spin2{
				0%{transform: rotate(84deg);}
				100%{transform: rotate(444deg);}
			}*/
		.pointer3-top {
			width: 10px;
			height: 0px;
			position: absolute;
			border-radius: 5px;
			background-color: #f16b41;
			bottom: 50%;
			left: 205px;
			animation: long3 0.8s 3100ms cubic-bezier(0.69, -0.06, 0.49, 1.4) forwards;
		}

		@keyframes long3 {
			0% {
				height: 0px;
			}

			100% {
				height: 190px;
			}
		}

		.pointer3-bottom {
			width: 10px;
			height: 0px;
			position: absolute;
			border-radius: 5px;
			background-color: #f16b41;
			top: 50%;
			left: 205px;
			animation: long4 0.8s 3100ms cubic-bezier(0.69, -0.06, 0.49, 1.4) forwards;
		}

		@keyframes long4 {
			0% {
				height: 0px;
			}

			100% {
				height: 70px;
			}
		}

		.circle {
			width: 34px;
			height: 34px;
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			margin: auto;
			border-radius: 50%;
			background-color: #f16b41;
		}

		.second {
		/*解注js需要把下面两行注释了， 不然会造成动画不同步*/
			animation: beat 60s 3900ms linear infinite forwards;
			transition: 0.4s;
			transition-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
		}

		@keyframes beat {
			0% {
				transform: rotate(0deg);
				animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
			}

			1.67% {
				transform: rotate(6deg);
				animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
			}

			3.34% {
				transform: rotate(12deg);
				animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
			}

			5.01% {
				transform: rotate(18deg);
				animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
			}

			6.68% {
				transform: rotate(24deg);
				animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
			}

			8.35% {
				transform: rotate(30deg);
				animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
			}

			10.2% {
				transform: rotate(36deg);
				animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
			}

			11.69% {
				transform: rotate(42deg);
				animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
			}

			13.36% {
				transform: rotate(48deg);
				animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
			}

			15.03% {
				transform: rotate(54deg);
				animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
			}

			16.70% {
				transform: rotate(60deg);
				animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
			}

			18.37% {
				transform: rotate(66deg);
				animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
			}

			20.04% {
				transform: rotate(72deg);
				animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
			}

			21.71% {
				transform: rotate(78deg);
				animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
			}

			23.38% {
				transform: rotate(84deg);
				animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
			}

			25.05% {
				transform: rotate(90deg);
				animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
			}

			26.72% {
				transform: rotate(96deg);
				animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
			}

			28.39% {
				transform: rotate(102deg);
				animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
			}

			30.06% {
				transform: rotate(108deg);
				animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
			}

			31.73% {
				transform: rotate(114deg);
				animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
			}

			33.40% {
				transform: rotate(120deg);
				animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
			}

			35.07% {
				transform: rotate(126deg);
				animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
			}

			36.74% {
				transform: rotate(132deg);
				animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
			}

			38.41% {
				transform: rotate(138deg);
				animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
			}

			40.08% {
				transform: rotate(144deg);
				animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
			}

			41.75% {
				transform: rotate(150deg);
				animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
			}

			43.42% {
				transform: rotate(156deg);
				animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
			}

			45.09% {
				transform: rotate(162deg);
				animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
			}

			46.76% {
				transform: rotate(168deg);
				animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
			}

			48.43% {
				transform: rotate(174deg);
				animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
			}

			50.1% {
				transform: rotate(180deg);
				animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
			}

			51.77% {
				transform: rotate(186deg);
				animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
			}

			53.44% {
				transform: rotate(192deg);
				animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
			}

			55.11% {
				transform: rotate(198deg);
				animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
			}

			56.78% {
				transform: rotate(204deg);
				animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
			}

			58.45% {
				transform: rotate(210deg);
				animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
			}

			60.12% {
				transform: rotate(216deg);
				animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
			}

			61.79% {
				transform: rotate(222deg);
				animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
			}

			63.46% {
				transform: rotate(228deg);
				animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
			}

			65.13% {
				transform: rotate(234deg);
				animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
			}

			66.80% {
				transform: rotate(240deg);
				animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
			}

			68.47% {
				transform: rotate(246deg);
				animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
			}

			70.14% {
				transform: rotate(252deg);
				animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
			}

			71.81% {
				transform: rotate(258deg);
				animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
			}

			73.48% {
				transform: rotate(264deg);
				animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
			}

			75.15% {
				transform: rotate(270deg);
				animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
			}

			76.82% {
				transform: rotate(276deg);
				animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
			}

			78.49% {
				transform: rotate(282deg);
				animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
			}

			80.16% {
				transform: rotate(288deg);
				animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
			}

			81.83% {
				transform: rotate(294deg);
				animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
			}

			83.50% {
				transform: rotate(300deg);
				animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
			}

			85.17% {
				transform: rotate(306deg);
				animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
			}

			86.84% {
				transform: rotate(312deg);
				animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
			}

			88.51% {
				transform: rotate(318deg);
				animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
			}

			90.18% {
				transform: rotate(324deg);
				animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
			}

			91.85% {
				transform: rotate(330deg);
				animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
			}

			93.52% {
				transform: rotate(336deg);
				animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
			}

			95.19% {
				transform: rotate(342deg);
				animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
			}

			96.86% {
				transform: rotate(348deg);
				animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
			}

			98.53% {
				transform: rotate(354deg);
				animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
			}

			100% {
				transform: rotate(360deg);
				animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
			}
		}
	</style>
</head>

<body>
	<div id="watch">
		<div class="shell"></div>
		<div class="dial">
			<div class="internal">
				<ul>
					<li>
						<span></span>
						<span></span>
						<span></span>
						<span></span>
						<span></span>
						<span></span>
						<span></span>
						<span></span>
					</li>
					<li>
						<span></span>
						<span></span>
						<span></span>
						<span></span>
						<span></span>
						<span></span>
						<span></span>
						<span></span>
					</li>
					<li>
						<span></span>
						<span></span>
						<span></span>
						<span></span>
						<span></span>
						<span></span>
						<span></span>
						<span></span>
					</li>
					<li>
						<span></span>
						<span></span>
						<span></span>
						<span></span>
						<span></span>
						<span></span>
						<span></span>
						<span></span>
					</li>
					<li>
						<span></span>
						<span></span>
						<span></span>
						<span></span>
						<span></span>
						<span></span>
						<span></span>
						<span></span>
					</li>
					<li>
						<span></span>
						<span></span>
						<span></span>
						<span></span>
						<span></span>
						<span></span>
						<span></span>
						<span></span>
					</li>
				</ul>
				<div class="minute">
					<div class="tip1"></div>
					<div class="pointer1"></div>
				</div>
				<div class="hour">
					<div class="tip2"></div>
					<div class="pointer2"></div>
				</div>
				<div class="second">
					<div class="pointer3-top"></div>
					<div class="circle"></div>
					<div class="pointer3-bottom"></div>
				</div>
			</div>
		</div>
	</div>
</body>
<script>
	// var Clockwise = document.getElementsByClassName("hour")[0],
	// 	MinuteHand = document.getElementsByClassName("minute")[0],
	// 	SecondHand = document.getElementsByClassName("second")[0];

		// var rotation = setInterval(function () {
		// 	var myDate = new Date();
		// 	Clockwise.style.transform = `rotateZ(${360 * myDate.getHours() / 24}deg)`;
		// 	MinuteHand.style.transform = `rotateZ(${360 * myDate.getMinutes() / 60}deg)`;
		// 	if(myDate.getSeconds() > 0){
		// 		SecondHand.style.transform = `rotateZ(${360 * myDate.getSeconds() / 60}deg)`;
		// 		SecondHand.style.transitionDuration = "0.4s";
		// 		SecondHand.style.transitionTimingFunction = "cubic-bezier(0, 1.95, 1, 0.65);";
		// 		// console.log(myDate.getSeconds());
		// 	}else {	
		// 		SecondHand.style.transform = `rotateZ(${360 * myDate.getSeconds() / 60}deg)`;
		// 		SecondHand.style.transition = "";
		// 		// console.log(myDate.getSeconds());
		// 	}
		// }, 10);
</script>

</html>
尽兴
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
纯CSS3实现汽车行驶动画.rar_纯CSS3实现汽车行驶动画
09-23
一款纯CSS3汽车行驶动画就非常逼真，汽车是用CSS绘制的，同样行驶动画也是CSS3动画特性实现的
css3实现时钟动画
仰望 星空的专栏
06-19 2630
用css3实现 时钟动画，背景是4张图片，做成时钟效果 效果图： 其中上面包括4张透明图：圆圈（90*90），时(30*30)，分(30*30)，秒(30*30) html代码： div id="clock" class="clock"> div id="hours" class="hours trans3600">div> div id="min
CSS3实现钟表特效
沐小侠
01-26 633
1. 时钟的动画效果其实就只有一种，就是指针旋转了。 圆为360deg，秒针每秒旋转6deg，分针每60秒旋转6deg, 时针每3600秒旋转6deg。
CSS3学习 second
Exist is true
05-16 761
今天是学习CSS3的第二天，今天天气不错，很晴朗。 之前学了选择器来进行插入文字什么的，就是before、after这样的选择器， 在这样的选择器上，可以进行文字的修饰。 Insert title here h2:before{ content:"COLUMN"; color:white; background-color:orange; font-family:'Comi
javascript 的动画效果（显示动态时间，动态图片，动态text，图片切换）
iteye_3270的博客
08-06 551
动漫效果展示 动漫效果展示 用鼠标单击这里一...
【第二篇】CSS选择器之基础选择器
Ethan's Blog
07-16 653
介绍CSS的基础选择器：id选择器，类选择器，标签选择器和通用选择器。以及基础选择器的优先级说明
2019情人节纯CSS实现动态精灵示爱浪漫动画特效代码.zip
07-11
纯CSS实现动态精灵示爱浪漫动画特效代码下载。一款纯CSS实现浪漫示爱特效动画，自适应手机移动端，简单实用。
纯CSS3实现发光动画按钮特效.rar_纯CSS3实现发光动画按钮特效
09-24
一款基于纯CSS3的发光按钮，按钮发光的颜色是随机的，这样一排...之前我们也介绍过不少样式很独特的CSS3按钮，比如纯CSS3 3D开关按钮、纯CSS3实现动感弹性按钮等，都非常不错，也有HTML5动画按钮，大家可以自己看看。
CSS3网页动画特效代码,纯css3实现碰碰车动画效果.rar
04-26
这份资源是一份CSS3网页动画特效代码，其中包含了纯CSS3实现的碰碰车动画效果。适用于对网页动画有兴趣的前端开发人员和设计师，以及想要为自己的网站增加一些动态效果的个人站长。 这份资源的使用场景非常广泛，...
纯CSS实现超炫酷网页动态加载中特效动画.zip
07-11
纯CSS实现超炫酷网页动态加载中特效动画代码下载。多个超酷Loading加载中CSS特效动画，可根据需要选择。
JavaScript牛刀小试，结合CSS3动画属性来做一个系统时间同步的时钟
weixin_33704234的博客
01-30 488
JavaScript总算入门了，复杂的就先不来了，今儿牛刀小试，先来一个系统同步的时钟效果，只用到最简单的获取系统时间的函数。因为学习是需要正反馈的，否则总也看不到效果，难免失了深入下去的兴趣。在之前的一篇专栏文章《利用CSS3的animation step属性实现wifi动画》的末尾，曾经做过一个时钟，当时鉴于JS空白，最终虽然也实现了时钟效果，但却无法做到与系统时间同步。今次，就来做一个可与当...
HTML5 canvas 实现同步时钟
weixin_34014555的博客
11-07 223
都说HTML5和CSS3将会是前端工作者要学习和掌握的必要技术。不错，随着各大主流浏览器之间的“互坑”性兼容问题原来越少。作为前端开发人员，趁早提前熟悉掌握此两种必要知识是很有必要的！嘎嘎。在此，小码哥讲给大家分享一下用HTML5中的canvas画布制作的同步时钟。（透露一下，此种代码并非小码哥亲自编写，知识俺将每一步解析了一下，，供大家参考哈，，惭愧，俺也在进步学习中呢！！...
css利用transform:skew()属性画一个大屏的背景斜面四边形特效
最新发布
Demon's blog
04-27 223
使用css transform function中的skew()方法实现画其中一个斜面，然后调整背景色实现ß。在工作工程中需要写一个如下的大屏背景，是由几个斜面做成的效果。2. 添加transform属性。4. 重复三个，注意背景色不一样。3. 添加渐变背景色和阴影。
【React】CSS 局部样式
小秀的博客
04-26 369
的时候，如果 CSS 文件名包含 module，那么说明该 CSS 是一个局部 CSS 样式文件，类似于 vue 中的 scoped。
vuetify3.0+tailwindcss+vite最新框架
qq_43813351的博客
04-23 402
【代码】vuetify3.0+tailwindcss+vite最新框架。
CSS中的圆角和阴影
小何代码咖啡馆
04-21 1168
在 CSS3 中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。（必需值）水平阴影(horizontal shadow)，可以为负值。（必需值）水平阴影(horizontal shadow)，可以为负值。（必需值）垂直阴影(vertical shadow)，可以为负值。（必需值）垂直阴影(vertical shadow)，可以为负值。（可选值）将外（盒子的背面）阴影改为内（盒子之上）阴影。CSS3 中新增了盒子阴影，可以使用。属性为盒子添加阴影。（可选值）阴影模糊程度。（可选值）阴影模糊程度。
js动态设置css主题(Style-setProperty)
zarek_jiamu的博客
04-27 288
定义的参考色，在开发的过程中希望后端人员能遵循// 用于按钮点击颜色num
2分钟自己写小游戏：使用js和css编写石头剪刀布小游戏、扫雷小游戏、五子棋小游戏。新手老手毕业论文都能用。
m0_68335484的博客
04-23 1449
2分钟自己写小游戏：使用js和css，快捷编写剪刀石头布游戏源代码、扫雷源代码、五子棋。新手老手毕业论文都能用。使用的都是简单的js和css代码，实现了这三款小游戏，复制就能用。一看就能懂。这里分享一下。下次继续。
CSS之显示覆盖内容（z-index）
qq_60624992的博客
04-27 689
我们有的时候，希望下方的内容能够显示到上方，达到类似于多个图层的效果，此时我们可以利用z-index这个属性。z-index属性值是用来设置元素的堆叠顺序(元素层级)。
纯css3怎么实现轮播图动画
04-26
你可以使用CSS3中的transition和transform属性来实现轮播图动画。具体实现方法如下： 1. 定义一个容器，包含多张图片，并设置宽度和高度。 2. 设置图片的样式，比如设置宽度、高度、边框等。 3. 使用CSS3中的transition属性设置图片的过渡效果，比如设置过渡时间、过渡类型等。 4. 使用CSS3中的transform属性设置需要移动的距离，比如通过translateX()函数来实现平移效果。 5. 使用CSS3中的动画关键帧来定义多个移动状态，实现动画循环播放效果。 代码示例： HTML代码： ``` <div class="slider"> <img src="1.jpg" alt=""> <img src="2.jpg" alt=""> <img src="3.jpg" alt=""> </div> ``` CSS代码： ``` .slider { width: 600px; height: 300px; overflow: hidden; position: relative; } .slider img { width: 600px; height: 300px; float: left; } .slider img:first-child { margin-left: 0; } .slider img:last-child { margin-left: -1800px; } .slider img:hover { cursor: pointer; } .slider img:hover + img { margin-left: -600px; transition: margin-left 1s; } .slider img:hover + img + img { margin-left: -1200px; transition: margin-left 1s; } .slider img:hover + img + img + img { margin-left: -1800px; transition: margin-left 1s; } @keyframes slide { 0% { transform: translateX(0); } 100% { transform: translateX(-600px); } } .slider img { animation: slide 2s linear infinite; } ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值