CSS3 clock. Today – another one great article – we are going to create pure CSS3 Analog Clock without any javascript (we are going to use power of CSS3 with animations to build it). Our clocks have three arrows on the face – hour, minute and second. Each of them – a narrow rectangle rotated to the desired angle. How it works in result? – Easy, I am using necessary delays for all these arrows. How exactly – read on.
CSS3时钟。 今天(另一篇很棒的文章)，我们将创建不带任何JavaScript的纯CSS3模拟时钟(我们将使用CSS3的强大功能和动画来构建它)。 我们的钟面上有三个箭头–小时，分钟和秒。 他们每个人-旋转到所需角度的狭窄矩形。 结果如何运作？ –很简单，我为所有这些箭头使用了必要的延迟。 究竟如何–继续阅读。
For our clock – I have prepared -webkit and -moz styles. So please keep in mind – that clock will work only in Firefox, and Webkit-based browsers (Chrome and Safari). If you like – you always can expand necessary styles (for arrows) for IE and Opera browsers (by adding same stylesheets with -ms and -o prefixes).
对于我们的时钟，我准备了-webkit和-moz样式。 因此请记住-该时钟仅在Firefox和基于Webkit的浏览器(Chrome和Safari)中有效。 如果愿意，您可以始终为IE和Opera浏览器扩展必要的样式(箭头)(通过添加带有-ms和-o前缀的相同样式表)。
Here are samples and downloadable package:
以下是示例和可下载的软件包：
现场演示
打包下载
Ok, download the example files and lets start coding !
好的，下载示例文件并开始编码！
步骤1. HTML标记 (Step 1. HTML markup)
The mark-up for our clock is not very simple – it contain lot of DIV elements. Each of them – our arrows. Here it is.
我们时钟的标记不是很简单-它包含许多DIV元素。 每个人-我们的箭。 这里是。
index.html (index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Analog Clock with Pure CSS3 (without javascript) | Script Tutorials</title>
<link href="css/layout.css" type="text/css" rel="stylesheet">
<link href="css/clocks.css" type="text/css" rel="stylesheet">
</head>
<body>
<header>
<h2>Analog Clock with Pure CSS3 (without javascript)</h2>
<a href="https://www.script-tutorials.com/analog-clock-with-pure-css3/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
</header>
<div class="container">
<div id="clock">
<div class="secs">
<div id="s1"></div><div id="s2"></div><div id="s3"></div>
<div id="s4"></div><div id="s5"></div><div id="s6"></div>
<div id="s7"></div><div id="s8"></div><div id="s9"></div>
<div id="s10"></div><div id="s11"></div><div id="s12"></div>
<div id="s13"></div><div id="s14"></div><div id="s15"></div>
<div id="s16"></div><div id="s17"></div><div id="s18"></div>
<div id="s19"></div><div id="s20"></div><div id="s21"></div>
<div id="s22"></div><div id="s23"></div><div id="s24"></div>
<div id="s25"></div><div id="s26"></div><div id="s27"></div>
<div id="s28"></div><div id="s29"></div><div id="s30"></div>
<div id="s31"></div><div id="s32"></div><div id="s33"></div>
<div id="s34"></div><div id="s35"></div><div id="s36"></div>
<div id="s37"></div><div id="s38"></div><div id="s39"></div>
<div id="s40"></div><div id="s41"></div><div id="s42"></div>
<div id="s43"></div><div id="s44"></div><div id="s45"></div>
<div id="s46"></div><div id="s47"></div><div id="s48"></div>
<div id="s49"></div><div id="s50"></div><div id="s51"></div>
<div id="s52"></div><div id="s53"></div><div id="s54"></div>
<div id="s55"></div><div id="s56"></div><div id="s57"></div>
<div id="s58"></div><div id="s59"></div><div id="s60"></div>
</div>
<div class="mins">
<div id="m1"></div><div id="m2"></div><div id="m3"></div>
<div id="m4"></div><div id="m5"></div><div id="m6"></div>
<div id="m7"></div><div id="m8"></div><div id="m9"></div>
<div id="m10"></div><div id="m11"></div><div id="m12"></div>
<div id="m13"></div><div id="m14"></div><div id="m15"></div>
<div id="m16"></div><div id="m17"></div><div id="m18"></div>
<div id="m19"></div><div id="m20"></div><div id="m21"></div>
<div id="m22"></div><div id="m23"></div><div id="m24"></div>
<div id="m25"></div><div id="m26"></div><div id="m27"></div>
<div id="m28"></div><div id="m29"></div><div id="m30"></div>
<div id="m31"></div><div id="m32"></div><div id="m33"></div>
<div id="m34"></div><div id="m35"></div><div id="m36"></div>
<div id="m37"></div><div id="m38"></div><div id="m39"></div>
<div id="m40"></div><div id="m41"></div><div id="m42"></div>
<div id="m43"></div><div id="m44"></div><div id="m45"></div>
<div id="m46"></div><div id="m47"></div><div id="m48"></div>
<div id="m49"></div><div id="m50"></div><div id="m51"></div>
<div id="m52"></div><div id="m53"></div><div id="m54"></div>
<div id="m55"></div><div id="m56"></div><div id="m57"></div>
<div id="m58"></div><div id="m59"></div><div id="m60"></div>
</div>
<div class="hours">
<div id="h1"></div><div id="h2"></div><div id="h3"></div>
<div id="h4"></div><div id="h5"></div><div id="h6"></div>
<div id="h7"></div><div id="h8"></div><div id="h9"></div>
<div id="h10"></div><div id="h11"></div><div id="h12"></div>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Analog Clock with Pure CSS3 (without javascript) | Script Tutorials</title>
<link href="css/layout.css" type="text/css" rel="stylesheet">
<link href="css/clocks.css" type="text/css" rel="stylesheet">
</head>
<body>
<header>
<h2>Analog Clock with Pure CSS3 (without javascript)</h2>
<a href="https://www.script-tutorials.com/analog-clock-with-pure-css3/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
</header>
<div class="container">
<div id="clock">
<div class="secs">
<div id="s1"></div><div id="s2"></div><div id="s3"></div>
<div id="s4"></div><div id="s5"></div><div id="s6"></div>
<div id="s7"></div><div id="s8"></div><div id="s9"></div>
<div id="s10"></div><div id="s11"></div><div id="s12"></div>
<div id="s13"></div><div id="s14"></div><div id="s15"></div>
<div id="s16"></div><div id="s17"></div><div id="s18"></div>
<div id="s19"></div><div id="s20"></div><div id="s21"></div>
<div id="s22"></div><div id="s23"></div><div id="s24"></div>
<div id="s25"></div><div id="s26"></div><div id="s27"></div>
<div id="s28"></div><div id="s29"></div><div id="s30"></div>
<div id="s31"></div><div id="s32"></div><div id="s33"></div>
<div id="s34"></div><div id="s35"></div><div id="s36"></div>
<div id="s37"></div><div id="s38"></div><div id="s39"></div>
<div id="s40"></div><div id="s41"></div><div id="s42"></div>
<div id="s43"></div><div id="s44"></div><div id="s45"></div>
<div id="s46"></div><div id="s47"></div><div id="s48"></div>
<div id="s49"></div><div id="s50"></div><div id="s51"></div>
<div id="s52"></div><div id="s53"></div><div id="s54"></div>
<div id="s55"></div><div id="s56"></div><div id="s57"></div>
<div id="s58"></div><div id="s59"></div><div id="s60"></div>
</div>
<div class="mins">
<div id="m1"></div><div id="m2"></div><div id="m3"></div>
<div id="m4"></div><div id="m5"></div><div id="m6"></div>
<div id="m7"></div><div id="m8"></div><div id="m9"></div>
<div id="m10"></div><div id="m11"></div><div id="m12"></div>
<div id="m13"></div><div id="m14"></div><div id="m15"></div>
<div id="m16"></div><div id="m17"></div><div id="m18"></div>
<div id="m19"></div><div id="m20"></div><div id="m21"></div>
<div id="m22"></div><div id="m23"></div><div id="m24"></div>
<div id="m25"></div><div id="m26"></div><div id="m27"></div>
<div id="m28"></div><div id="m29"></div><div id="m30"></div>
<div id="m31"></div><div id="m32"></div><div id="m33"></div>
<div id="m34"></div><div id="m35"></div><div id="m36"></div>
<div id="m37"></div><div id="m38"></div><div id="m39"></div>
<div id="m40"></div><div id="m41"></div><div id="m42"></div>
<div id="m43"></div><div id="m44"></div><div id="m45"></div>
<div id="m46"></div><div id="m47"></div><div id="m48"></div>
<div id="m49"></div><div id="m50"></div><div id="m51"></div>
<div id="m52"></div><div id="m53"></div><div id="m54"></div>
<div id="m55"></div><div id="m56"></div><div id="m57"></div>
<div id="m58"></div><div id="m59"></div><div id="m60"></div>
</div>
<div class="hours">
<div id="h1"></div><div id="h2"></div><div id="h3"></div>
<div id="h4"></div><div id="h5"></div><div id="h6"></div>
<div id="h7"></div><div id="h8"></div><div id="h9"></div>
<div id="h10"></div><div id="h11"></div><div id="h12"></div>
</div>
</div>
</div>
</body>
</html>
步骤2. CSS (Step 2. CSS)
Now – CSS styles. As usual, we won’t publish main page layout styles (layout.css). But, there are stylesheets for our clock:
现在-CSS样式。 和往常一样，我们不会发布主页布局样式(layout.css)。 但是，我们的时钟有一些样式表：
css / clocks.css (css/clocks.css)
#clock {
background: #fff url(cface.png) 0 0 no-repeat;
height: 500px;
margin: 0 auto;
overflow: hidden;
position: relative;
width: 500px;
-webkit-border-radius: 250px;
-moz-border-radius: 250px;
-ms-border-radius: 250px;
-o-border-radius: 250px;
border-radius: 250px;
}
/* seconds */
@-webkit-keyframes secs_effect {
0% {opacity: 1;}
1.66% {opacity: 1;}
1.67% {opacity: 0;}
100% {opacity: 0;}
}
@-moz-keyframes secs_effect {
0% {opacity: 1;}
1.66% {opacity: 1;}
1.67% {opacity: 0;}
100% {opacity: 0;}
}
#clock .secs {
height: 400px;
left: 155px;
position: absolute;
top: 249px;
width: 400px;
}
#clock .secs div {
background-color: #860000;
height: 2px;
opacity: 0;
position: absolute;
width: 190px;
-moz-animation-name: secs_effect;
-moz-animation-duration: 60s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: normal;
-moz-animation-delay: 0;
-moz-animation-play-state: running;
-moz-animation-fill-mode: forwards;
-webkit-animation-name: secs_effect;
-webkit-animation-duration: 60s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
}
#clock #s1 {
-moz-transform: rotate(-90deg) translatex(130px);
-moz-animation-delay: 0s;
-webkit-transform: rotate(-90deg) translatex(130px);
-webkit-animation-delay: 0s;
}
#clock #s2 {
-moz-transform: rotate(-84deg) translatex(130px);
-moz-animation-delay: 1s;
-webkit-transform: rotate(-84deg) translatex(130px);
-webkit-animation-delay: 1s;
}
#clock #s3 {
-moz-transform: rotate(-78deg) translatex(130px);
-moz-animation-delay: 2s;
-webkit-transform: rotate(-78deg) translatex(130px);
-webkit-animation-delay: 2s;
}
...........
#clock #s60 {
-moz-transform: rotate(264deg) translatex(130px);
-moz-animation-delay: 59s;
-webkit-transform: rotate(264deg) translatex(130px);
-webkit-animation-delay: 59s;
}
/* minutes */
@-webkit-keyframes mins_effect {
0% {opacity: 1;}
1.66% {opacity: 1;}
1.67% {opacity: 0;}
100% {opacity: 0;}
}
@-moz-keyframes mins_effect {
0% {opacity: 1;}
1.66% {opacity: 1;}
1.67% {opacity: 0;}
100% {opacity: 0;}
}
#clock .mins {
height: 300px;
left: 175px;
position: absolute;
top: 249px;
width: 300px;
}
#clock .mins div {
background-color: #000086;
height: 3px;
opacity: 0;
position: absolute;
width: 150px;
-moz-animation-name: mins_effect;
-moz-animation-duration: 3600s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: normal;
-moz-animation-delay: 0;
-moz-animation-play-state: running;
-moz-animation-fill-mode: forwards;
-webkit-animation-name: mins_effect;
-webkit-animation-duration: 3600s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
}
#clock #m1 {
-moz-transform: rotate(-90deg) translatex(110px);
-moz-animation-delay: 0s;
-webkit-transform: rotate(-90deg) translatex(110px);
-webkit-animation-delay: 0s;
}
#clock #m2 {
-moz-transform: rotate(-84deg) translatex(110px);
-moz-animation-delay: 60s;
-webkit-transform: rotate(-84deg) translatex(110px);
-webkit-animation-delay: 60s;
}
#clock #m3 {
-moz-transform: rotate(-78deg) translatex(110px);
-moz-animation-delay: 120s;
-webkit-transform: rotate(-78deg) translatex(110px);
-webkit-animation-delay: 120s;
}
...........
#clock #m60 {
-moz-transform: rotate(264deg) translatex(110px);
-moz-animation-delay: 3540s;
-webkit-transform: rotate(264deg) translatex(110px);
-webkit-animation-delay: 3540s;
}
/* hours */
@-webkit-keyframes hours_effect {
0% {opacity: 1;}
8.33% {opacity: 1;}
8.34% {opacity: 0;}
100% {opacity: 0;}
}
@-moz-keyframes hours_effect {
0% {opacity: 1;}
8.33% {opacity: 1;}
8.34% {opacity: 0;}
100% {opacity: 0;}
}
#clock .hours {
height: 300px;
left: 175px;
position: absolute;
top: 249px;
width: 300px;
}
#clock .hours div {
background-color: #860086;
height: 3px;
opacity: 0;
position: absolute;
width: 150px;
-moz-animation-name: hours_effect;
-moz-animation-duration: 43200s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: normal;
-moz-animation-delay: 0;
-moz-animation-play-state: running;
-moz-animation-fill-mode: forwards;
-webkit-animation-name: hours_effect;
-webkit-animation-duration: 43200s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
}
#clock #h1 {
-moz-transform: rotate(-180deg) translatex(110px);
-moz-animation-delay: 0s;
-webkit-transform: rotate(-180deg) translatex(110px);
-webkit-animation-delay: 0s;
}
#clock #h2 {
-moz-transform: rotate(-150deg) translatex(110px);
-moz-animation-delay: 3600s;
-webkit-transform: rotate(-150deg) translatex(110px);
-webkit-animation-delay: 3600s;
}
#clock #h3 {
-moz-transform: rotate(-120deg) translatex(110px);
-moz-animation-delay: 7200s;
-webkit-transform: rotate(-120deg) translatex(110px);
-webkit-animation-delay: 7200s;
}
...........
#clock #h12 {
-moz-transform: rotate(150deg) translatex(110px);
-moz-animation-delay: 39600s;
-webkit-transform: rotate(150deg) translatex(110px);
-webkit-animation-delay: 39600s;
}
#clock {
background: #fff url(cface.png) 0 0 no-repeat;
height: 500px;
margin: 0 auto;
overflow: hidden;
position: relative;
width: 500px;
-webkit-border-radius: 250px;
-moz-border-radius: 250px;
-ms-border-radius: 250px;
-o-border-radius: 250px;
border-radius: 250px;
}
/* seconds */
@-webkit-keyframes secs_effect {
0% {opacity: 1;}
1.66% {opacity: 1;}
1.67% {opacity: 0;}
100% {opacity: 0;}
}
@-moz-keyframes secs_effect {
0% {opacity: 1;}
1.66% {opacity: 1;}
1.67% {opacity: 0;}
100% {opacity: 0;}
}
#clock .secs {
height: 400px;
left: 155px;
position: absolute;
top: 249px;
width: 400px;
}
#clock .secs div {
background-color: #860000;
height: 2px;
opacity: 0;
position: absolute;
width: 190px;
-moz-animation-name: secs_effect;
-moz-animation-duration: 60s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: normal;
-moz-animation-delay: 0;
-moz-animation-play-state: running;
-moz-animation-fill-mode: forwards;
-webkit-animation-name: secs_effect;
-webkit-animation-duration: 60s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
}
#clock #s1 {
-moz-transform: rotate(-90deg) translatex(130px);
-moz-animation-delay: 0s;
-webkit-transform: rotate(-90deg) translatex(130px);
-webkit-animation-delay: 0s;
}
#clock #s2 {
-moz-transform: rotate(-84deg) translatex(130px);
-moz-animation-delay: 1s;
-webkit-transform: rotate(-84deg) translatex(130px);
-webkit-animation-delay: 1s;
}
#clock #s3 {
-moz-transform: rotate(-78deg) translatex(130px);
-moz-animation-delay: 2s;
-webkit-transform: rotate(-78deg) translatex(130px);
-webkit-animation-delay: 2s;
}
...........
#clock #s60 {
-moz-transform: rotate(264deg) translatex(130px);
-moz-animation-delay: 59s;
-webkit-transform: rotate(264deg) translatex(130px);
-webkit-animation-delay: 59s;
}
/* minutes */
@-webkit-keyframes mins_effect {
0% {opacity: 1;}
1.66% {opacity: 1;}
1.67% {opacity: 0;}
100% {opacity: 0;}
}
@-moz-keyframes mins_effect {
0% {opacity: 1;}
1.66% {opacity: 1;}
1.67% {opacity: 0;}
100% {opacity: 0;}
}
#clock .mins {
height: 300px;
left: 175px;
position: absolute;
top: 249px;
width: 300px;
}
#clock .mins div {
background-color: #000086;
height: 3px;
opacity: 0;
position: absolute;
width: 150px;
-moz-animation-name: mins_effect;
-moz-animation-duration: 3600s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: normal;
-moz-animation-delay: 0;
-moz-animation-play-state: running;
-moz-animation-fill-mode: forwards;
-webkit-animation-name: mins_effect;
-webkit-animation-duration: 3600s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
}
#clock #m1 {
-moz-transform: rotate(-90deg) translatex(110px);
-moz-animation-delay: 0s;
-webkit-transform: rotate(-90deg) translatex(110px);
-webkit-animation-delay: 0s;
}
#clock #m2 {
-moz-transform: rotate(-84deg) translatex(110px);
-moz-animation-delay: 60s;
-webkit-transform: rotate(-84deg) translatex(110px);
-webkit-animation-delay: 60s;
}
#clock #m3 {
-moz-transform: rotate(-78deg) translatex(110px);
-moz-animation-delay: 120s;
-webkit-transform: rotate(-78deg) translatex(110px);
-webkit-animation-delay: 120s;
}
...........
#clock #m60 {
-moz-transform: rotate(264deg) translatex(110px);
-moz-animation-delay: 3540s;
-webkit-transform: rotate(264deg) translatex(110px);
-webkit-animation-delay: 3540s;
}
/* hours */
@-webkit-keyframes hours_effect {
0% {opacity: 1;}
8.33% {opacity: 1;}
8.34% {opacity: 0;}
100% {opacity: 0;}
}
@-moz-keyframes hours_effect {
0% {opacity: 1;}
8.33% {opacity: 1;}
8.34% {opacity: 0;}
100% {opacity: 0;}
}
#clock .hours {
height: 300px;
left: 175px;
position: absolute;
top: 249px;
width: 300px;
}
#clock .hours div {
background-color: #860086;
height: 3px;
opacity: 0;
position: absolute;
width: 150px;
-moz-animation-name: hours_effect;
-moz-animation-duration: 43200s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: normal;
-moz-animation-delay: 0;
-moz-animation-play-state: running;
-moz-animation-fill-mode: forwards;
-webkit-animation-name: hours_effect;
-webkit-animation-duration: 43200s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
}
#clock #h1 {
-moz-transform: rotate(-180deg) translatex(110px);
-moz-animation-delay: 0s;
-webkit-transform: rotate(-180deg) translatex(110px);
-webkit-animation-delay: 0s;
}
#clock #h2 {
-moz-transform: rotate(-150deg) translatex(110px);
-moz-animation-delay: 3600s;
-webkit-transform: rotate(-150deg) translatex(110px);
-webkit-animation-delay: 3600s;
}
#clock #h3 {
-moz-transform: rotate(-120deg) translatex(110px);
-moz-animation-delay: 7200s;
-webkit-transform: rotate(-120deg) translatex(110px);
-webkit-animation-delay: 7200s;
}
...........
#clock #h12 {
-moz-transform: rotate(150deg) translatex(110px);
-moz-animation-delay: 39600s;
-webkit-transform: rotate(150deg) translatex(110px);
-webkit-animation-delay: 39600s;
}
Now – you can understand the main idea. I won’t publish all ‘recurring’ styles for each arrow. Full code you can find in our package.
现在–您可以了解主要思想。 我不会为每个箭头发布所有“重复出现”的样式。 您可以在我们的程序包中找到完整的代码。
步骤4.图片 (Step 4. Images)
For our clock I have used single image (as face of our clock):
对于我们的时钟，我使用了单个图像(作为我们的时钟)：
现场演示
打包下载
结论 (Conclusion)
Finally we have built our clock! This was difficult, but we did it. I hope that this will interesting addition to your website. Don’t forget to tell thanks and leave a comment. Good luck!
终于，我们建立了时钟！ 这很困难，但是我们做到了。 希望这会对您的网站有所帮助。 别忘了感谢并发表评论。 祝好运！
翻译自: https://www.script-tutorials.com/analog-clock-with-pure-css3/
171
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
