你的位置:首页 > 软件开发 > 网页设计 > CSS3 时钟

CSS3 时钟

发布时间:2016-08-11 20:00:28
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS3 click</title ...

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>

原标题:CSS3 时钟

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。