经验分享程序开发文档资料数据资源其它资源

纯CSS3实现圆盘时钟动画特效代码

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 纯CSS3实现圆盘时钟动画特效代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图:

纯CSS3实现圆盘时钟动画特效代码

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>纯CSS3实现圆盘时钟动画</title>
    <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
</head>

<body>
<div class='clock-wrapper'>
	<div class='clock-border'>
		<div class='clock'>
			<ul class='minute-marks'>
				<li class='five'></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li class='five'></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li class='five'></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li class='five'></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li class='five'></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li class='five'></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
			<div class='hour'>
				<div class='hand'></div>
			</div>
			<div class='minute'>
				<div class='hand'></div>
			</div>
			<div class='second'>
				<div class='hand'></div>
			</div>
		</div>
	</div>
</div>
</body>
</html>

CSS代码(style.css):

.clock-wrapper{position:absolute;top:0;left:0;height:100%;width:100%;background-color:#eceef0;overflow:hidden;}
.clock-border{position:absolute;top:60px;bottom:0;left:0;right:0;margin:auto;width:460px;height:460px;border-width:18px;border-color:transparent #d2d8df #d2d8df;border-style:solid;-webkit-border-radius:50%;-webkit-background-clip:padding-box;-moz-border-radius:50%;-moz-background-clip:padding;border-radius:50%;background-clip:padding-box;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);-webkit-animation:rotate-clock-border 0.69s cubic-bezier(0.645,0,0.605,1) 0.69s 1 forwards;-moz-animation:rotate-clock-border 0.69s cubic-bezier(0.645,0,0.605,1) 0.69s 1 forwards;-o-animation:rotate-clock-border 0.69s cubic-bezier(0.645,0,0.605,1) 0.69s 1 forwards;animation:rotate-clock-border 0.69s cubic-bezier(0.645,0,0.605,1) 0.69s 1 forwards;-webkit-animation-timing-function:cubic-bezier(0.645,-0.18,0.605,1.36);-moz-animation-timing-function:cubic-bezier(0.645,-0.18,0.605,1.36);-o-animation-timing-function:cubic-bezier(0.645,-0.18,0.605,1.36);animation-timing-function:cubic-bezier(0.645,-0.18,0.605,1.36);}
.clock{position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;width:400px;height:400px;padding:0;background-color:#262c33;border:18px solid #373f4a;-webkit-border-radius:50%;-webkit-background-clip:padding-box;-moz-border-radius:50%;-moz-background-clip:padding;border-radius:50%;background-clip:padding-box;-webkit-background-clip:border-box;-moz-background-clip:border-box;background-clip:border-box;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-animation:counterrotate-clock 0.69s cubic-bezier(0.645,0,0.605,1) 0.69s 1 forwards;-moz-animation:counterrotate-clock 0.69s cubic-bezier(0.645,0,0.605,1) 0.69s 1 forwards;-o-animation:counterrotate-clock 0.69s cubic-bezier(0.645,0,0.605,1) 0.69s 1 forwards;animation:counterrotate-clock 0.69s cubic-bezier(0.645,0,0.605,1) 0.69s 1 forwards;-webkit-animation-timing-function:cubic-bezier(0.645,-0.18,0.605,1.36);-moz-animation-timing-function:cubic-bezier(0.645,-0.18,0.605,1.36);-o-animation-timing-function:cubic-bezier(0.645,-0.18,0.605,1.36);animation-timing-function:cubic-bezier(0.645,-0.18,0.605,1.36);}
lesshat-selector{-lh-property:0;}
@-webkit-keyframes rotate-clock-border{0%{-webkit-transform:rotate( 45deg);}
100%{-webkit-transform:rotate( 315deg);}
}
@-moz-keyframes rotate-clock-border{0%{-moz-transform:rotate( 45deg);}
100%{-moz-transform:rotate( 315deg);}
}
@-o-keyframes rotate-clock-border{0%{-o-transform:rotate( 45deg);}
100%{-o-transform:rotate( 315deg);}
}
@keyframes rotate-clock-border{0%{-webkit-transform:rotate( 45deg);-moz-transform:rotate( 45deg);-ms-transform:rotate( 45deg);transform:rotate( 45deg);}
100%{-webkit-transform:rotate( 315deg);-moz-transform:rotate( 315deg);-ms-transform:rotate( 315deg);transform:rotate( 315deg);}
;}
lesshat-selector{-lh-property:0;}
@-webkit-keyframes counterrotate-clock{0%{-webkit-transform:rotate(-45deg);}
100%{-webkit-transform:rotate(-315deg);}
}
@-moz-keyframes counterrotate-clock{0%{-moz-transform:rotate(-45deg);}
100%{-moz-transform:rotate(-315deg);}
}
@-o-keyframes counterrotate-clock{0%{-o-transform:rotate(-45deg);}
100%{-o-transform:rotate(-315deg);}
}
@keyframes counterrotate-clock{0%{-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);}
100%{-webkit-transform:rotate(-315deg);-moz-transform:rotate(-315deg);-ms-transform:rotate(-315deg);transform:rotate(-315deg);}
;}
.hour{position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;-webkit-transform:rotate(84deg);-moz-transform:rotate(84deg);-o-transform:rotate(84deg);-ms-transform:rotate(84deg);transform:rotate(84deg);}
.hour .hand{position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;-webkit-animation:tick 43200s normal infinite steps(3600,end) 3s;-moz-animation:tick 43200s normal infinite steps(3600,end) 3s;-o-animation:tick 43200s normal infinite steps(3600,end) 3s;animation:tick 43200s normal infinite steps(3600,end) 3s;}
.hour .hand:before{content:'';position:absolute;bottom:0;left:0;right:0;margin:auto;display:inline-block;top:0;width:16px;height:120px;height:0;-webkit-border-top-left-radius:2px;-moz-border-radius-topleft:2px;border-top-left-radius:2px;-webkit-border-top-right-radius:2px;-webkit-background-clip:padding-box;-moz-border-radius-topright:2px;-moz-background-clip:padding;border-top-right-radius:2px;background-clip:padding-box;-webkit-transform-origin:center 100%;-moz-transform-origin:center 100%;-o-transform-origin:center 100%;-ms-transform-origin:center 100%;transform-origin:center 100%;background-color:#fff;}
.hour .hand:after{content:'';position:absolute;bottom:0;left:0;right:0;margin:auto;top:0;display:inline-block;border-bottom:16px solid #ffffff;border-left:8px solid transparent;border-right:8px solid transparent;width:0px;height:0px;-webkit-transform-origin:center 100%;-moz-transform-origin:center 100%;-o-transform-origin:center 100%;-ms-transform-origin:center 100%;transform-origin:center 100%;}
.hour .hand:before{-webkit-animation:hour-grow-before 0.4s cubic-bezier(0.69,0,0.49,1) 1.35s 1 forwards;-moz-animation:hour-grow-before 0.4s cubic-bezier(0.69,0,0.49,1) 1.35s 1 forwards;-o-animation:hour-grow-before 0.4s cubic-bezier(0.69,0,0.49,1) 1.35s 1 forwards;animation:hour-grow-before 0.4s cubic-bezier(0.69,0,0.49,1) 1.35s 1 forwards;-webkit-animation-timing-function:cubic-bezier(0.69,-0.06,0.49,1.4);-moz-animation-timing-function:cubic-bezier(0.69,-0.06,0.49,1.4);-o-animation-timing-function:cubic-bezier(0.69,-0.06,0.49,1.4);animation-timing-function:cubic-bezier(0.69,-0.06,0.49,1.4);}
.hour .hand:before lesshat-selector{-lh-property:0;}
@-webkit-keyframes hour-grow-before{0%{height:0;top:0;}
100%{height:120px;top:-120px;}
}
@-moz-keyframes hour-grow-before{0%{height:0;top:0;}
100%{height:120px;top:-120px;}
}
@-o-keyframes hour-grow-before{0%{height:0;top:0;}
100%{height:120px;top:-120px;}
}
@keyframes hour-grow-before{0%{height:0;top:0;}
100%{height:120px;top:-120px;}
;}
.hour .hand:after{-webkit-animation:hour-grow-after 0.4s cubic-bezier(0.69,0,0.49,1) 1.35s 1 forwards;-moz-animation:hour-grow-after 0.4s cubic-bezier(0.69,0,0.49,1) 1.35s 1 forwards;-o-animation:hour-grow-after 0.4s cubic-bezier(0.69,0,0.49,1) 1.35s 1 forwards;animation:hour-grow-after 0.4s cubic-bezier(0.69,0,0.49,1) 1.35s 1 forwards;-webkit-animation-timing-function:cubic-bezier(0.69,-0.06,0.49,1.4);-moz-animation-timing-function:cubic-bezier(0.69,-0.06,0.49,1.4);-o-animation-timing-function:cubic-bezier(0.69,-0.06,0.49,1.4);animation-timing-function:cubic-bezier(0.69,-0.06,0.49,1.4);}
.hour .hand:after lesshat-selector{-lh-property:0;}
@-webkit-keyframes hour-grow-after{0%{top:0;}
100%{top:-254px;}
}
@-moz-keyframes hour-grow-after{0%{top:0;}
100%{top:-254px;}
}
@-o-keyframes hour-grow-after{0%{top:0;}
100%{top:-254px;}
}
@keyframes hour-grow-after{0%{top:0;}
100%{top:-254px;}
;}
.minute{position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;-webkit-transform:rotate(288deg);-moz-transform:rotate(288deg);-o-transform:rotate(288deg);-ms-transform:rotate(288deg);transform:rotate(288deg);}
.minute .hand{position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;-webkit-animation:tick 3600s normal infinite steps(3600,end) 3s;-moz-animation:tick 3600s normal infinite steps(3600,end) 3s;-o-animation:tick 3600s normal infinite steps(3600,end) 3s;animation:tick 3600s normal infinite steps(3600,end) 3s;}
.minute .hand:before{content:'';position:absolute;bottom:0;left:0;right:0;margin:auto;display:inline-block;top:0;width:12px;height:168px;height:0;-webkit-border-top-left-radius:2px;-moz-border-radius-topleft:2px;border-top-left-radius:2px;-webkit-border-top-right-radius:2px;-webkit-background-clip:padding-box;-moz-border-radius-topright:2px;-moz-background-clip:padding;border-top-right-radius:2px;background-clip:padding-box;-webkit-transform-origin:center 100%;-moz-transform-origin:center 100%;-o-transform-origin:center 100%;-ms-transform-origin:center 100%;transform-origin:center 100%;background-color:#fff;}
.minute .hand:after{content:'';position:absolute;bottom:0;left:0;right:0;margin:auto;top:0;display:inline-block;border-bottom:12px solid #ffffff;border-left:6px solid transparent;border-right:6px solid transparent;width:0px;height:0px;-webkit-transform-origin:center 100%;-moz-transform-origin:center 100%;-o-transform-origin:center 100%;-ms-transform-origin:center 100%;transform-origin:center 100%;}
.minute .hand:before{-webkit-animation:minute-grow-before 0.4s cubic-bezier(0.69,0,0.49,1) 1.6s 1 forwards;-moz-animation:minute-grow-before 0.4s cubic-bezier(0.69,0,0.49,1) 1.6s 1 forwards;-o-animation:minute-grow-before 0.4s cubic-bezier(0.69,0,0.49,1) 1.6s 1 forwards;animation:minute-grow-before 0.4s cubic-bezier(0.69,0,0.49,1) 1.6s 1 forwards;-webkit-animation-timing-function:cubic-bezier(0.69,-0.06,0.49,1.4);-moz-animation-timing-function:cubic-bezier(0.69,-0.06,0.49,1.4);-o-animation-timing-function:cubic-bezier(0.69,-0.06,0.49,1.4);animation-timing-function:cubic-bezier(0.69,-0.06,0.49,1.4);}
.minute .hand:before lesshat-selector{-lh-property:0;}
@-webkit-keyframes minute-grow-before{0%{height:0;top:0;}
100%{height:168px;top:-168px;}
}
@-moz-keyframes minute-grow-before{0%{height:0;top:0;}
100%{height:168px;top:-168px;}
}
@-o-keyframes minute-grow-before{0%{height:0;top:0;}
100%{height:168px;top:-168px;}
}
@keyframes minute-grow-before{0%{height:0;top:0;}
100%{height:168px;top:-168px;}
;}
.minute .hand:after{-webkit-animation:minute-grow-after 0.4s cubic-bezier(0.69,0,0.49,1) 1.6s 1 forwards;-moz-animation:minute-grow-after 0.4s cubic-bezier(0.69,0,0.49,1) 1.6s 1 forwards;-o-animation:minute-grow-after 0.4s cubic-bezier(0.69,0,0.49,1) 1.6s 1 forwards;animation:minute-grow-after 0.4s cubic-bezier(0.69,0,0.49,1) 1.6s 1 forwards;-webkit-animation-timing-function:cubic-bezier(0.69,-0.06,0.49,1.4);-moz-animation-timing-function:cubic-bezier(0.69,-0.06,0.49,1.4);-o-animation-timing-function:cubic-bezier(0.69,-0.06,0.49,1.4);animation-timing-function:cubic-bezier(0.69,-0.06,0.49,1.4);}
.minute .hand:after lesshat-selector{-lh-property:0;}
@-webkit-keyframes minute-grow-after{0%{top:0;}
100%{top:-346px;}
}
@-moz-keyframes minute-grow-after{0%{top:0;}
100%{top:-346px;}
}
@-o-keyframes minute-grow-after{0%{top:0;}
100%{top:-346px;}
}
@keyframes minute-grow-after{0%{top:0;}
100%{top:-346px;}
;}
.second{position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;-webkit-transform:rotate(0);-moz-transform:rotate(0);-o-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);}
.second .hand{position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;-webkit-animation:tick-second 1s normal infinite steps(30,end) 3s;-moz-animation:tick-second 1s normal infinite steps(30,end) 3s;-o-animation:tick-second 1s normal infinite steps(30,end) 3s;animation:tick-second 1s normal infinite steps(30,end) 3s;}
.second .hand:before{content:'';display:inline-block;position:absolute;bottom:0;left:0;right:0;margin:auto;top:0;width:8px;height:0px;background-color:#f16b41;-webkit-border-radius:8px;-webkit-background-clip:padding-box;-moz-border-radius:8px;-moz-background-clip:padding;border-radius:8px;background-clip:padding-box;-webkit-transform-origin:center 180px;-moz-transform-origin:center 180px;-o-transform-origin:center 180px;-ms-transform-origin:center 180px;transform-origin:center 180px;-webkit-animation:second-grow 1.6s cubic-bezier(1,0,0,1) 1.45s 1 forwards,second 60s normal infinite steps(60,end) 3s;-moz-animation:second-grow 1.6s cubic-bezier(1,0,0,1) 1.45s 1 forwards,second 60s normal infinite steps(60,end) 3s;-o-animation:second-grow 1.6s cubic-bezier(1,0,0,1) 1.45s 1 forwards,second 60s normal infinite steps(60,end) 3s;animation:second-grow 1.6s cubic-bezier(1,0,0,1) 1.45s 1 forwards,second 60s normal infinite steps(60,end) 3s;}
.second .hand:before lesshat-selector{-lh-property:0;}
@-webkit-keyframes second-grow{from{top:0;height:0;}
100%{top:-120px;height:240px;}
}
@-moz-keyframes second-grow{from{top:0;height:0;}
100%{top:-120px;height:240px;}
}
@-o-keyframes second-grow{from{top:0;height:0;}
100%{top:-120px;height:240px;}
}
@keyframes second-grow{from{top:0;height:0;}
100%{top:-120px;height:240px;}
;}
.second .hand:after{content:'';position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;display:inline-block;width:32px;height:32px;-webkit-border-radius:32px;-webkit-background-clip:padding-box;-moz-border-radius:32px;-moz-background-clip:padding;border-radius:32px;background-clip:padding-box;background-color:#f16b41;}
lesshat-selector{-lh-property:0;}
@-webkit-keyframes tick{0%{-webkit-transform:rotate(0deg);}
100%{-webkit-transform:rotate(360deg);}
}
@-moz-keyframes tick{0%{-moz-transform:rotate(0deg);}
100%{-moz-transform:rotate(360deg);}
}
@-o-keyframes tick{0%{-o-transform:rotate(0deg);}
100%{-o-transform:rotate(360deg);}
}
@keyframes tick{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}
100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}
;}
lesshat-selector{-lh-property:0;}
@-webkit-keyframes second{0%{-webkit-transform:rotate(0deg)}
100%{-webkit-transform:rotate(360deg)}
}
@-moz-keyframes second{0%{-moz-transform:rotate(0deg)}
100%{-moz-transform:rotate(360deg)}
}
@-o-keyframes second{0%{-o-transform:rotate(0deg)}
100%{-o-transform:rotate(360deg)}
}
@keyframes second{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}
100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}
;}
lesshat-selector{-lh-property:0;}
@-webkit-keyframes tick-second{0%{-webkit-transform:rotate(0deg);}
21%{-webkit-transform:rotate(4deg);}
26%{-webkit-transform:rotate(8deg);}
33%{-webkit-transform:rotate(4deg);}
37%{-webkit-transform:rotate(6deg);}
100%{-webkit-transform:rotate(6deg);}
}
@-moz-keyframes tick-second{0%{-moz-transform:rotate(0deg);}
21%{-moz-transform:rotate(4deg);}
26%{-moz-transform:rotate(8deg);}
33%{-moz-transform:rotate(4deg);}
37%{-moz-transform:rotate(6deg);}
100%{-moz-transform:rotate(6deg);}
}
@-o-keyframes tick-second{0%{-o-transform:rotate(0deg);}
21%{-o-transform:rotate(4deg);}
26%{-o-transform:rotate(8deg);}
33%{-o-transform:rotate(4deg);}
37%{-o-transform:rotate(6deg);}
100%{-o-transform:rotate(6deg);}
}
@keyframes tick-second{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}
21%{-webkit-transform:rotate(4deg);-moz-transform:rotate(4deg);-ms-transform:rotate(4deg);transform:rotate(4deg);}
26%{-webkit-transform:rotate(8deg);-moz-transform:rotate(8deg);-ms-transform:rotate(8deg);transform:rotate(8deg);}
33%{-webkit-transform:rotate(4deg);-moz-transform:rotate(4deg);-ms-transform:rotate(4deg);transform:rotate(4deg);}
37%{-webkit-transform:rotate(6deg);-moz-transform:rotate(6deg);-ms-transform:rotate(6deg);transform:rotate(6deg);}
100%{-webkit-transform:rotate(6deg);-moz-transform:rotate(6deg);-ms-transform:rotate(6deg);transform:rotate(6deg);}
;}
.minute-marks{display:inline-block;padding:0;margin:0;list-style-type:none;width:0px;height:0px;}
.minute-marks li{position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;display:inline-block;width:200px;height:200px;}
.minute-marks li:before,.minute-marks li:after{content:'';position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;width:0px;height:0px;display:inline-block;border-color:#d4d5d6;border-width:4px;border-style:solid;-webkit-border-radius:4px;-webkit-background-clip:padding-box;-moz-border-radius:4px;-moz-background-clip:padding;border-radius:4px;background-clip:padding-box;-webkit-opacity:0;-moz-opacity:0;opacity:0;-webkit-animation:fade-in 0.1s ease 0s 1 forwards;-moz-animation:fade-in 0.1s ease 0s 1 forwards;-o-animation:fade-in 0.1s ease 0s 1 forwards;animation:fade-in 0.1s ease 0s 1 forwards;}
.minute-marks li:before lesshat-selector,.minute-marks li:after lesshat-selector{-lh-property:0;}
@-webkit-keyframes fade-in{from{-webkit-opacity:0;-moz-opacity:0;-o-opacity:0;opacity:0;}
to{-webkit-opacity:1;-moz-opacity:1;-o-opacity:1;opacity:1;}
}
@-moz-keyframes fade-in{from{-webkit-opacity:0;-moz-opacity:0;-o-opacity:0;opacity:0;}
to{-webkit-opacity:1;-moz-opacity:1;-o-opacity:1;opacity:1;}
}
@-o-keyframes fade-in{from{-webkit-opacity:0;-moz-opacity:0;-o-opacity:0;opacity:0;}
to{-webkit-opacity:1;-moz-opacity:1;-o-opacity:1;opacity:1;}
}
@keyframes fade-in{from{-webkit-opacity:0;-moz-opacity:0;-o-opacity:0;opacity:0;}
to{-webkit-opacity:1;-moz-opacity:1;-o-opacity:1;opacity:1;}
;}
.minute-marks li:before{top:-380px;}
.minute-marks li:after{bottom:-380px;}
.minute-marks li.five:before,.minute-marks li.five:after{width:0px;height:20px;}
.minute-marks li.five:before{top:-360px;}
.minute-marks li.five:after{bottom:-360px;}
.minute-marks li:nth-child( 1){-webkit-transform:rotate(0);-moz-transform:rotate(0);-o-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);}
.minute-marks li:nth-child( 1):before{-webkit-animation-delay:0.017s;-moz-animation-delay:0.017s;-o-animation-delay:0.017s;animation-delay:0.017s;}
.minute-marks li:nth-child( 1):after{-webkit-animation-delay:0.544s;-moz-animation-delay:0.544s;-o-animation-delay:0.544s;animation-delay:0.544s;}
.minute-marks li:nth-child( 2){-webkit-transform:rotate(6deg);-moz-transform:rotate(6deg);-o-transform:rotate(6deg);-ms-transform:rotate(6deg);transform:rotate(6deg);}
.minute-marks li:nth-child( 2):before{-webkit-animation-delay:0.034s;-moz-animation-delay:0.034s;-o-animation-delay:0.034s;animation-delay:0.034s;}
.minute-marks li:nth-child( 2):after{-webkit-animation-delay:0.561s;-moz-animation-delay:0.561s;-o-animation-delay:0.561s;animation-delay:0.561s;}
.minute-marks li:nth-child( 3){-webkit-transform:rotate(12deg);-moz-transform:rotate(12deg);-o-transform:rotate(12deg);-ms-transform:rotate(12deg);transform:rotate(12deg);}
.minute-marks li:nth-child( 3):before{-webkit-animation-delay:0.051000000000000004s;-moz-animation-delay:0.051000000000000004s;-o-animation-delay:0.051000000000000004s;animation-delay:0.051000000000000004s;}
.minute-marks li:nth-child( 3):after{-webkit-animation-delay:0.5780000000000001s;-moz-animation-delay:0.5780000000000001s;-o-animation-delay:0.5780000000000001s;animation-delay:0.5780000000000001s;}
.minute-marks li:nth-child( 4){-webkit-transform:rotate(18deg);-moz-transform:rotate(18deg);-o-transform:rotate(18deg);-ms-transform:rotate(18deg);transform:rotate(18deg);}
.minute-marks li:nth-child( 4):before{-webkit-animation-delay:0.068s;-moz-animation-delay:0.068s;-o-animation-delay:0.068s;animation-delay:0.068s;}
.minute-marks li:nth-child( 4):after{-webkit-animation-delay:0.595s;-moz-animation-delay:0.595s;-o-animation-delay:0.595s;animation-delay:0.595s;}
.minute-marks li:nth-child( 5){-webkit-transform:rotate(24deg);-moz-transform:rotate(24deg);-o-transform:rotate(24deg);-ms-transform:rotate(24deg);transform:rotate(24deg);}
.minute-marks li:nth-child( 5):before{-webkit-animation-delay:0.085s;-moz-animation-delay:0.085s;-o-animation-delay:0.085s;animation-delay:0.085s;}
.minute-marks li:nth-child( 5):after{-webkit-animation-delay:0.612s;-moz-animation-delay:0.612s;-o-animation-delay:0.612s;animation-delay:0.612s;}
.minute-marks li:nth-child( 6){-webkit-transform:rotate(30deg);-moz-transform:rotate(30deg);-o-transform:rotate(30deg);-ms-transform:rotate(30deg);transform:rotate(30deg);}
.minute-marks li:nth-child( 6):before{-webkit-animation-delay:0.10200000000000001s;-moz-animation-delay:0.10200000000000001s;-o-animation-delay:0.10200000000000001s;animation-delay:0.10200000000000001s;}
.minute-marks li:nth-child( 6):after{-webkit-animation-delay:0.629s;-moz-animation-delay:0.629s;-o-animation-delay:0.629s;animation-delay:0.629s;}
.minute-marks li:nth-child( 7){-webkit-transform:rotate(36deg);-moz-transform:rotate(36deg);-o-transform:rotate(36deg);-ms-transform:rotate(36deg);transform:rotate(36deg);}
.minute-marks li:nth-child( 7):before{-webkit-animation-delay:0.11900000000000001s;-moz-animation-delay:0.11900000000000001s;-o-animation-delay:0.11900000000000001s;animation-delay:0.11900000000000001s;}
.minute-marks li:nth-child( 7):after{-webkit-animation-delay:0.646s;-moz-animation-delay:0.646s;-o-animation-delay:0.646s;animation-delay:0.646s;}
.minute-marks li:nth-child( 8){-webkit-transform:rotate(42deg);-moz-transform:rotate(42deg);-o-transform:rotate(42deg);-ms-transform:rotate(42deg);transform:rotate(42deg);}
.minute-marks li:nth-child( 8):before{-webkit-animation-delay:0.136s;-moz-animation-delay:0.136s;-o-animation-delay:0.136s;animation-delay:0.136s;}
.minute-marks li:nth-child( 8):after{-webkit-animation-delay:0.663s;-moz-animation-delay:0.663s;-o-animation-delay:0.663s;animation-delay:0.663s;}
.minute-marks li:nth-child( 9){-webkit-transform:rotate(48deg);-moz-transform:rotate(48deg);-o-transform:rotate(48deg);-ms-transform:rotate(48deg);transform:rotate(48deg);}
.minute-marks li:nth-child( 9):before{-webkit-animation-delay:0.15300000000000002s;-moz-animation-delay:0.15300000000000002s;-o-animation-delay:0.15300000000000002s;animation-delay:0.15300000000000002s;}
.minute-marks li:nth-child( 9):after{-webkit-animation-delay:0.68s;-moz-animation-delay:0.68s;-o-animation-delay:0.68s;animation-delay:0.68s;}
.minute-marks li:nth-child( 10){-webkit-transform:rotate(54deg);-moz-transform:rotate(54deg);-o-transform:rotate(54deg);-ms-transform:rotate(54deg);transform:rotate(54deg);}
.minute-marks li:nth-child( 10):before{-webkit-animation-delay:0.17s;-moz-animation-delay:0.17s;-o-animation-delay:0.17s;animation-delay:0.17s;}
.minute-marks li:nth-child( 10):after{-webkit-animation-delay:0.6970000000000001s;-moz-animation-delay:0.6970000000000001s;-o-animation-delay:0.6970000000000001s;animation-delay:0.6970000000000001s;}
.minute-marks li:nth-child( 11){-webkit-transform:rotate(60deg);-moz-transform:rotate(60deg);-o-transform:rotate(60deg);-ms-transform:rotate(60deg);transform:rotate(60deg);}
.minute-marks li:nth-child( 11):before{-webkit-animation-delay:0.187s;-moz-animation-delay:0.187s;-o-animation-delay:0.187s;animation-delay:0.187s;}
.minute-marks li:nth-child( 11):after{-webkit-animation-delay:0.714s;-moz-animation-delay:0.714s;-o-animation-delay:0.714s;animation-delay:0.714s;}
.minute-marks li:nth-child( 12){-webkit-transform:rotate(66deg);-moz-transform:rotate(66deg);-o-transform:rotate(66deg);-ms-transform:rotate(66deg);transform:rotate(66deg);}
.minute-marks li:nth-child( 12):before{-webkit-animation-delay:0.20400000000000001s;-moz-animation-delay:0.20400000000000001s;-o-animation-delay:0.20400000000000001s;animation-delay:0.20400000000000001s;}
.minute-marks li:nth-child( 12):after{-webkit-animation-delay:0.7310000000000001s;-moz-animation-delay:0.7310000000000001s;-o-animation-delay:0.7310000000000001s;animation-delay:0.7310000000000001s;}
.minute-marks li:nth-child( 13){-webkit-transform:rotate(72deg);-moz-transform:rotate(72deg);-o-transform:rotate(72deg);-ms-transform:rotate(72deg);transform:rotate(72deg);}
.minute-marks li:nth-child( 13):before{-webkit-animation-delay:0.22100000000000003s;-moz-animation-delay:0.22100000000000003s;-o-animation-delay:0.22100000000000003s;animation-delay:0.22100000000000003s;}
.minute-marks li:nth-child( 13):after{-webkit-animation-delay:0.748s;-moz-animation-delay:0.748s;-o-animation-delay:0.748s;animation-delay:0.748s;}
.minute-marks li:nth-child( 14){-webkit-transform:rotate(78deg);-moz-transform:rotate(78deg);-o-transform:rotate(78deg);-ms-transform:rotate(78deg);transform:rotate(78deg);}
.minute-marks li:nth-child( 14):before{-webkit-animation-delay:0.23800000000000002s;-moz-animation-delay:0.23800000000000002s;-o-animation-delay:0.23800000000000002s;animation-delay:0.23800000000000002s;}
.minute-marks li:nth-child( 14):after{-webkit-animation-delay:0.765s;-moz-animation-delay:0.765s;-o-animation-delay:0.765s;animation-delay:0.765s;}
.minute-marks li:nth-child( 15){-webkit-transform:rotate(84deg);-moz-transform:rotate(84deg);-o-transform:rotate(84deg);-ms-transform:rotate(84deg);transform:rotate(84deg);}
.minute-marks li:nth-child( 15):before{-webkit-animation-delay:0.255s;-moz-animation-delay:0.255s;-o-animation-delay:0.255s;animation-delay:0.255s;}
.minute-marks li:nth-child( 15):after{-webkit-animation-delay:0.782s;-moz-animation-delay:0.782s;-o-animation-delay:0.782s;animation-delay:0.782s;}
.minute-marks li:nth-child( 16){-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-o-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);}
.minute-marks li:nth-child( 16):before{-webkit-animation-delay:0.272s;-moz-animation-delay:0.272s;-o-animation-delay:0.272s;animation-delay:0.272s;}
.minute-marks li:nth-child( 16):after{-webkit-animation-delay:0.799s;-moz-animation-delay:0.799s;-o-animation-delay:0.799s;animation-delay:0.799s;}
.minute-marks li:nth-child( 17){-webkit-transform:rotate(96deg);-moz-transform:rotate(96deg);-o-transform:rotate(96deg);-ms-transform:rotate(96deg);transform:rotate(96deg);}
.minute-marks li:nth-child( 17):before{-webkit-animation-delay:0.28900000000000003s;-moz-animation-delay:0.28900000000000003s;-o-animation-delay:0.28900000000000003s;animation-delay:0.28900000000000003s;}
.minute-marks li:nth-child( 17):after{-webkit-animation-delay:0.8160000000000001s;-moz-animation-delay:0.8160000000000001s;-o-animation-delay:0.8160000000000001s;animation-delay:0.8160000000000001s;}
.minute-marks li:nth-child( 18){-webkit-transform:rotate(102deg);-moz-transform:rotate(102deg);-o-transform:rotate(102deg);-ms-transform:rotate(102deg);transform:rotate(102deg);}
.minute-marks li:nth-child( 18):before{-webkit-animation-delay:0.30600000000000005s;-moz-animation-delay:0.30600000000000005s;-o-animation-delay:0.30600000000000005s;animation-delay:0.30600000000000005s;}
.minute-marks li:nth-child( 18):after{-webkit-animation-delay:0.8330000000000001s;-moz-animation-delay:0.8330000000000001s;-o-animation-delay:0.8330000000000001s;animation-delay:0.8330000000000001s;}
.minute-marks li:nth-child( 19){-webkit-transform:rotate(108deg);-moz-transform:rotate(108deg);-o-transform:rotate(108deg);-ms-transform:rotate(108deg);transform:rotate(108deg);}
.minute-marks li:nth-child( 19):before{-webkit-animation-delay:0.323s;-moz-animation-delay:0.323s;-o-animation-delay:0.323s;animation-delay:0.323s;}
.minute-marks li:nth-child( 19):after{-webkit-animation-delay:0.8500000000000001s;-moz-animation-delay:0.8500000000000001s;-o-animation-delay:0.8500000000000001s;animation-delay:0.8500000000000001s;}
.minute-marks li:nth-child( 20){-webkit-transform:rotate(114deg);-moz-transform:rotate(114deg);-o-transform:rotate(114deg);-ms-transform:rotate(114deg);transform:rotate(114deg);}
.minute-marks li:nth-child( 20):before{-webkit-animation-delay:0.34s;-moz-animation-delay:0.34s;-o-animation-delay:0.34s;animation-delay:0.34s;}
.minute-marks li:nth-child( 20):after{-webkit-animation-delay:0.867s;-moz-animation-delay:0.867s;-o-animation-delay:0.867s;animation-delay:0.867s;}
.minute-marks li:nth-child( 21){-webkit-transform:rotate(120deg);-moz-transform:rotate(120deg);-o-transform:rotate(120deg);-ms-transform:rotate(120deg);transform:rotate(120deg);}
.minute-marks li:nth-child( 21):before{-webkit-animation-delay:0.35700000000000004s;-moz-animation-delay:0.35700000000000004s;-o-animation-delay:0.35700000000000004s;animation-delay:0.35700000000000004s;}
.minute-marks li:nth-child( 21):after{-webkit-animation-delay:0.8840000000000001s;-moz-animation-delay:0.8840000000000001s;-o-animation-delay:0.8840000000000001s;animation-delay:0.8840000000000001s;}
.minute-marks li:nth-child( 22){-webkit-transform:rotate(126deg);-moz-transform:rotate(126deg);-o-transform:rotate(126deg);-ms-transform:rotate(126deg);transform:rotate(126deg);}
.minute-marks li:nth-child( 22):before{-webkit-animation-delay:0.374s;-moz-animation-delay:0.374s;-o-animation-delay:0.374s;animation-delay:0.374s;}
.minute-marks li:nth-child( 22):after{-webkit-animation-delay:0.901s;-moz-animation-delay:0.901s;-o-animation-delay:0.901s;animation-delay:0.901s;}
.minute-marks li:nth-child( 23){-webkit-transform:rotate(132deg);-moz-transform:rotate(132deg);-o-transform:rotate(132deg);-ms-transform:rotate(132deg);transform:rotate(132deg);}
.minute-marks li:nth-child( 23):before{-webkit-animation-delay:0.391s;-moz-animation-delay:0.391s;-o-animation-delay:0.391s;animation-delay:0.391s;}
.minute-marks li:nth-child( 23):after{-webkit-animation-delay:0.918s;-moz-animation-delay:0.918s;-o-animation-delay:0.918s;animation-delay:0.918s;}
.minute-marks li:nth-child( 24){-webkit-transform:rotate(138deg);-moz-transform:rotate(138deg);-o-transform:rotate(138deg);-ms-transform:rotate(138deg);transform:rotate(138deg);}
.minute-marks li:nth-child( 24):before{-webkit-animation-delay:0.40800000000000003s;-moz-animation-delay:0.40800000000000003s;-o-animation-delay:0.40800000000000003s;animation-delay:0.40800000000000003s;}
.minute-marks li:nth-child( 24):after{-webkit-animation-delay:0.935s;-moz-animation-delay:0.935s;-o-animation-delay:0.935s;animation-delay:0.935s;}
.minute-marks li:nth-child( 25){-webkit-transform:rotate(144deg);-moz-transform:rotate(144deg);-o-transform:rotate(144deg);-ms-transform:rotate(144deg);transform:rotate(144deg);}
.minute-marks li:nth-child( 25):before{-webkit-animation-delay:0.42500000000000004s;-moz-animation-delay:0.42500000000000004s;-o-animation-delay:0.42500000000000004s;animation-delay:0.42500000000000004s;}
.minute-marks li:nth-child( 25):after{-webkit-animation-delay:0.9520000000000001s;-moz-animation-delay:0.9520000000000001s;-o-animation-delay:0.9520000000000001s;animation-delay:0.9520000000000001s;}
.minute-marks li:nth-child( 26){-webkit-transform:rotate(150deg);-moz-transform:rotate(150deg);-o-transform:rotate(150deg);-ms-transform:rotate(150deg);transform:rotate(150deg);}
.minute-marks li:nth-child( 26):before{-webkit-animation-delay:0.44200000000000006s;-moz-animation-delay:0.44200000000000006s;-o-animation-delay:0.44200000000000006s;animation-delay:0.44200000000000006s;}
.minute-marks li:nth-child( 26):after{-webkit-animation-delay:0.9690000000000001s;-moz-animation-delay:0.9690000000000001s;-o-animation-delay:0.9690000000000001s;animation-delay:0.9690000000000001s;}
.minute-marks li:nth-child( 27){-webkit-transform:rotate(156deg);-moz-transform:rotate(156deg);-o-transform:rotate(156deg);-ms-transform:rotate(156deg);transform:rotate(156deg);}
.minute-marks li:nth-child( 27):before{-webkit-animation-delay:0.459s;-moz-animation-delay:0.459s;-o-animation-delay:0.459s;animation-delay:0.459s;}
.minute-marks li:nth-child( 27):after{-webkit-animation-delay:0.986s;-moz-animation-delay:0.986s;-o-animation-delay:0.986s;animation-delay:0.986s;}
.minute-marks li:nth-child( 28){-webkit-transform:rotate(162deg);-moz-transform:rotate(162deg);-o-transform:rotate(162deg);-ms-transform:rotate(162deg);transform:rotate(162deg);}
.minute-marks li:nth-child( 28):before{-webkit-animation-delay:0.47600000000000003s;-moz-animation-delay:0.47600000000000003s;-o-animation-delay:0.47600000000000003s;animation-delay:0.47600000000000003s;}
.minute-marks li:nth-child( 28):after{-webkit-animation-delay:1.0030000000000001s;-moz-animation-delay:1.0030000000000001s;-o-animation-delay:1.0030000000000001s;animation-delay:1.0030000000000001s;}
.minute-marks li:nth-child( 29){-webkit-transform:rotate(168deg);-moz-transform:rotate(168deg);-o-transform:rotate(168deg);-ms-transform:rotate(168deg);transform:rotate(168deg);}
.minute-marks li:nth-child( 29):before{-webkit-animation-delay:0.49300000000000005s;-moz-animation-delay:0.49300000000000005s;-o-animation-delay:0.49300000000000005s;animation-delay:0.49300000000000005s;}
.minute-marks li:nth-child( 29):after{-webkit-animation-delay:1.02s;-moz-animation-delay:1.02s;-o-animation-delay:1.02s;animation-delay:1.02s;}
.minute-marks li:nth-child( 30){-webkit-transform:rotate(174deg);-moz-transform:rotate(174deg);-o-transform:rotate(174deg);-ms-transform:rotate(174deg);transform:rotate(174deg);}
.minute-marks li:nth-child( 30):before{-webkit-animation-delay:0.51s;-moz-animation-delay:0.51s;-o-animation-delay:0.51s;animation-delay:0.51s;}
.minute-marks li:nth-child( 30):after{-webkit-animation-delay:1.037s;-moz-animation-delay:1.037s;-o-animation-delay:1.037s;animation-delay:1.037s;}
h1{position:absolute;bottom:0;margin-bottom:44px;width:100%;text-align:center;font:bold 33px/1 "Trebuchet MS",Verdana,sans-serif;color:#d2d8df;text-shadow:0 -2px 0 #ffffff;}
@media (max-height:740px){h1{display:none;}
}
h1 small{display:block;margin-top:10px;font-weight:normal;font-size:12px;color:#b4beca;text-shadow:none;}
h1 small a{color:#b4beca;text-decoration:none;-webkit-transition:all 0.25s ease;-moz-transition:all 0.25s ease;-o-transition:all 0.25s ease;transition:all 0.25s ease;}
h1 small a:hover{color:#708399;}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
4.12 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
4.12 KB
立即下载
高蕊娥影
了解
打赏作者 鼓励作者
Html 时钟特效
最新结算
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
HTML5实现CSS滤镜图片切换特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery+css3实现信封效果
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章