CSS3 时钟

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3 click</title>
    <style type="text/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;
}

    </style>
</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>

时间： 2024-11-16 17:30:52

CSS3 时钟的相关文章

纯CSS3时钟

本来打算还做一下系统时间动态时钟,但是奔着纯CSS3的目的去就不加了.. 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>css3时钟</title> 6 <style> 7 *{ 8 margin:0; 9 padding:0; 10 } 11 body{ 12 font

CSS3时钟式进度条

CSS3时钟式进度条,加载完成时生成一个圆,数字慢慢变成100,适时的显示加载进度.友情提醒,如果预览时网页左下角提示错误,刷新一下就可以看到效果了:实际使用中不会出现这样的问题. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=&

css3时钟

参考资料: 奇舞团: http://www.75team.com/archives/851 DEMO:demo 截图: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css3钟表</title> <style id="style"> body,html{width

CSS3简易表盘时钟

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css3时钟</title> <style> .box{ width: 300px; height: 300px; border-radius: 50%; border: 5px solid #ccc; margin: 100px auto; p

css3 简易时钟

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE-edge,chrome=1"> <meta name="viewport" content="width=devi

14款超时尚的HTML5时钟动画

时钟动画在网页应用中也非常广泛,在一些个人博客中,我们经常会看到一些相当个性化的HTML5时钟动画.今天我们向大家分享了14款形态各异的超时尚HTML5时钟动画,其中有圆盘时钟.3D时钟.个性化时钟等,强大的HTML5为时钟动画增添了不少精彩,希望能给大家带来帮助. 1.可爱的CSS3圆盘时钟动画 今天要分享的也是一款可爱的CSS3圆盘时钟动画,时钟背景是乳白色的,显得非常干净,另外,时钟也可以和你本地的时候保持同步. 在线演示 源码下载 2.HTML5 SVG圆盘时钟动画 5种时钟样式 今天我

10款功能强大的jQuery/CSS3图片特效插件

1.CSS3实现的底部带滚动云彩效果的网站登录页面 CSS3实现的底部带滚动云彩效果的网站登录页面特效源码,是一段实现页面底部拥有滚动云彩动态效果的特效源码,想要在网站中实现此类效果的朋友们可以前来下载使用.本段代码兼容目前最新的各类主流浏览器,是一款非常优秀的特效源码. 在线演示 源码下载 2.HTML5实现的3D球体斑点运动动画特效源码 这是一个很酷的HTML5 3D动画效果,是一个小球,小球表面出现跳动的斑点,斑点跳动时形成各种各样的形状,其实这款动画并不是正宗的HTML5 3D动画,而是

14款形态各异的超时尚HTML5时钟动画

14款超时尚的HTML5时钟动画(附源码)   时钟动画在网页应用中也非常广泛,在一些个人博客中,我们经常会看到一些相当个性化的HTML5时钟动画.今天我们向大家分享了14款形态各异的超时尚HTML5时钟动画,其中有圆盘时钟.3D时钟.个性化时钟等,强大的HTML5为时钟动画增添了不少精彩,希望能给大家带来帮助. 1.可爱的CSS3圆盘时钟动画 在线演示:http://www.html5tricks.com/demo/css3-circle-clock/index.html 源码下载:http:

9种jQuery和css3图片动画特效代码演示

1.自由旋转的jQuery图片 演示和下载地址 2.css3阴影动画效果 演示和下载地址 3.拉窗帘特效图片 演示和下载地址 4.css3文字特效动画 演示和下载地址 5.css3时钟代码 演示和下载地址 6.css3图片放大动画 演示和下载地址 7.jQuery滑块图片展开效果 演示和下载地址 8.css3文字阴影 演示和下载地址 9.jQuery 3d图片旋转特效 演示和下载地址