找回密码
 立即注册

QQ登录

只需一步，快速开始

首页 › Wyn 商业智能专区 › 插件和资源 › 查看内容
发新帖

ZenosZeng 讲师达人认证 悬赏达人认证

超级版主

300

主题

7876

帖子

1万

积分

超级版主

Rank: 8Rank: 8

积分
13140

活字格认证圣诞拼拼乐微信认证勋章讲师达人元老葡萄悬赏达人

最新发帖

仪表板动效元素：多款时钟

ZenosZeng 讲师达人认证 悬赏达人认证
超级版主   /  发表于：2021-1-29 00:37  /   查看：3318  /  回复：2
在仪表板设计时，经常需要添加一些动效来提升视觉冲击力，这个帖子主要介绍多款时钟。

实现步骤：
1、在仪表板中添加外部扩展
image.png373092650.png

2、将以下代码粘贴到外部扩展的Html视图中，点击确定
image.png855373229.png
  1. <html>
  2. <head>
  3. <style>
  4. .clock-wrapper {
  5.   position: absolute;
  6.   top: 0;
  7.   left: 0;
  8.   height: 100%;
  9.   width: 100%;
  10.   overflow: hidden;
  11. }
  12. .clock-border {
  13.   position: absolute;
  14.   top: 0;
  15.   bottom: 0;
  16.   left: 0;
  17.   right: 0;
  18.   margin: auto;
  19.   width: 460px;
  20.   height: 460px;
  21.   border-width: 18px;
  22.   border-color: transparent #d2d8df #d2d8df;
  23.   border-style: solid;
  24.   -webkit-border-radius: 50%;
  25.   -webkit-background-clip: padding-box;
  26.   -moz-border-radius: 50%;
  27.   -moz-background-clip: padding;
  28.   border-radius: 50%;
  29.   background-clip: padding-box;
  30.   -webkit-transform: rotate(45deg);
  31.   -moz-transform: rotate(45deg);
  32.   -ms-transform: rotate(45deg);
  33.   -o-transform: rotate(45deg);
  34.   transform: rotate(45deg);
  35.   -webkit-animation: rotate-clock-border 0.69s cubic-bezier(0.645, 0, 0.605, 1) 0.69s 1 forwards;
  36.   -moz-animation: rotate-clock-border 0.69s cubic-bezier(0.645, 0, 0.605, 1) 0.69s 1 forwards;
  37.   -o-animation: rotate-clock-border 0.69s cubic-bezier(0.645, 0, 0.605, 1) 0.69s 1 forwards;
  38.   animation: rotate-clock-border 0.69s cubic-bezier(0.645, 0, 0.605, 1) 0.69s 1 forwards;
  39.   -webkit-animation-timing-function: cubic-bezier(0.645, -0.18, 0.605, 1.36);
  40.   -moz-animation-timing-function: cubic-bezier(0.645, -0.18, 0.605, 1.36);
  41.   -o-animation-timing-function: cubic-bezier(0.645, -0.18, 0.605, 1.36);
  42.   animation-timing-function: cubic-bezier(0.645, -0.18, 0.605, 1.36);
  43. }
  44. .clock {
  45.   position: absolute;
  46.   top: 0;
  47.   bottom: 0;
  48.   left: 0;
  49.   right: 0;
  50.   margin: auto;
  51.   width: 400px;
  52.   height: 400px;
  53.   padding: 0;
  54.   background-color: #262c33;
  55.   border: 18px solid #373f4a;
  56.   -webkit-border-radius: 50%;
  57.   -webkit-background-clip: padding-box;
  58.   -moz-border-radius: 50%;
  59.   -moz-background-clip: padding;
  60.   border-radius: 50%;
  61.   background-clip: padding-box;
  62.   -webkit-background-clip: border-box;
  63.   -moz-background-clip: border-box;
  64.   background-clip: border-box;
  65.   -webkit-transform: rotate(-45deg);
  66.   -moz-transform: rotate(-45deg);
  67.   -ms-transform: rotate(-45deg);
  68.   -o-transform: rotate(-45deg);
  69.   transform: rotate(-45deg);
  70.   -webkit-animation: counterrotate-clock 0.69s cubic-bezier(0.645, 0, 0.605, 1) 0.69s 1 forwards;
  71.   -moz-animation: counterrotate-clock 0.69s cubic-bezier(0.645, 0, 0.605, 1) 0.69s 1 forwards;
  72.   -o-animation: counterrotate-clock 0.69s cubic-bezier(0.645, 0, 0.605, 1) 0.69s 1 forwards;
  73.   animation: counterrotate-clock 0.69s cubic-bezier(0.645, 0, 0.605, 1) 0.69s 1 forwards;
  74.   -webkit-animation-timing-function: cubic-bezier(0.645, -0.18, 0.605, 1.36);
  75.   -moz-animation-timing-function: cubic-bezier(0.645, -0.18, 0.605, 1.36);
  76.   -o-animation-timing-function: cubic-bezier(0.645, -0.18, 0.605, 1.36);
  77.   animation-timing-function: cubic-bezier(0.645, -0.18, 0.605, 1.36);
  78. }
  79. lesshat-selector {
  80.   -lh-property: 0; }
  81. @-webkit-keyframes rotate-clock-border{ 0%{ -webkit-transform: rotate( 45deg); } 100%{ -webkit-transform: rotate( 315deg); }}
  82. @-moz-keyframes rotate-clock-border{ 0%{ -moz-transform: rotate( 45deg); } 100%{ -moz-transform: rotate( 315deg); }}
  83. @-o-keyframes rotate-clock-border{ 0%{ -o-transform: rotate( 45deg); } 100%{ -o-transform: rotate( 315deg); }}
  84. @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); }}
  85. [not-existing] {
  86.   zoom: 1;
  87. }
  88. lesshat-selector {
  89.   -lh-property: 0; }
  90. @-webkit-keyframes counterrotate-clock{ 0%{ -webkit-transform: rotate(-45deg); } 100%{ -webkit-transform: rotate(-315deg); }}
  91. @-moz-keyframes counterrotate-clock{ 0%{ -moz-transform: rotate(-45deg); } 100%{ -moz-transform: rotate(-315deg); }}
  92. @-o-keyframes counterrotate-clock{ 0%{ -o-transform: rotate(-45deg); } 100%{ -o-transform: rotate(-315deg); }}
  93. @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); }}
  94. [not-existing] {
  95.   zoom: 1;
  96. }
  97. .hour {
  98.   position: absolute;
  99.   top: 0;
  100.   bottom: 0;
  101.   left: 0;
  102.   right: 0;
  103.   margin: auto;
  104.   -webkit-transform: rotate(84deg);
  105.   -moz-transform: rotate(84deg);
  106.   -ms-transform: rotate(84deg);
  107.   -o-transform: rotate(84deg);
  108.   transform: rotate(84deg);
  109. }
  110. .hour .hand {
  111.   position: absolute;
  112.   top: 0;
  113.   bottom: 0;
  114.   left: 0;
  115.   right: 0;
  116.   margin: auto;
  117.   -webkit-animation: tick 43200s normal infinite steps(3600, end) 3s;
  118.   -moz-animation: tick 43200s normal infinite steps(3600, end) 3s;
  119.   -o-animation: tick 43200s normal infinite steps(3600, end) 3s;
  120.   animation: tick 43200s normal infinite steps(3600, end) 3s;
  121. }
  122. .hour .hand:before {
  123.   content: '';
  124.   position: absolute;
  125.   bottom: 0;
  126.   left: 0;
  127.   right: 0;
  128.   margin: auto;
  129.   display: inline-block;
  130.   top: 0;
  131.   width: 16px;
  132.   height: 120px;
  133.   height: 0;
  134.   -webkit-border-top-left-radius: 2px;
  135.   -moz-border-radius-topleft: 2px;
  136.   border-top-left-radius: 2px;
  137.   -webkit-border-top-right-radius: 2px;
  138.   -webkit-background-clip: padding-box;
  139.   -moz-border-radius-topright: 2px;
  140.   -moz-background-clip: padding;
  141.   border-top-right-radius: 2px;
  142.   background-clip: padding-box;
  143.   -webkit-transform-origin: center 100%;
  144.   -moz-transform-origin: center 100%;
  145.   -ms-transform-origin: center 100%;
  146.   -o-transform-origin: center 100%;
  147.   transform-origin: center 100%;
  148.   background-color: #fff;
  149. }
  150. .hour .hand:after {
  151.   content: '';
  152.   position: absolute;
  153.   bottom: 0;
  154.   left: 0;
  155.   right: 0;
  156.   margin: auto;
  157.   top: 0;
  158.   display: inline-block;
  159.   border-bottom: 16px solid #fff;
  160.   border-left: 8px solid transparent;
  161.   border-right: 8px solid transparent;
  162.   width: 0px;
  163.   height: 0px;
  164.   -webkit-transform-origin: center 100%;
  165.   -moz-transform-origin: center 100%;
  166.   -ms-transform-origin: center 100%;
  167.   -o-transform-origin: center 100%;
  168.   transform-origin: center 100%;
  169. }
  170. .hour .hand:before {
  171.   -webkit-animation: hour-grow-before 0.4s cubic-bezier(0.69, 0, 0.49, 1) 1.35s 1 forwards;
  172.   -moz-animation: hour-grow-before 0.4s cubic-bezier(0.69, 0, 0.49, 1) 1.35s 1 forwards;
  173.   -o-animation: hour-grow-before 0.4s cubic-bezier(0.69, 0, 0.49, 1) 1.35s 1 forwards;
  174.   animation: hour-grow-before 0.4s cubic-bezier(0.69, 0, 0.49, 1) 1.35s 1 forwards;
  175.   -webkit-animation-timing-function: cubic-bezier(0.69, -0.06, 0.49, 1.4);
  176.   -moz-animation-timing-function: cubic-bezier(0.69, -0.06, 0.49, 1.4);
  177.   -o-animation-timing-function: cubic-bezier(0.69, -0.06, 0.49, 1.4);
  178.   animation-timing-function: cubic-bezier(0.69, -0.06, 0.49, 1.4);
  179. }
  180. .hour .hand:before lesshat-selector {
  181.   -lh-property: 0; }
  182. @-webkit-keyframes hour-grow-before{ 0%{ height: 0; top: 0; } 100%{ height: 120px; top: -120px; }}
  183. @-moz-keyframes hour-grow-before{ 0%{ height: 0; top: 0; } 100%{ height: 120px; top: -120px; }}
  184. @-o-keyframes hour-grow-before{ 0%{ height: 0; top: 0; } 100%{ height: 120px; top: -120px; }}
  185. @keyframes hour-grow-before{ 0%{ height: 0; top: 0; } 100%{ height: 120px; top: -120px; }}
  186. [not-existing] {
  187.   zoom: 1;
  188. }
  189. .hour .hand:after {
  190.   -webkit-animation: hour-grow-after 0.4s cubic-bezier(0.69, 0, 0.49, 1) 1.35s 1 forwards;
  191.   -moz-animation: hour-grow-after 0.4s cubic-bezier(0.69, 0, 0.49, 1) 1.35s 1 forwards;
  192.   -o-animation: hour-grow-after 0.4s cubic-bezier(0.69, 0, 0.49, 1) 1.35s 1 forwards;
  193.   animation: hour-grow-after 0.4s cubic-bezier(0.69, 0, 0.49, 1) 1.35s 1 forwards;
  194.   -webkit-animation-timing-function: cubic-bezier(0.69, -0.06, 0.49, 1.4);
  195.   -moz-animation-timing-function: cubic-bezier(0.69, -0.06, 0.49, 1.4);
  196.   -o-animation-timing-function: cubic-bezier(0.69, -0.06, 0.49, 1.4);
  197.   animation-timing-function: cubic-bezier(0.69, -0.06, 0.49, 1.4);
  198. }
  199. .hour .hand:after lesshat-selector {
  200.   -lh-property: 0; }
  201. @-webkit-keyframes hour-grow-after{ 0%{ top: 0; } 100%{ top: -254px; }}
  202. @-moz-keyframes hour-grow-after{ 0%{ top: 0; } 100%{ top: -254px; }}
  203. @-o-keyframes hour-grow-after{ 0%{ top: 0; } 100%{ top: -254px; }}
  204. @keyframes hour-grow-after{ 0%{ top: 0; } 100%{ top: -254px; }}
  205. [not-existing] {
  206.   zoom: 1;
  207. }
  208. .minute {
  209.   position: absolute;
  210.   top: 0;
  211.   bottom: 0;
  212.   left: 0;
  213.   right: 0;
  214.   margin: auto;
  215.   -webkit-transform: rotate(288deg);
  216.   -moz-transform: rotate(288deg);
  217.   -ms-transform: rotate(288deg);
  218.   -o-transform: rotate(288deg);
  219.   transform: rotate(288deg);
  220. }
  221. .minute .hand {
  222.   position: absolute;
  223.   top: 0;
  224.   bottom: 0;
  225.   left: 0;
  226.   right: 0;
  227.   margin: auto;
  228.   -webkit-animation: tick 3600s normal infinite steps(3600, end) 3s;
  229.   -moz-animation: tick 3600s normal infinite steps(3600, end) 3s;
  230.   -o-animation: tick 3600s normal infinite steps(3600, end) 3s;
  231.   animation: tick 3600s normal infinite steps(3600, end) 3s;
  232. }
  233. .minute .hand:before {
  234.   content: '';
  235.   position: absolute;
  236.   bottom: 0;
  237.   left: 0;
  238.   right: 0;
  239.   margin: auto;
  240.   display: inline-block;
  241.   top: 0;
  242.   width: 12px;
  243.   height: 168px;
  244.   height: 0;
  245.   -webkit-border-top-left-radius: 2px;
  246.   -moz-border-radius-topleft: 2px;
  247.   border-top-left-radius: 2px;
  248.   -webkit-border-top-right-radius: 2px;
  249.   -webkit-background-clip: padding-box;
  250.   -moz-border-radius-topright: 2px;
  251.   -moz-background-clip: padding;
  252.   border-top-right-radius: 2px;
  253.   background-clip: padding-box;
  254.   -webkit-transform-origin: center 100%;
  255.   -moz-transform-origin: center 100%;
  256.   -ms-transform-origin: center 100%;
  257.   -o-transform-origin: center 100%;
  258.   transform-origin: center 100%;
  259.   background-color: #fff;
  260. }
  261. .minute .hand:after {
  262.   content: '';
  263.   position: absolute;
  264.   bottom: 0;
  265.   left: 0;
  266.   right: 0;
  267.   margin: auto;
  268.   top: 0;
  269.   display: inline-block;
  270.   border-bottom: 12px solid #fff;
  271.   border-left: 6px solid transparent;
  272.   border-right: 6px solid transparent;
  273.   width: 0px;
  274.   height: 0px;
  275.   -webkit-transform-origin: center 100%;
  276.   -moz-transform-origin: center 100%;
  277.   -ms-transform-origin: center 100%;
  278.   -o-transform-origin: center 100%;
  279.   transform-origin: center 100%;
  280. }
  281. .minute .hand:before {
  282.   -webkit-animation: minute-grow-before 0.4s cubic-bezier(0.69, 0, 0.49, 1) 1.6s 1 forwards;
  283.   -moz-animation: minute-grow-before 0.4s cubic-bezier(0.69, 0, 0.49, 1) 1.6s 1 forwards;
  284.   -o-animation: minute-grow-before 0.4s cubic-bezier(0.69, 0, 0.49, 1) 1.6s 1 forwards;
  285.   animation: minute-grow-before 0.4s cubic-bezier(0.69, 0, 0.49, 1) 1.6s 1 forwards;
  286.   -webkit-animation-timing-function: cubic-bezier(0.69, -0.06, 0.49, 1.4);
  287.   -moz-animation-timing-function: cubic-bezier(0.69, -0.06, 0.49, 1.4);
  288.   -o-animation-timing-function: cubic-bezier(0.69, -0.06, 0.49, 1.4);
  289.   animation-timing-function: cubic-bezier(0.69, -0.06, 0.49, 1.4);
  290. }
  291. .minute .hand:before lesshat-selector {
  292.   -lh-property: 0; }
  293. @-webkit-keyframes minute-grow-before{ 0%{ height: 0; top: 0; } 100%{ height: 168px; top: -168px; }}
  294. @-moz-keyframes minute-grow-before{ 0%{ height: 0; top: 0; } 100%{ height: 168px; top: -168px; }}
  295. @-o-keyframes minute-grow-before{ 0%{ height: 0; top: 0; } 100%{ height: 168px; top: -168px; }}
  296. @keyframes minute-grow-before{ 0%{ height: 0; top: 0; } 100%{ height: 168px; top: -168px; }}
  297. [not-existing] {
  298.   zoom: 1;
  299. }
  300. .minute .hand:after {
  301.   -webkit-animation: minute-grow-after 0.4s cubic-bezier(0.69, 0, 0.49, 1) 1.6s 1 forwards;
  302.   -moz-animation: minute-grow-after 0.4s cubic-bezier(0.69, 0, 0.49, 1) 1.6s 1 forwards;
  303.   -o-animation: minute-grow-after 0.4s cubic-bezier(0.69, 0, 0.49, 1) 1.6s 1 forwards;
  304.   animation: minute-grow-after 0.4s cubic-bezier(0.69, 0, 0.49, 1) 1.6s 1 forwards;
  305.   -webkit-animation-timing-function: cubic-bezier(0.69, -0.06, 0.49, 1.4);
  306.   -moz-animation-timing-function: cubic-bezier(0.69, -0.06, 0.49, 1.4);
  307.   -o-animation-timing-function: cubic-bezier(0.69, -0.06, 0.49, 1.4);
  308.   animation-timing-function: cubic-bezier(0.69, -0.06, 0.49, 1.4);
  309. }
  310. .minute .hand:after lesshat-selector {
  311.   -lh-property: 0; }
  312. @-webkit-keyframes minute-grow-after{ 0%{ top: 0; } 100%{ top: -346px; }}
  313. @-moz-keyframes minute-grow-after{ 0%{ top: 0; } 100%{ top: -346px; }}
  314. @-o-keyframes minute-grow-after{ 0%{ top: 0; } 100%{ top: -346px; }}
  315. @keyframes minute-grow-after{ 0%{ top: 0; } 100%{ top: -346px; }}
  316. [not-existing] {
  317.   zoom: 1;
  318. }
  319. .second {
  320.   position: absolute;
  321.   top: 0;
  322.   bottom: 0;
  323.   left: 0;
  324.   right: 0;
  325.   margin: auto;
  326.   -webkit-transform: rotate(0);
  327.   -moz-transform: rotate(0);
  328.   -ms-transform: rotate(0);
  329.   -o-transform: rotate(0);
  330.   transform: rotate(0);
  331. }
  332. .second .hand {
  333.   position: absolute;
  334.   top: 0;
  335.   bottom: 0;
  336.   left: 0;
  337.   right: 0;
  338.   margin: auto;
  339.   -webkit-animation: tick-second 1s normal infinite steps(30, end) 3s;
  340.   -moz-animation: tick-second 1s normal infinite steps(30, end) 3s;
  341.   -o-animation: tick-second 1s normal infinite steps(30, end) 3s;
  342.   animation: tick-second 1s normal infinite steps(30, end) 3s;
  343. }
  344. .second .hand:before {
  345.   content: '';
  346.   display: inline-block;
  347.   position: absolute;
  348.   bottom: 0;
  349.   left: 0;
  350.   right: 0;
  351.   margin: auto;
  352.   top: 0;
  353.   width: 8px;
  354.   height: 0px;
  355.   background-color: #f16b41;
  356.   -webkit-border-radius: 8px;
  357.   -webkit-background-clip: padding-box;
  358.   -moz-border-radius: 8px;
  359.   -moz-background-clip: padding;
  360.   border-radius: 8px;
  361.   background-clip: padding-box;
  362.   -webkit-transform-origin: center 180px;
  363.   -moz-transform-origin: center 180px;
  364.   -ms-transform-origin: center 180px;
  365.   -o-transform-origin: center 180px;
  366.   transform-origin: center 180px;
  367.   -webkit-animation: second-grow 1.6s cubic-bezier(1, 0, 0, 1) 1.45s 1 forwards, second 60s normal infinite steps(60, end) 3s;
  368.   -moz-animation: second-grow 1.6s cubic-bezier(1, 0, 0, 1) 1.45s 1 forwards, second 60s normal infinite steps(60, end) 3s;
  369.   -o-animation: second-grow 1.6s cubic-bezier(1, 0, 0, 1) 1.45s 1 forwards, second 60s normal infinite steps(60, end) 3s;
  370.   animation: second-grow 1.6s cubic-bezier(1, 0, 0, 1) 1.45s 1 forwards, second 60s normal infinite steps(60, end) 3s;
  371. }
  372. .second .hand:before lesshat-selector {
  373.   -lh-property: 0; }
  374. @-webkit-keyframes second-grow{ from { top: 0; height: 0; } 100%{ top: -120px; height: 240px; }}
  375. @-moz-keyframes second-grow{ from { top: 0; height: 0; } 100%{ top: -120px; height: 240px; }}
  376. @-o-keyframes second-grow{ from { top: 0; height: 0; } 100%{ top: -120px; height: 240px; }}
  377. @keyframes second-grow{ from { top: 0; height: 0; } 100%{ top: -120px; height: 240px; }}
  378. [not-existing] {
  379.   zoom: 1;
  380. }
  381. .second .hand:after {
  382.   content: '';
  383.   position: absolute;
  384.   top: 0;
  385.   bottom: 0;
  386.   left: 0;
  387.   right: 0;
  388.   margin: auto;
  389.   display: inline-block;
  390.   width: 32px;
  391.   height: 32px;
  392.   -webkit-border-radius: 32px;
  393.   -webkit-background-clip: padding-box;
  394.   -moz-border-radius: 32px;
  395.   -moz-background-clip: padding;
  396.   border-radius: 32px;
  397.   background-clip: padding-box;
  398.   background-color: #f16b41;
  399. }
  400. lesshat-selector {
  401.   -lh-property: 0; }
  402. @-webkit-keyframes tick{ 0%{ -webkit-transform: rotate(0deg); } 100%{ -webkit-transform: rotate(360deg); }}
  403. @-moz-keyframes tick{ 0%{ -moz-transform: rotate(0deg); } 100%{ -moz-transform: rotate(360deg); }}
  404. @-o-keyframes tick{ 0%{ -o-transform: rotate(0deg); } 100%{ -o-transform: rotate(360deg); }}
  405. @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); }}
  406. [not-existing] {
  407.   zoom: 1;
  408. }
  409. lesshat-selector {
  410.   -lh-property: 0; }
  411. @-webkit-keyframes second{ 0%{ -webkit-transform: rotate(0deg) } 100%{ -webkit-transform: rotate(360deg) }}
  412. @-moz-keyframes second{ 0%{ -moz-transform: rotate(0deg) } 100%{ -moz-transform: rotate(360deg) }}
  413. @-o-keyframes second{ 0%{ -o-transform: rotate(0deg) } 100%{ -o-transform: rotate(360deg) }}
  414. @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);}}
  415. [not-existing] {
  416.   zoom: 1;
  417. }
  418. lesshat-selector {
  419.   -lh-property: 0; }
  420. @-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); }}
  421. @-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); }}
  422. @-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); }}
  423. @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); }}
  424. [not-existing] {
  425.   zoom: 1;
  426. }
  427. .minute-marks {
  428.   display: inline-block;
  429.   padding: 0;
  430.   margin: 0;
  431.   list-style-type: none;
  432.   width: 0px;
  433.   height: 0px;
  434. }
  435. .minute-marks li {
  436.   position: absolute;
  437.   top: 0;
  438.   bottom: 0;
  439.   left: 0;
  440.   right: 0;
  441.   margin: auto;
  442.   display: inline-block;
  443.   width: 200px;
  444.   height: 200px;
  445. }
  446. .minute-marks li:before,
  447. .minute-marks li:after {
  448.   content: '';
  449.   position: absolute;
  450.   top: 0;
  451.   bottom: 0;
  452.   left: 0;
  453.   right: 0;
  454.   margin: auto;
  455.   width: 0px;
  456.   height: 0px;
  457.   display: inline-block;
  458.   border-color: #d4d5d6;
  459.   border-width: 4px;
  460.   border-style: solid;
  461.   -webkit-border-radius: 4px;
  462.   -webkit-background-clip: padding-box;
  463.   -moz-border-radius: 4px;
  464.   -moz-background-clip: padding;
  465.   border-radius: 4px;
  466.   background-clip: padding-box;
  467.   zoom: 1;
  468.   filter: alpha(opacity=0);
  469.   -webkit-opacity: 0;
  470.   -moz-opacity: 0;
  471.   opacity: 0;
  472.   -webkit-animation: fade-in 0.1s ease 0s 1 forwards;
  473.   -moz-animation: fade-in 0.1s ease 0s 1 forwards;
  474.   -o-animation: fade-in 0.1s ease 0s 1 forwards;
  475.   animation: fade-in 0.1s ease 0s 1 forwards;
  476. }
  477. .minute-marks li:before lesshat-selector,
  478. .minute-marks li:after lesshat-selector {
  479.   -lh-property: 0; }
  480. @-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; }}
  481. @-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; }}
  482. @-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; }}
  483. @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; }}
  484. [not-existing] {
  485.   zoom: 1;
  486. }
  487. .minute-marks li:before {
  488.   top: -380px;
  489. }
  490. .minute-marks li:after {
  491.   bottom: -380px;
  492. }
  493. .minute-marks li.five:before,
  494. .minute-marks li.five:after {
  495.   width: 0px;
  496.   height: 20px;
  497. }
  498. .minute-marks li.five:before {
  499.   top: -360px;
  500. }
  501. .minute-marks li.five:after {
  502.   bottom: -360px;
  503. }
  504. .minute-marks li:nth-child(1) {
  505.   -webkit-transform: rotate(0);
  506.   -moz-transform: rotate(0);
  507.   -ms-transform: rotate(0);
  508.   -o-transform: rotate(0);
  509.   transform: rotate(0);
  510. }
  511. .minute-marks li:nth-child(1):before {
  512.   -webkit-animation-delay: 0.017s;
  513.   -moz-animation-delay: 0.017s;
  514.   -o-animation-delay: 0.017s;
  515.   animation-delay: 0.017s;
  516. }
  517. .minute-marks li:nth-child(1):after {
  518.   -webkit-animation-delay: 0.544s;
  519.   -moz-animation-delay: 0.544s;
  520.   -o-animation-delay: 0.544s;
  521.   animation-delay: 0.544s;
  522. }
  523. .minute-marks li:nth-child(2) {
  524.   -webkit-transform: rotate(6deg);
  525.   -moz-transform: rotate(6deg);
  526.   -ms-transform: rotate(6deg);
  527.   -o-transform: rotate(6deg);
  528.   transform: rotate(6deg);
  529. }
  530. .minute-marks li:nth-child(2):before {
  531.   -webkit-animation-delay: 0.034s;
  532.   -moz-animation-delay: 0.034s;
  533.   -o-animation-delay: 0.034s;
  534.   animation-delay: 0.034s;
  535. }
  536. .minute-marks li:nth-child(2):after {
  537.   -webkit-animation-delay: 0.561s;
  538.   -moz-animation-delay: 0.561s;
  539.   -o-animation-delay: 0.561s;
  540.   animation-delay: 0.561s;
  541. }
  542. .minute-marks li:nth-child(3) {
  543.   -webkit-transform: rotate(12deg);
  544.   -moz-transform: rotate(12deg);
  545.   -ms-transform: rotate(12deg);
  546.   -o-transform: rotate(12deg);
  547.   transform: rotate(12deg);
  548. }
  549. .minute-marks li:nth-child(3):before {
  550.   -webkit-animation-delay: 0.051000000000000004s;
  551.   -moz-animation-delay: 0.051000000000000004s;
  552.   -o-animation-delay: 0.051000000000000004s;
  553.   animation-delay: 0.051000000000000004s;
  554. }
  555. .minute-marks li:nth-child(3):after {
  556.   -webkit-animation-delay: 0.5780000000000001s;
  557.   -moz-animation-delay: 0.5780000000000001s;
  558.   -o-animation-delay: 0.5780000000000001s;
  559.   animation-delay: 0.5780000000000001s;
  560. }
  561. .minute-marks li:nth-child(4) {
  562.   -webkit-transform: rotate(18deg);
  563.   -moz-transform: rotate(18deg);
  564.   -ms-transform: rotate(18deg);
  565.   -o-transform: rotate(18deg);
  566.   transform: rotate(18deg);
  567. }
  568. .minute-marks li:nth-child(4):before {
  569.   -webkit-animation-delay: 0.068s;
  570.   -moz-animation-delay: 0.068s;
  571.   -o-animation-delay: 0.068s;
  572.   animation-delay: 0.068s;
  573. }
  574. .minute-marks li:nth-child(4):after {
  575.   -webkit-animation-delay: 0.595s;
  576.   -moz-animation-delay: 0.595s;
  577.   -o-animation-delay: 0.595s;
  578.   animation-delay: 0.595s;
  579. }
  580. .minute-marks li:nth-child(5) {
  581.   -webkit-transform: rotate(24deg);
  582.   -moz-transform: rotate(24deg);
  583.   -ms-transform: rotate(24deg);
  584.   -o-transform: rotate(24deg);
  585.   transform: rotate(24deg);
  586. }
  587. .minute-marks li:nth-child(5):before {
  588.   -webkit-animation-delay: 0.085s;
  589.   -moz-animation-delay: 0.085s;
  590.   -o-animation-delay: 0.085s;
  591.   animation-delay: 0.085s;
  592. }
  593. .minute-marks li:nth-child(5):after {
  594.   -webkit-animation-delay: 0.612s;
  595.   -moz-animation-delay: 0.612s;
  596.   -o-animation-delay: 0.612s;
  597.   animation-delay: 0.612s;
  598. }
  599. .minute-marks li:nth-child(6) {
  600.   -webkit-transform: rotate(30deg);
  601.   -moz-transform: rotate(30deg);
  602.   -ms-transform: rotate(30deg);
  603.   -o-transform: rotate(30deg);
  604.   transform: rotate(30deg);
  605. }
  606. .minute-marks li:nth-child(6):before {
  607.   -webkit-animation-delay: 0.10200000000000001s;
  608.   -moz-animation-delay: 0.10200000000000001s;
  609.   -o-animation-delay: 0.10200000000000001s;
  610.   animation-delay: 0.10200000000000001s;
  611. }
  612. .minute-marks li:nth-child(6):after {
  613.   -webkit-animation-delay: 0.629s;
  614.   -moz-animation-delay: 0.629s;
  615.   -o-animation-delay: 0.629s;
  616.   animation-delay: 0.629s;
  617. }
  618. .minute-marks li:nth-child(7) {
  619.   -webkit-transform: rotate(36deg);
  620.   -moz-transform: rotate(36deg);
  621.   -ms-transform: rotate(36deg);
  622.   -o-transform: rotate(36deg);
  623.   transform: rotate(36deg);
  624. }
  625. .minute-marks li:nth-child(7):before {
  626.   -webkit-animation-delay: 0.11900000000000001s;
  627.   -moz-animation-delay: 0.11900000000000001s;
  628.   -o-animation-delay: 0.11900000000000001s;
  629.   animation-delay: 0.11900000000000001s;
  630. }
  631. .minute-marks li:nth-child(7):after {
  632.   -webkit-animation-delay: 0.646s;
  633.   -moz-animation-delay: 0.646s;
  634.   -o-animation-delay: 0.646s;
  635.   animation-delay: 0.646s;
  636. }
  637. .minute-marks li:nth-child(8) {
  638.   -webkit-transform: rotate(42deg);
  639.   -moz-transform: rotate(42deg);
  640.   -ms-transform: rotate(42deg);
  641.   -o-transform: rotate(42deg);
  642.   transform: rotate(42deg);
  643. }
  644. .minute-marks li:nth-child(8):before {
  645.   -webkit-animation-delay: 0.136s;
  646.   -moz-animation-delay: 0.136s;
  647.   -o-animation-delay: 0.136s;
  648.   animation-delay: 0.136s;
  649. }
  650. .minute-marks li:nth-child(8):after {
  651.   -webkit-animation-delay: 0.663s;
  652.   -moz-animation-delay: 0.663s;
  653.   -o-animation-delay: 0.663s;
  654.   animation-delay: 0.663s;
  655. }
  656. .minute-marks li:nth-child(9) {
  657.   -webkit-transform: rotate(48deg);
  658.   -moz-transform: rotate(48deg);
  659.   -ms-transform: rotate(48deg);
  660.   -o-transform: rotate(48deg);
  661.   transform: rotate(48deg);
  662. }
  663. .minute-marks li:nth-child(9):before {
  664.   -webkit-animation-delay: 0.15300000000000002s;
  665.   -moz-animation-delay: 0.15300000000000002s;
  666.   -o-animation-delay: 0.15300000000000002s;
  667.   animation-delay: 0.15300000000000002s;
  668. }
  669. .minute-marks li:nth-child(9):after {
  670.   -webkit-animation-delay: 0.68s;
  671.   -moz-animation-delay: 0.68s;
  672.   -o-animation-delay: 0.68s;
  673.   animation-delay: 0.68s;
  674. }
  675. .minute-marks li:nth-child(10) {
  676.   -webkit-transform: rotate(54deg);
  677.   -moz-transform: rotate(54deg);
  678.   -ms-transform: rotate(54deg);
  679.   -o-transform: rotate(54deg);
  680.   transform: rotate(54deg);
  681. }
  682. .minute-marks li:nth-child(10):before {
  683.   -webkit-animation-delay: 0.17s;
  684.   -moz-animation-delay: 0.17s;
  685.   -o-animation-delay: 0.17s;
  686.   animation-delay: 0.17s;
  687. }
  688. .minute-marks li:nth-child(10):after {
  689.   -webkit-animation-delay: 0.6970000000000001s;
  690.   -moz-animation-delay: 0.6970000000000001s;
  691.   -o-animation-delay: 0.6970000000000001s;
  692.   animation-delay: 0.6970000000000001s;
  693. }
  694. .minute-marks li:nth-child(11) {
  695.   -webkit-transform: rotate(60deg);
  696.   -moz-transform: rotate(60deg);
  697.   -ms-transform: rotate(60deg);
  698.   -o-transform: rotate(60deg);
  699.   transform: rotate(60deg);
  700. }
  701. .minute-marks li:nth-child(11):before {
  702.   -webkit-animation-delay: 0.187s;
  703.   -moz-animation-delay: 0.187s;
  704.   -o-animation-delay: 0.187s;
  705.   animation-delay: 0.187s;
  706. }
  707. .minute-marks li:nth-child(11):after {
  708.   -webkit-animation-delay: 0.714s;
  709.   -moz-animation-delay: 0.714s;
  710.   -o-animation-delay: 0.714s;
  711.   animation-delay: 0.714s;
  712. }
  713. .minute-marks li:nth-child(12) {
  714.   -webkit-transform: rotate(66deg);
  715.   -moz-transform: rotate(66deg);
  716.   -ms-transform: rotate(66deg);
  717.   -o-transform: rotate(66deg);
  718.   transform: rotate(66deg);
  719. }
  720. .minute-marks li:nth-child(12):before {
  721.   -webkit-animation-delay: 0.20400000000000001s;
  722.   -moz-animation-delay: 0.20400000000000001s;
  723.   -o-animation-delay: 0.20400000000000001s;
  724.   animation-delay: 0.20400000000000001s;
  725. }
  726. .minute-marks li:nth-child(12):after {
  727.   -webkit-animation-delay: 0.7310000000000001s;
  728.   -moz-animation-delay: 0.7310000000000001s;
  729.   -o-animation-delay: 0.7310000000000001s;
  730.   animation-delay: 0.7310000000000001s;
  731. }
  732. .minute-marks li:nth-child(13) {
  733.   -webkit-transform: rotate(72deg);
  734.   -moz-transform: rotate(72deg);
  735.   -ms-transform: rotate(72deg);
  736.   -o-transform: rotate(72deg);
  737.   transform: rotate(72deg);
  738. }
  739. .minute-marks li:nth-child(13):before {
  740.   -webkit-animation-delay: 0.22100000000000003s;
  741.   -moz-animation-delay: 0.22100000000000003s;
  742.   -o-animation-delay: 0.22100000000000003s;
  743.   animation-delay: 0.22100000000000003s;
  744. }
  745. .minute-marks li:nth-child(13):after {
  746.   -webkit-animation-delay: 0.748s;
  747.   -moz-animation-delay: 0.748s;
  748.   -o-animation-delay: 0.748s;
  749.   animation-delay: 0.748s;
  750. }
  751. .minute-marks li:nth-child(14) {
  752.   -webkit-transform: rotate(78deg);
  753.   -moz-transform: rotate(78deg);
  754.   -ms-transform: rotate(78deg);
  755.   -o-transform: rotate(78deg);
  756.   transform: rotate(78deg);
  757. }
  758. .minute-marks li:nth-child(14):before {
  759.   -webkit-animation-delay: 0.23800000000000002s;
  760.   -moz-animation-delay: 0.23800000000000002s;
  761.   -o-animation-delay: 0.23800000000000002s;
  762.   animation-delay: 0.23800000000000002s;
  763. }
  764. .minute-marks li:nth-child(14):after {
  765.   -webkit-animation-delay: 0.765s;
  766.   -moz-animation-delay: 0.765s;
  767.   -o-animation-delay: 0.765s;
  768.   animation-delay: 0.765s;
  769. }
  770. .minute-marks li:nth-child(15) {
  771.   -webkit-transform: rotate(84deg);
  772.   -moz-transform: rotate(84deg);
  773.   -ms-transform: rotate(84deg);
  774.   -o-transform: rotate(84deg);
  775.   transform: rotate(84deg);
  776. }
  777. .minute-marks li:nth-child(15):before {
  778.   -webkit-animation-delay: 0.255s;
  779.   -moz-animation-delay: 0.255s;
  780.   -o-animation-delay: 0.255s;
  781.   animation-delay: 0.255s;
  782. }
  783. .minute-marks li:nth-child(15):after {
  784.   -webkit-animation-delay: 0.782s;
  785.   -moz-animation-delay: 0.782s;
  786.   -o-animation-delay: 0.782s;
  787.   animation-delay: 0.782s;
  788. }
  789. .minute-marks li:nth-child(16) {
  790.   -webkit-transform: rotate(90deg);
  791.   -moz-transform: rotate(90deg);
  792.   -ms-transform: rotate(90deg);
  793.   -o-transform: rotate(90deg);
  794.   transform: rotate(90deg);
  795. }
  796. .minute-marks li:nth-child(16):before {
  797.   -webkit-animation-delay: 0.272s;
  798.   -moz-animation-delay: 0.272s;
  799.   -o-animation-delay: 0.272s;
  800.   animation-delay: 0.272s;
  801. }
  802. .minute-marks li:nth-child(16):after {
  803.   -webkit-animation-delay: 0.799s;
  804.   -moz-animation-delay: 0.799s;
  805.   -o-animation-delay: 0.799s;
  806.   animation-delay: 0.799s;
  807. }
  808. .minute-marks li:nth-child(17) {
  809.   -webkit-transform: rotate(96deg);
  810.   -moz-transform: rotate(96deg);
  811.   -ms-transform: rotate(96deg);
  812.   -o-transform: rotate(96deg);
  813.   transform: rotate(96deg);
  814. }
  815. .minute-marks li:nth-child(17):before {
  816.   -webkit-animation-delay: 0.28900000000000003s;
  817.   -moz-animation-delay: 0.28900000000000003s;
  818.   -o-animation-delay: 0.28900000000000003s;
  819.   animation-delay: 0.28900000000000003s;
  820. }
  821. .minute-marks li:nth-child(17):after {
  822.   -webkit-animation-delay: 0.8160000000000001s;
  823.   -moz-animation-delay: 0.8160000000000001s;
  824.   -o-animation-delay: 0.8160000000000001s;
  825.   animation-delay: 0.8160000000000001s;
  826. }
  827. .minute-marks li:nth-child(18) {
  828.   -webkit-transform: rotate(102deg);
  829.   -moz-transform: rotate(102deg);
  830.   -ms-transform: rotate(102deg);
  831.   -o-transform: rotate(102deg);
  832.   transform: rotate(102deg);
  833. }
  834. .minute-marks li:nth-child(18):before {
  835.   -webkit-animation-delay: 0.30600000000000005s;
  836.   -moz-animation-delay: 0.30600000000000005s;
  837.   -o-animation-delay: 0.30600000000000005s;
  838.   animation-delay: 0.30600000000000005s;
  839. }
  840. .minute-marks li:nth-child(18):after {
  841.   -webkit-animation-delay: 0.8330000000000001s;
  842.   -moz-animation-delay: 0.8330000000000001s;
  843.   -o-animation-delay: 0.8330000000000001s;
  844.   animation-delay: 0.8330000000000001s;
  845. }
  846. .minute-marks li:nth-child(19) {
  847.   -webkit-transform: rotate(108deg);
  848.   -moz-transform: rotate(108deg);
  849.   -ms-transform: rotate(108deg);
  850.   -o-transform: rotate(108deg);
  851.   transform: rotate(108deg);
  852. }
  853. .minute-marks li:nth-child(19):before {
  854.   -webkit-animation-delay: 0.323s;
  855.   -moz-animation-delay: 0.323s;
  856.   -o-animation-delay: 0.323s;
  857.   animation-delay: 0.323s;
  858. }
  859. .minute-marks li:nth-child(19):after {
  860.   -webkit-animation-delay: 0.8500000000000001s;
  861.   -moz-animation-delay: 0.8500000000000001s;
  862.   -o-animation-delay: 0.8500000000000001s;
  863.   animation-delay: 0.8500000000000001s;
  864. }
  865. .minute-marks li:nth-child(20) {
  866.   -webkit-transform: rotate(114deg);
  867.   -moz-transform: rotate(114deg);
  868.   -ms-transform: rotate(114deg);
  869.   -o-transform: rotate(114deg);
  870.   transform: rotate(114deg);
  871. }
  872. .minute-marks li:nth-child(20):before {
  873.   -webkit-animation-delay: 0.34s;
  874.   -moz-animation-delay: 0.34s;
  875.   -o-animation-delay: 0.34s;
  876.   animation-delay: 0.34s;
  877. }
  878. .minute-marks li:nth-child(20):after {
  879.   -webkit-animation-delay: 0.867s;
  880.   -moz-animation-delay: 0.867s;
  881.   -o-animation-delay: 0.867s;
  882.   animation-delay: 0.867s;
  883. }
  884. .minute-marks li:nth-child(21) {
  885.   -webkit-transform: rotate(120deg);
  886.   -moz-transform: rotate(120deg);
  887.   -ms-transform: rotate(120deg);
  888.   -o-transform: rotate(120deg);
  889.   transform: rotate(120deg);
  890. }
  891. .minute-marks li:nth-child(21):before {
  892.   -webkit-animation-delay: 0.35700000000000004s;
  893.   -moz-animation-delay: 0.35700000000000004s;
  894.   -o-animation-delay: 0.35700000000000004s;
  895.   animation-delay: 0.35700000000000004s;
  896. }
  897. .minute-marks li:nth-child(21):after {
  898.   -webkit-animation-delay: 0.8840000000000001s;
  899.   -moz-animation-delay: 0.8840000000000001s;
  900.   -o-animation-delay: 0.8840000000000001s;
  901.   animation-delay: 0.8840000000000001s;
  902. }
  903. .minute-marks li:nth-child(22) {
  904.   -webkit-transform: rotate(126deg);
  905.   -moz-transform: rotate(126deg);
  906.   -ms-transform: rotate(126deg);
  907.   -o-transform: rotate(126deg);
  908.   transform: rotate(126deg);
  909. }
  910. .minute-marks li:nth-child(22):before {
  911.   -webkit-animation-delay: 0.374s;
  912.   -moz-animation-delay: 0.374s;
  913.   -o-animation-delay: 0.374s;
  914.   animation-delay: 0.374s;
  915. }
  916. .minute-marks li:nth-child(22):after {
  917.   -webkit-animation-delay: 0.901s;
  918.   -moz-animation-delay: 0.901s;
  919.   -o-animation-delay: 0.901s;
  920.   animation-delay: 0.901s;
  921. }
  922. .minute-marks li:nth-child(23) {
  923.   -webkit-transform: rotate(132deg);
  924.   -moz-transform: rotate(132deg);
  925.   -ms-transform: rotate(132deg);
  926.   -o-transform: rotate(132deg);
  927.   transform: rotate(132deg);
  928. }
  929. .minute-marks li:nth-child(23):before {
  930.   -webkit-animation-delay: 0.391s;
  931.   -moz-animation-delay: 0.391s;
  932.   -o-animation-delay: 0.391s;
  933.   animation-delay: 0.391s;
  934. }
  935. .minute-marks li:nth-child(23):after {
  936.   -webkit-animation-delay: 0.918s;
  937.   -moz-animation-delay: 0.918s;
  938.   -o-animation-delay: 0.918s;
  939.   animation-delay: 0.918s;
  940. }
  941. .minute-marks li:nth-child(24) {
  942.   -webkit-transform: rotate(138deg);
  943.   -moz-transform: rotate(138deg);
  944.   -ms-transform: rotate(138deg);
  945.   -o-transform: rotate(138deg);
  946.   transform: rotate(138deg);
  947. }
  948. .minute-marks li:nth-child(24):before {
  949.   -webkit-animation-delay: 0.40800000000000003s;
  950.   -moz-animation-delay: 0.40800000000000003s;
  951.   -o-animation-delay: 0.40800000000000003s;
  952.   animation-delay: 0.40800000000000003s;
  953. }
  954. .minute-marks li:nth-child(24):after {
  955.   -webkit-animation-delay: 0.935s;
  956.   -moz-animation-delay: 0.935s;
  957.   -o-animation-delay: 0.935s;
  958.   animation-delay: 0.935s;
  959. }
  960. .minute-marks li:nth-child(25) {
  961.   -webkit-transform: rotate(144deg);
  962.   -moz-transform: rotate(144deg);
  963.   -ms-transform: rotate(144deg);
  964.   -o-transform: rotate(144deg);
  965.   transform: rotate(144deg);
  966. }
  967. .minute-marks li:nth-child(25):before {
  968.   -webkit-animation-delay: 0.42500000000000004s;
  969.   -moz-animation-delay: 0.42500000000000004s;
  970.   -o-animation-delay: 0.42500000000000004s;
  971.   animation-delay: 0.42500000000000004s;
  972. }
  973. .minute-marks li:nth-child(25):after {
  974.   -webkit-animation-delay: 0.9520000000000001s;
  975.   -moz-animation-delay: 0.9520000000000001s;
  976.   -o-animation-delay: 0.9520000000000001s;
  977.   animation-delay: 0.9520000000000001s;
  978. }
  979. .minute-marks li:nth-child(26) {
  980.   -webkit-transform: rotate(150deg);
  981.   -moz-transform: rotate(150deg);
  982.   -ms-transform: rotate(150deg);
  983.   -o-transform: rotate(150deg);
  984.   transform: rotate(150deg);
  985. }
  986. .minute-marks li:nth-child(26):before {
  987.   -webkit-animation-delay: 0.44200000000000006s;
  988.   -moz-animation-delay: 0.44200000000000006s;
  989.   -o-animation-delay: 0.44200000000000006s;
  990.   animation-delay: 0.44200000000000006s;
  991. }
  992. .minute-marks li:nth-child(26):after {
  993.   -webkit-animation-delay: 0.9690000000000001s;
  994.   -moz-animation-delay: 0.9690000000000001s;
  995.   -o-animation-delay: 0.9690000000000001s;
  996.   animation-delay: 0.9690000000000001s;
  997. }
  998. .minute-marks li:nth-child(27) {
  999.   -webkit-transform: rotate(156deg);
  1000.   -moz-transform: rotate(156deg);
  1001.   -ms-transform: rotate(156deg);
  1002.   -o-transform: rotate(156deg);
  1003.   transform: rotate(156deg);
  1004. }
  1005. .minute-marks li:nth-child(27):before {
  1006.   -webkit-animation-delay: 0.459s;
  1007.   -moz-animation-delay: 0.459s;
  1008.   -o-animation-delay: 0.459s;
  1009.   animation-delay: 0.459s;
  1010. }
  1011. .minute-marks li:nth-child(27):after {
  1012.   -webkit-animation-delay: 0.986s;
  1013.   -moz-animation-delay: 0.986s;
  1014.   -o-animation-delay: 0.986s;
  1015.   animation-delay: 0.986s;
  1016. }
  1017. .minute-marks li:nth-child(28) {
  1018.   -webkit-transform: rotate(162deg);
  1019.   -moz-transform: rotate(162deg);
  1020.   -ms-transform: rotate(162deg);
  1021.   -o-transform: rotate(162deg);
  1022.   transform: rotate(162deg);
  1023. }
  1024. .minute-marks li:nth-child(28):before {
  1025.   -webkit-animation-delay: 0.47600000000000003s;
  1026.   -moz-animation-delay: 0.47600000000000003s;
  1027.   -o-animation-delay: 0.47600000000000003s;
  1028.   animation-delay: 0.47600000000000003s;
  1029. }
  1030. .minute-marks li:nth-child(28):after {
  1031.   -webkit-animation-delay: 1.0030000000000001s;
  1032.   -moz-animation-delay: 1.0030000000000001s;
  1033.   -o-animation-delay: 1.0030000000000001s;
  1034.   animation-delay: 1.0030000000000001s;
  1035. }
  1036. .minute-marks li:nth-child(29) {
  1037.   -webkit-transform: rotate(168deg);
  1038.   -moz-transform: rotate(168deg);
  1039.   -ms-transform: rotate(168deg);
  1040.   -o-transform: rotate(168deg);
  1041.   transform: rotate(168deg);
  1042. }
  1043. .minute-marks li:nth-child(29):before {
  1044.   -webkit-animation-delay: 0.49300000000000005s;
  1045.   -moz-animation-delay: 0.49300000000000005s;
  1046.   -o-animation-delay: 0.49300000000000005s;
  1047.   animation-delay: 0.49300000000000005s;
  1048. }
  1049. .minute-marks li:nth-child(29):after {
  1050.   -webkit-animation-delay: 1.02s;
  1051.   -moz-animation-delay: 1.02s;
  1052.   -o-animation-delay: 1.02s;
  1053.   animation-delay: 1.02s;
  1054. }
  1055. .minute-marks li:nth-child(30) {
  1056.   -webkit-transform: rotate(174deg);
  1057.   -moz-transform: rotate(174deg);
  1058.   -ms-transform: rotate(174deg);
  1059.   -o-transform: rotate(174deg);
  1060.   transform: rotate(174deg);
  1061. }
  1062. .minute-marks li:nth-child(30):before {
  1063.   -webkit-animation-delay: 0.51s;
  1064.   -moz-animation-delay: 0.51s;
  1065.   -o-animation-delay: 0.51s;
  1066.   animation-delay: 0.51s;
  1067. }
  1068. .minute-marks li:nth-child(30):after {
  1069.   -webkit-animation-delay: 1.037s;
  1070.   -moz-animation-delay: 1.037s;
  1071.   -o-animation-delay: 1.037s;
  1072.   animation-delay: 1.037s;
  1073. }
  1074. h1 {
  1075.   position: absolute;
  1076.   bottom: 0;
  1077.   margin-bottom: 44px;
  1078.   width: 100%;
  1079.   text-align: center;
  1080.   font: bold 33px/1 "Trebuchet MS", Verdana, sans-serif;
  1081.   color: #d2d8df;
  1082.   text-shadow: 0 -2px 0 #fff;
  1083. }
  1084. @media (max-height: 740px) {
  1085.   h1 {
  1086.     display: none;
  1087.   }
  1088. }
  1089. h1 small {
  1090.   display: block;
  1091.   margin-top: 10px;
  1092.   font-weight: normal;
  1093.   font-size: 12px;
  1094.   color: #b4beca;
  1095.   text-shadow: none;
  1096. }
  1097. h1 small a {
  1098.   color: #b4beca;
  1099.   text-decoration: none;
  1100.   -webkit-transition: all 0.25s ease;
  1101.   -moz-transition: all 0.25s ease;
  1102.   -o-transition: all 0.25s ease;
  1103.   transition: all 0.25s ease;
  1104. }
  1105. h1 small a:hover {
  1106.   color: #708399;
  1107. }

  1109. </style>
  1110. </head>
  1111. <body>
  1112. <div class='clock-wrapper'>
  1113.   <div class='clock-border'>
  1114.     <div class='clock'>
  1115.       <ul class='minute-marks'>
  1116.         <li class='five'></li>
  1117.         <li></li>
  1118.         <li></li>
  1119.         <li></li>
  1120.         <li></li>
  1121.         <li class='five'></li>
  1122.         <li></li>
  1123.         <li></li>
  1124.         <li></li>
  1125.         <li></li>
  1126.         <li class='five'></li>
  1127.         <li></li>
  1128.         <li></li>
  1129.         <li></li>
  1130.         <li></li>
  1131.         <li class='five'></li>
  1132.         <li></li>
  1133.         <li></li>
  1134.         <li></li>
  1135.         <li></li>
  1136.         <li class='five'></li>
  1137.         <li></li>
  1138.         <li></li>
  1139.         <li></li>
  1140.         <li></li>
  1141.         <li class='five'></li>
  1142.         <li></li>
  1143.         <li></li>
  1144.         <li></li>
  1145.         <li></li>
  1146.       </ul>
  1147.       <div class='hour'>
  1148.         <div class='hand'></div>
  1149.       </div>
  1150.       <div class='minute'>
  1151.         <div class='hand'></div>
  1152.       </div>
  1153.       <div class='second'>
  1154.         <div class='hand'></div>
  1155.       </div>
  1156.     </div>
  1157.   </div>
  1158.   </h1>
  1159. </div>

  1161. </body>
  1162. </html>
复制代码

2 个回复

倒序浏览
ZenosZeng讲师达人认证 悬赏达人认证
超级版主   /  发表于：2021-1-29 00:39:34
沙发
样式2，粘贴以下代码：
image.png453276366.png
  1. <html>
  2. <head>
  3. <style>
  4. html, body {
  5.   margin: 0;
  6.   padding: 0;
  7. }

  9. html {
  10.   box-sizing: border-box;
  11. }

  13. *, *:before, *:after {
  14.   box-sizing: inherit;
  15. }

  17. .container {
  18.   width: 300px;
  19.   height: 300px;
  20.   margin: 0 auto;
  21.   position: fixed;
  22.   perspective: 1200px;
  23.   top: 50%;
  24.   left: 50%;
  25.   transform: translate(-50%, -50%);
  26. }
  27. .container .clock {
  28.   position: absolute;
  29.   width: 100%;
  30.   height: 100%;
  31.   transform-style: preserve-3d;
  32.   transform-origin: center center;
  33.   transform: rotateX(-15deg) rotateY(-20deg) translateZ(-150px);
  34.   background: #000;
  35. }
  36. .container .clock:after {
  37.   content: "";
  38.   position: absolute;
  39.   height: 30px;
  40.   width: 345px;
  41.   background: linear-gradient(rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 100%);
  42.   top: 365px;
  43.   left: -76px;
  44.   border-radius: 4px 4px 0 0;
  45. }
  46. .container .clock h1, .container .clock p {
  47.   position: absolute;
  48.   z-index: 1;
  49.   text-align: center;
  50.   width: 100%;
  51.   color: #ddd;
  52.   transform: scaleX(-1) rotate(-180deg);
  53.   font-weight: 100;
  54.   font-family: Arial;
  55. }
  56. .container .clock h1 {
  57.   top: 160px;
  58.   font-size: 14px;
  59. }
  60. .container .clock p {
  61.   top: 145px;
  62.   font-size: 11px;
  63.   color: #bbb;
  64. }
  65. .container .clock .shadow {
  66.   position: absolute;
  67.   background: rgba(0, 0, 0, 0.8);
  68.   width: 100%;
  69.   height: 100%;
  70.   z-index: 10;
  71.   transform: rotateX(90deg) translateZ(-150px);
  72.   box-shadow: -20px 20px 120px 0 rgba(0, 0, 0, 0.8);
  73. }
  74. .container .clock .glas {
  75.   position: absolute;
  76.   left: 20px;
  77.   top: 20px;
  78.   right: 20px;
  79.   bottom: 20px;
  80.   border-radius: 50%;
  81.   border: 5px solid #000;
  82.   box-shadow: 1px 0 4px 0 rgba(255, 255, 255, 0.3), inset 0 0 5px #666, inset -20px -10px 120px 0 rgba(100, 100, 100, 0.4);
  83. }
  84. .container .clock .reflex {
  85.   position: absolute;
  86.   left: 50%;
  87.   top: 50%;
  88.   transform: translate(-50%, -50%);
  89.   background: #f6bc0d;
  90.   width: 30px;
  91.   height: 30px;
  92.   z-index: 10;
  93.   border-radius: 50%;
  94.   box-shadow: inset -3px 0 0 0 rgba(255, 255, 255, 0.5), inset 1px 0 0 0 rgba(0, 0, 0, 0.5), 0 -1px 4px 1px rgba(0, 0, 0, 0.5);
  95. }
  96. .container .clock .t-secs {
  97.   position: absolute;
  98.   width: 100%;
  99.   height: 100%;
  100.   animation: tick 60s normal infinite steps(60, end);
  101.   z-index: 5;
  102. }
  103. .container .clock .t-mins {
  104.   position: absolute;
  105.   width: 100%;
  106.   height: 100%;
  107.   animation: tick 3600s normal infinite steps(3600, end);
  108.   z-index: 4;
  109. }
  110. .container .clock .t-hours {
  111.   position: absolute;
  112.   width: 100%;
  113.   height: 100%;
  114.   animation: tick 21600s normal infinite steps(3600, end);
  115.   z-index: 3;
  116. }
  117. .container .clock .tick-sec {
  118.   position: absolute;
  119.   left: 50%;
  120.   top: 50%;
  121.   transform: translate(-50%, -50%) rotate(120deg);
  122.   width: 30px;
  123.   height: 30px;
  124.   border-radius: 50%;
  125.   z-index: 5;
  126.   background: #f6bc0d;
  127. }
  128. .container .clock .tick-sec:before, .container .clock .tick-sec:after {
  129.   content: "";
  130.   position: absolute;
  131.   background: #f6bc0d;
  132.   width: 5px;
  133.   z-index: 3;
  134.   transform: translateX(-50%);
  135.   left: 50%;
  136.   border-radius: 3px;
  137. }
  138. .container .clock .tick-sec:before {
  139.   height: 100px;
  140.   margin-top: -5px;
  141.   top: 100%;
  142.   box-shadow: inset -1px 0 0 0 rgba(255, 255, 255, 0.5), inset 1px 0 0 0 rgba(0, 0, 0, 0.5), 2px 0 0 0 rgba(0, 0, 0, 0.8);
  143. }
  144. .container .clock .tick-sec:after {
  145.   height: 20px;
  146.   width: 20px;
  147.   margin-bottom: -5px;
  148.   bottom: 100%;
  149.   border-radius: 10px 10px 0 0;
  150.   box-shadow: inset -1px 0 0 0 rgba(255, 255, 255, 0.5), inset 1px 0 0 0 rgba(0, 0, 0, 0.5), 2px 0 0 0 rgba(0, 0, 0, 0.8);
  151. }
  152. .container .clock .tick-min {
  153.   position: absolute;
  154.   left: 50%;
  155.   top: 50%;
  156.   transform: translate(-50%, -50%) rotate(-30deg);
  157.   width: 30px;
  158.   height: 30px;
  159.   border-radius: 50%;
  160.   z-index: 2;
  161.   background: #eee;
  162. }
  163. .container .clock .tick-min:before {
  164.   content: "";
  165.   position: absolute;
  166.   background: #eee;
  167.   width: 8px;
  168.   z-index: 4;
  169.   transform: translateX(-50%);
  170.   left: 50%;
  171.   border-radius: 4px;
  172. }
  173. .container .clock .tick-min:before {
  174.   height: 100px;
  175.   margin-top: -5px;
  176.   top: 100%;
  177.   box-shadow: inset -2px 0 0 0 white, inset 1px 0 0 0 rgba(0, 0, 0, 0.5);
  178. }
  179. .container .clock .tick-hour {
  180.   position: absolute;
  181.   left: 50%;
  182.   top: 50%;
  183.   transform: translate(-50%, -50%) rotate(60deg);
  184.   width: 30px;
  185.   height: 30px;
  186.   border-radius: 50%;
  187.   z-index: 2;
  188.   background: #fff;
  189. }
  190. .container .clock .tick-hour:before {
  191.   content: "";
  192.   position: absolute;
  193.   background: #eee;
  194.   width: 12px;
  195.   z-index: 4;
  196.   transform: translateX(-50%);
  197.   left: 50%;
  198.   border-radius: 6px;
  199.   box-shadow: inset -4px 0 0 0 white, inset 1px 0 0 0 rgba(0, 0, 0, 0.5);
  200. }
  201. .container .clock .tick-hour:before {
  202.   height: 80px;
  203.   margin-top: -5px;
  204.   top: 100%;
  205. }
  206. .container .clock .alarm {
  207.   position: absolute;
  208.   left: 50%;
  209.   top: 50%;
  210.   transform: translate(-50%, -50%) rotate(-165deg);
  211.   width: 30px;
  212.   height: 30px;
  213.   border-radius: 50%;
  214.   z-index: 2;
  215.   background: #000;
  216. }
  217. .container .clock .alarm:before {
  218.   content: "";
  219.   position: absolute;
  220.   background: #000;
  221.   width: 8px;
  222.   z-index: 4;
  223.   transform: translateX(-50%);
  224.   left: 50%;
  225. }
  226. .container .clock .alarm:before {
  227.   height: 70px;
  228.   margin-top: -5px;
  229.   top: 100%;
  230.   border: 1px solid rgba(100, 100, 100, 0.5);
  231.   box-shadow: inset 0 -10px 0 0 #7dab59;
  232. }
  233. .container .clock ul, .container .clock li {
  234.   margin: 0;
  235.   padding: 0;
  236.   list-style-type: none;
  237.   z-index: 1;
  238. }
  239. .container .clock ul {
  240.   transform-origin: 50% 50%;
  241.   position: absolute;
  242.   top: 50%;
  243.   left: 50%;
  244.   width: 20px;
  245.   height: 20px;
  246.   border-radius: 50%;
  247.   margin: -10px 0 0 -10px;
  248.   border: 1px solid #ccc;
  249. }
  250. .container .clock li {
  251.   position: absolute;
  252.   width: 20px;
  253.   height: 20px;
  254.   font-size: 16px;
  255.   line-height: 20px;
  256.   text-align: right;
  257. }
  258. .container .clock .secs li:after {
  259.   content: "";
  260.   position: absolute;
  261.   right: 0;
  262.   top: 0;
  263.   background: rgba(255, 255, 255, 0.4);
  264.   width: 5px;
  265.   height: 2px;
  266. }
  267. .container .clock .secs li:nth-child(1) {
  268.   transform: rotate(6deg) translateX(100px);
  269. }
  270. .container .clock .secs li:nth-child(2) {
  271.   transform: rotate(12deg) translateX(100px);
  272. }
  273. .container .clock .secs li:nth-child(3) {
  274.   transform: rotate(18deg) translateX(100px);
  275. }
  276. .container .clock .secs li:nth-child(4) {
  277.   transform: rotate(24deg) translateX(100px);
  278. }
  279. .container .clock .secs li:nth-child(5) {
  280.   transform: rotate(30deg) translateX(100px);
  281. }
  282. .container .clock .secs li:nth-child(6) {
  283.   transform: rotate(36deg) translateX(100px);
  284. }
  285. .container .clock .secs li:nth-child(7) {
  286.   transform: rotate(42deg) translateX(100px);
  287. }
  288. .container .clock .secs li:nth-child(8) {
  289.   transform: rotate(48deg) translateX(100px);
  290. }
  291. .container .clock .secs li:nth-child(9) {
  292.   transform: rotate(54deg) translateX(100px);
  293. }
  294. .container .clock .secs li:nth-child(10) {
  295.   transform: rotate(60deg) translateX(100px);
  296. }
  297. .container .clock .secs li:nth-child(11) {
  298.   transform: rotate(66deg) translateX(100px);
  299. }
  300. .container .clock .secs li:nth-child(12) {
  301.   transform: rotate(72deg) translateX(100px);
  302. }
  303. .container .clock .secs li:nth-child(13) {
  304.   transform: rotate(78deg) translateX(100px);
  305. }
  306. .container .clock .secs li:nth-child(14) {
  307.   transform: rotate(84deg) translateX(100px);
  308. }
  309. .container .clock .secs li:nth-child(15) {
  310.   transform: rotate(90deg) translateX(100px);
  311. }
  312. .container .clock .secs li:nth-child(16) {
  313.   transform: rotate(96deg) translateX(100px);
  314. }
  315. .container .clock .secs li:nth-child(17) {
  316.   transform: rotate(102deg) translateX(100px);
  317. }
  318. .container .clock .secs li:nth-child(18) {
  319.   transform: rotate(108deg) translateX(100px);
  320. }
  321. .container .clock .secs li:nth-child(19) {
  322.   transform: rotate(114deg) translateX(100px);
  323. }
  324. .container .clock .secs li:nth-child(20) {
  325.   transform: rotate(120deg) translateX(100px);
  326. }
  327. .container .clock .secs li:nth-child(21) {
  328.   transform: rotate(126deg) translateX(100px);
  329. }
  330. .container .clock .secs li:nth-child(22) {
  331.   transform: rotate(132deg) translateX(100px);
  332. }
  333. .container .clock .secs li:nth-child(23) {
  334.   transform: rotate(138deg) translateX(100px);
  335. }
  336. .container .clock .secs li:nth-child(24) {
  337.   transform: rotate(144deg) translateX(100px);
  338. }
  339. .container .clock .secs li:nth-child(25) {
  340.   transform: rotate(150deg) translateX(100px);
  341. }
  342. .container .clock .secs li:nth-child(26) {
  343.   transform: rotate(156deg) translateX(100px);
  344. }
  345. .container .clock .secs li:nth-child(27) {
  346.   transform: rotate(162deg) translateX(100px);
  347. }
  348. .container .clock .secs li:nth-child(28) {
  349.   transform: rotate(168deg) translateX(100px);
  350. }
  351. .container .clock .secs li:nth-child(29) {
  352.   transform: rotate(174deg) translateX(100px);
  353. }
  354. .container .clock .secs li:nth-child(30) {
  355.   transform: rotate(180deg) translateX(100px);
  356. }
  357. .container .clock .secs li:nth-child(31) {
  358.   transform: rotate(186deg) translateX(100px);
  359. }
  360. .container .clock .secs li:nth-child(32) {
  361.   transform: rotate(192deg) translateX(100px);
  362. }
  363. .container .clock .secs li:nth-child(33) {
  364.   transform: rotate(198deg) translateX(100px);
  365. }
  366. .container .clock .secs li:nth-child(34) {
  367.   transform: rotate(204deg) translateX(100px);
  368. }
  369. .container .clock .secs li:nth-child(35) {
  370.   transform: rotate(210deg) translateX(100px);
  371. }
  372. .container .clock .secs li:nth-child(36) {
  373.   transform: rotate(216deg) translateX(100px);
  374. }
  375. .container .clock .secs li:nth-child(37) {
  376.   transform: rotate(222deg) translateX(100px);
  377. }
  378. .container .clock .secs li:nth-child(38) {
  379.   transform: rotate(228deg) translateX(100px);
  380. }
  381. .container .clock .secs li:nth-child(39) {
  382.   transform: rotate(234deg) translateX(100px);
  383. }
  384. .container .clock .secs li:nth-child(40) {
  385.   transform: rotate(240deg) translateX(100px);
  386. }
  387. .container .clock .secs li:nth-child(41) {
  388.   transform: rotate(246deg) translateX(100px);
  389. }
  390. .container .clock .secs li:nth-child(42) {
  391.   transform: rotate(252deg) translateX(100px);
  392. }
  393. .container .clock .secs li:nth-child(43) {
  394.   transform: rotate(258deg) translateX(100px);
  395. }
  396. .container .clock .secs li:nth-child(44) {
  397.   transform: rotate(264deg) translateX(100px);
  398. }
  399. .container .clock .secs li:nth-child(45) {
  400.   transform: rotate(270deg) translateX(100px);
  401. }
  402. .container .clock .secs li:nth-child(46) {
  403.   transform: rotate(276deg) translateX(100px);
  404. }
  405. .container .clock .secs li:nth-child(47) {
  406.   transform: rotate(282deg) translateX(100px);
  407. }
  408. .container .clock .secs li:nth-child(48) {
  409.   transform: rotate(288deg) translateX(100px);
  410. }
  411. .container .clock .secs li:nth-child(49) {
  412.   transform: rotate(294deg) translateX(100px);
  413. }
  414. .container .clock .secs li:nth-child(50) {
  415.   transform: rotate(300deg) translateX(100px);
  416. }
  417. .container .clock .secs li:nth-child(51) {
  418.   transform: rotate(306deg) translateX(100px);
  419. }
  420. .container .clock .secs li:nth-child(52) {
  421.   transform: rotate(312deg) translateX(100px);
  422. }
  423. .container .clock .secs li:nth-child(53) {
  424.   transform: rotate(318deg) translateX(100px);
  425. }
  426. .container .clock .secs li:nth-child(54) {
  427.   transform: rotate(324deg) translateX(100px);
  428. }
  429. .container .clock .secs li:nth-child(55) {
  430.   transform: rotate(330deg) translateX(100px);
  431. }
  432. .container .clock .secs li:nth-child(56) {
  433.   transform: rotate(336deg) translateX(100px);
  434. }
  435. .container .clock .secs li:nth-child(57) {
  436.   transform: rotate(342deg) translateX(100px);
  437. }
  438. .container .clock .secs li:nth-child(58) {
  439.   transform: rotate(348deg) translateX(100px);
  440. }
  441. .container .clock .secs li:nth-child(59) {
  442.   transform: rotate(354deg) translateX(100px);
  443. }
  444. .container .clock .secs li:nth-child(60) {
  445.   transform: rotate(360deg) translateX(100px);
  446. }
  447. .container .clock .mins li:after {
  448.   content: "";
  449.   position: absolute;
  450.   right: 0;
  451.   top: 50%;
  452.   background: #ddd;
  453.   width: 10px;
  454.   height: 4px;
  455. }
  456. .container .clock .mins li:nth-child(1) {
  457.   transform: rotate(30deg) translateX(100px);
  458. }
  459. .container .clock .mins li:nth-child(2) {
  460.   transform: rotate(60deg) translateX(100px);
  461. }
  462. .container .clock .mins li:nth-child(3) {
  463.   transform: rotate(90deg) translateX(100px);
  464. }
  465. .container .clock .mins li:nth-child(4) {
  466.   transform: rotate(120deg) translateX(100px);
  467. }
  468. .container .clock .mins li:nth-child(5) {
  469.   transform: rotate(150deg) translateX(100px);
  470. }
  471. .container .clock .mins li:nth-child(6) {
  472.   transform: rotate(180deg) translateX(100px);
  473. }
  474. .container .clock .mins li:nth-child(7) {
  475.   transform: rotate(210deg) translateX(100px);
  476. }
  477. .container .clock .mins li:nth-child(8) {
  478.   transform: rotate(240deg) translateX(100px);
  479. }
  480. .container .clock .mins li:nth-child(9) {
  481.   transform: rotate(270deg) translateX(100px);
  482. }
  483. .container .clock .mins li:nth-child(10) {
  484.   transform: rotate(300deg) translateX(100px);
  485. }
  486. .container .clock .mins li:nth-child(11) {
  487.   transform: rotate(330deg) translateX(100px);
  488. }
  489. .container .clock .mins li:nth-child(12) {
  490.   transform: rotate(360deg) translateX(100px);
  491. }
  492. .container .clock .min {
  493.   color: #ccc;
  494.   font-family: Helvetica, sans-serif;
  495.   font-weight: 100;
  496. }
  497. .container .clock .min span {
  498.   font-size: 13px;
  499.   display: block;
  500.   position: absolute;
  501.   width: 100 .container .clock .min span;
  502.   height: 100%;
  503.   right: 0;
  504.   top: 0;
  505. }
  506. .container .clock .min li:nth-child(1) {
  507.   transform: rotate(90deg) translateX(80px);
  508. }
  509. .container .clock .min li:nth-child(1) span {
  510.   transform: scaleX(-1) rotate(270deg);
  511. }
  512. .container .clock .min li:nth-child(2) {
  513.   transform: rotate(120deg) translateX(80px);
  514. }
  515. .container .clock .min li:nth-child(2) span {
  516.   transform: scaleX(-1) rotate(300deg);
  517. }
  518. .container .clock .min li:nth-child(3) {
  519.   transform: rotate(150deg) translateX(80px);
  520. }
  521. .container .clock .min li:nth-child(3) span {
  522.   transform: scaleX(-1) rotate(330deg);
  523. }
  524. .container .clock .min li:nth-child(4) {
  525.   transform: rotate(180deg) translateX(80px);
  526. }
  527. .container .clock .min li:nth-child(4) span {
  528.   transform: scaleX(-1) rotate(360deg);
  529. }
  530. .container .clock .min li:nth-child(5) {
  531.   transform: rotate(210deg) translateX(80px);
  532. }
  533. .container .clock .min li:nth-child(5) span {
  534.   transform: scaleX(-1) rotate(390deg);
  535. }
  536. .container .clock .min li:nth-child(6) {
  537.   transform: rotate(240deg) translateX(80px);
  538. }
  539. .container .clock .min li:nth-child(6) span {
  540.   transform: scaleX(-1) rotate(420deg);
  541. }
  542. .container .clock .min li:nth-child(7) {
  543.   transform: rotate(270deg) translateX(80px);
  544. }
  545. .container .clock .min li:nth-child(7) span {
  546.   transform: scaleX(-1) rotate(450deg);
  547. }
  548. .container .clock .min li:nth-child(8) {
  549.   transform: rotate(300deg) translateX(80px);
  550. }
  551. .container .clock .min li:nth-child(8) span {
  552.   transform: scaleX(-1) rotate(480deg);
  553. }
  554. .container .clock .min li:nth-child(9) {
  555.   transform: rotate(330deg) translateX(80px);
  556. }
  557. .container .clock .min li:nth-child(9) span {
  558.   transform: scaleX(-1) rotate(510deg);
  559. }
  560. .container .clock .min li:nth-child(10) {
  561.   transform: rotate(360deg) translateX(80px);
  562. }
  563. .container .clock .min li:nth-child(10) span {
  564.   transform: scaleX(-1) rotate(540deg);
  565. }
  566. .container .clock .min li:nth-child(11) {
  567.   transform: rotate(390deg) translateX(80px);
  568. }
  569. .container .clock .min li:nth-child(11) span {
  570.   transform: scaleX(-1) rotate(570deg);
  571. }
  572. .container .clock .min li:nth-child(12) {
  573.   transform: rotate(420deg) translateX(80px);
  574. }
  575. .container .clock .min li:nth-child(12) span {
  576.   transform: scaleX(-1) rotate(600deg);
  577. }
  578. .container .clock .side {
  579.   position: absolute;
  580.   width: 300px;
  581.   height: 300px;
  582.   background: #ddd;
  583.   border-radius: 10px;
  584. }
  585. .container .clock .side:nth-child(1) {
  586.   z-index: -1;
  587.   transform: rotateX(0deg) translateZ(-150px);
  588. }
  589. .container .clock .side:nth-child(1) .line {
  590.   position: absolute;
  591.   right: -25%;
  592.   top: 100%;
  593.   width: 150%;
  594.   height: 1px;
  595.   background: linear-gradient(rgba(0, 0, 0, 0.1) 70%, rgba(0, 0, 0, 0) 100%);
  596. }
  597. .container .clock .side:nth-child(2) {
  598.   transform: rotateX(180deg) translateZ(-150px);
  599.   background: #1b191c;
  600. }
  601. .container .clock .side:nth-child(2) .line {
  602.   position: absolute;
  603.   left: -25%;
  604.   bottom: 100%;
  605.   width: 150%;
  606.   height: 1px;
  607.   background: linear-gradient(rgba(0, 0, 0, 0.1) 70%, rgba(0, 0, 0, 0) 100%);
  608. }
  609. .container .clock .side:nth-child(3) {
  610.   transform: rotateX(-90deg) translateZ(-150px);
  611.   background: linear-gradient(#302f2d 0%, #615b5d 100%);
  612. }
  613. .container .clock .side:nth-child(3):after {
  614.   content: "";
  615.   position: absolute;
  616.   right: 0px;
  617.   top: 40px;
  618.   width: 100%;
  619.   height: 25px;
  620.   background: #000;
  621.   border-bottom: 5px solid rgba(255, 255, 255, 0.5);
  622. }
  623. .container .clock .side:nth-child(4) {
  624.   transform: rotateY(90deg) translateZ(-150px);
  625. }
  626. .container .clock .side:nth-child(4) .line {
  627.   position: absolute;
  628.   left: -40%;
  629.   top: 100%;
  630.   width: 200%;
  631.   height: 1px;
  632.   background: linear-gradient(rgba(0, 0, 0, 0.1) 70%, rgba(0, 0, 0, 0) 100%);
  633. }
  634. .container .clock .side:nth-child(5) {
  635.   transform: rotateY(-90deg) translateZ(-150px);
  636.   background: linear-gradient(-45deg, #302f2d, #76757b 100%);
  637. }
  638. .container .clock .side:nth-child(5) .line {
  639.   position: absolute;
  640.   left: -50%;
  641.   top: 100%;
  642.   width: 200%;
  643.   height: 1px;
  644.   background: linear-gradient(rgba(0, 0, 0, 0.1) 70%, rgba(0, 0, 0, 0) 100%);
  645. }
  646. .container .clock .side:nth-child(5):after {
  647.   content: "";
  648.   position: absolute;
  649.   right: 40px;
  650.   border-left: 5px solid rgba(255, 255, 255, 0.5);
  651.   top: 0;
  652.   width: 25px;
  653.   height: 100%;
  654.   background: #000;
  655. }
  656. .container .clock .side:nth-child(5):before {
  657.   content: "";
  658.   position: absolute;
  659.   left: 0px;
  660.   top: 100%;
  661.   width: 95%;
  662.   height: 30px;
  663.   background: linear-gradient(rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 100%);
  664. }
  665. .container .clock .side:nth-child(6) {
  666.   transform: rotateX(90deg) translateZ(-150px);
  667. }
  668. .container .button {
  669.   position: absolute;
  670.   width: 50%;
  671.   border: 5px solid #555;
  672.   height: 150px;
  673.   bottom: 0;
  674.   left: 25%;
  675.   border-top: 10px solid #000;
  676. }
  677. .container .button:after {
  678.   content: "";
  679.   position: absolute;
  680.   left: 50%;
  681.   top: 50%;
  682.   transform: translate(-50%, -50%);
  683.   border-radius: 50%;
  684.   width: 60px;
  685.   height: 60px;
  686.   background: #717747;
  687. }

  689. @keyframes tick {
  690.   0% {
  691.     transform: rotate(0deg);
  692.   }
  693.   100% {
  694.     transform: rotate(-360deg);
  695.   }
  696. }
  697. </style>
  698. </head>
  699. <body>

  701. <div class="container">
  702.   <div class="clock">
  703.     <div class="side">
  704.       <div class="line"></div>
  705.     </div>
  706.     <div class="side">
  707.       <div class="line"></div>
  708.       <div class="glas">
  709.         <h1>clOck</h1>
  710.         <p>dailycssimages</p>
  711.         <div class="reflex"></div>
  712.         <div class="t-hours">
  713.           <div class="tick-hour"></div>
  714.         </div>
  715.         <div class="t-mins">
  716.           <div class="tick-min"></div>
  717.         </div>
  718.         <div class="t-secs">
  719.           <div class="tick-sec"></div>
  720.         </div>
  721.         <div class="alarm"> </div>
  722.       </div>
  723.       <ul class="secs">
  724.         <li></li>
  725.         <li></li>
  726.         <li></li>
  727.         <li></li>
  728.         <li></li>
  729.         <li></li>
  730.         <li></li>
  731.         <li></li>
  732.         <li></li>
  733.         <li></li>
  734.         <li></li>
  735.         <li></li>
  736.         <li></li>
  737.         <li></li>
  738.         <li></li>
  739.         <li></li>
  740.         <li></li>
  741.         <li></li>
  742.         <li></li>
  743.         <li></li>
  744.         <li></li>
  745.         <li></li>
  746.         <li></li>
  747.         <li></li>
  748.         <li></li>
  749.         <li></li>
  750.         <li></li>
  751.         <li></li>
  752.         <li></li>
  753.         <li></li>
  754.         <li></li>
  755.         <li></li>
  756.         <li></li>
  757.         <li></li>
  758.         <li></li>
  759.         <li></li>
  760.         <li></li>
  761.         <li></li>
  762.         <li></li>
  763.         <li></li>
  764.         <li></li>
  765.         <li></li>
  766.         <li></li>
  767.         <li></li>
  768.         <li></li>
  769.         <li></li>
  770.         <li></li>
  771.         <li></li>
  772.         <li></li>
  773.         <li></li>
  774.         <li></li>
  775.         <li></li>
  776.         <li></li>
  777.         <li></li>
  778.         <li></li>
  779.         <li></li>
  780.         <li></li>
  781.         <li></li>
  782.         <li></li>
  783.         <li></li>
  784.       </ul>
  785.       <ul class="mins">
  786.         <li></li>
  787.         <li></li>
  788.         <li></li>
  789.         <li></li>
  790.         <li></li>
  791.         <li></li>
  792.         <li></li>
  793.         <li></li>
  794.         <li></li>
  795.         <li></li>
  796.         <li></li>
  797.         <li></li>
  798.       </ul>
  799.       <ul class="min">
  800.         <li><span>12</span></li>
  801.         <li><span>11</span></li>
  802.         <li><span>10</span></li>
  803.         <li><span>9</span></li>
  804.         <li><span>8</span></li>
  805.         <li><span>7</span></li>
  806.         <li><span>6</span></li>
  807.         <li><span>5</span></li>
  808.         <li><span>4</span></li>
  809.         <li><span>3</span></li>
  810.         <li><span>2</span></li>
  811.         <li><span>1</span></li>
  812.       </ul>
  813.     </div>
  814.     <div class="side">
  815.       <div class="button"></div>
  816.     </div>
  817.     <div class="side">
  818.       <div class="line"></div>
  819.     </div>
  820.     <div class="side">
  821.       <div class="line"></div>
  822.     </div>
  823.     <div class="side"></div>
  824.     <div class="shadow"></div>
  825.   </div>
  826. </div>
  827. </body>
  828. </html>
复制代码
回复 使用道具 举报
ZenosZeng讲师达人认证 悬赏达人认证
超级版主   /  发表于：2021-1-29 00:42:17
板凳
样式3：

image.png900299072.png
  1. <html>
  2. <head>
  3. <style>
  4. body { font-size:62.5%; margin:1em;
  5. overflow: hidden;
  6. }
  7. ul { list-style:none; margin:0; padding:0 }
  8. #watch { font-size:1em; position:relative }
  9. #watch .frame-face {
  10.   position:relative;
  11.   width:30em;
  12.   height:30em;
  13.   margin:2em auto;
  14.   border-radius:15em;
  15.   background:-webkit-linear-gradient(top, #f9f9f9,#666);
  16.   background:-moz-linear-gradient(top, #f9f9f9,#666);
  17.   background:linear-gradient(to bottom, #f9f9f9,#666);
  18.   box-shadow:rgba(0,0,0,.8) .5em .5em 4em;
  19. }
  20. #watch .frame-face:before {
  21.   content:'';
  22.   width:29.4em;
  23.   height:29.4em;
  24.   border-radius:14.7em;
  25.   position:absolute;
  26.   top:.3em; left:.3em;
  27.   background:
  28.     -webkit-linear-gradient(135deg, rgba(246,248,249,0) 0%,rgba(229,235,238,1) 50%,rgba(205,212,217,1) 51%,rgba(245,247,249,0) 100%),
  29.     -webkit-radial-gradient(center, ellipse cover, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 65%,rgba(205,212,217,1) 66%,rgba(245,247,249,1) 100%);
  30.   background:
  31.     -moz-linear-gradient(135deg, rgba(246,248,249,0) 0%,rgba(229,235,238,1) 50%,rgba(205,212,217,1) 51%,rgba(245,247,249,0) 100%),
  32.     -moz-radial-gradient(center, ellipse cover, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 65%,rgba(205,212,217,1) 66%,rgba(245,247,249,1) 100%);
  33.   background:
  34.     linear-gradient(135deg, rgba(246,248,249,0) 0%,rgba(229,235,238,1) 50%,rgba(205,212,217,1) 51%,rgba(245,247,249,0) 100%),
  35.     radial-gradient(ellipse at center, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 65%,rgba(205,212,217,1) 66%,rgba(245,247,249,1) 100%);
  36. }
  37. #watch .frame-face:after {
  38.   content:'';
  39.   width:28em;
  40.   height:28em;
  41.   border-radius:14.2em;
  42.   position:absolute;
  43.   top:.9em; left:.9em;
  44.   box-shadow:inset rgba(0,0,0,.2) .2em .2em 1em;
  45.   border:.1em solid rgba(0,0,0,.2);
  46.   background:-webkit-linear-gradient(top, #fff, #ccc);
  47.   background:-moz-linear-gradient(top, #fff, #ccc);
  48.   background:linear-gradient(to bottom, #fff, #ccc);
  49. }
  50. #watch .minute-marks li {
  51.   display:block;
  52.   width:.2em;
  53.   height:.6em;
  54.   background:#929394;
  55.   position:absolute;
  56.   top:50%; left:50%;
  57.   margin:-.4em 0 0 -.1em;
  58. }
  59. #watch .minute-marks li:first-child {transform:rotate(6deg) translateY(-12.7em)}
  60. #watch .minute-marks li:nth-child(2) {transform:rotate(12deg) translateY(-12.7em)}
  61. #watch .minute-marks li:nth-child(3) {transform:rotate(18deg) translateY(-12.7em)}
  62. #watch .minute-marks li:nth-child(4) {transform:rotate(24deg) translateY(-12.7em)}
  63. #watch .minute-marks li:nth-child(5) {transform:rotate(36deg) translateY(-12.7em)}
  64. #watch .minute-marks li:nth-child(6) {transform:rotate(42deg) translateY(-12.7em)}
  65. #watch .minute-marks li:nth-child(7) {transform:rotate(48deg) translateY(-12.7em)}
  66. #watch .minute-marks li:nth-child(8) {transform:rotate(54deg) translateY(-12.7em)}
  67. #watch .minute-marks li:nth-child(9) {transform:rotate(66deg) translateY(-12.7em)}
  68. #watch .minute-marks li:nth-child(10) {transform:rotate(72deg) translateY(-12.7em)}
  69. #watch .minute-marks li:nth-child(11) {transform:rotate(78deg) translateY(-12.7em)}
  70. #watch .minute-marks li:nth-child(12) {transform:rotate(84deg) translateY(-12.7em)}
  71. #watch .minute-marks li:nth-child(13) {transform:rotate(96deg) translateY(-12.7em)}
  72. #watch .minute-marks li:nth-child(14) {transform:rotate(102deg) translateY(-12.7em)}
  73. #watch .minute-marks li:nth-child(15) {transform:rotate(108deg) translateY(-12.7em)}
  74. #watch .minute-marks li:nth-child(16) {transform:rotate(114deg) translateY(-12.7em)}
  75. #watch .minute-marks li:nth-child(17) {transform:rotate(126deg) translateY(-12.7em)}
  76. #watch .minute-marks li:nth-child(18) {transform:rotate(132deg) translateY(-12.7em)}
  77. #watch .minute-marks li:nth-child(19) {transform:rotate(138deg) translateY(-12.7em)}
  78. #watch .minute-marks li:nth-child(20) {transform:rotate(144deg) translateY(-12.7em)}
  79. #watch .minute-marks li:nth-child(21) {transform:rotate(156deg) translateY(-12.7em)}
  80. #watch .minute-marks li:nth-child(22) {transform:rotate(162deg) translateY(-12.7em)}
  81. #watch .minute-marks li:nth-child(23) {transform:rotate(168deg) translateY(-12.7em)}
  82. #watch .minute-marks li:nth-child(24) {transform:rotate(174deg) translateY(-12.7em)}
  83. #watch .minute-marks li:nth-child(25) {transform:rotate(186deg) translateY(-12.7em)}
  84. #watch .minute-marks li:nth-child(26) {transform:rotate(192deg) translateY(-12.7em)}
  85. #watch .minute-marks li:nth-child(27) {transform:rotate(198deg) translateY(-12.7em)}
  86. #watch .minute-marks li:nth-child(28) {transform:rotate(204deg) translateY(-12.7em)}
  87. #watch .minute-marks li:nth-child(29) {transform:rotate(216deg) translateY(-12.7em)}
  88. #watch .minute-marks li:nth-child(30) {transform:rotate(222deg) translateY(-12.7em)}
  89. #watch .minute-marks li:nth-child(31) {transform:rotate(228deg) translateY(-12.7em)}
  90. #watch .minute-marks li:nth-child(32) {transform:rotate(234deg) translateY(-12.7em)}
  91. #watch .minute-marks li:nth-child(33) {transform:rotate(246deg) translateY(-12.7em)}
  92. #watch .minute-marks li:nth-child(34) {transform:rotate(252deg) translateY(-12.7em)}
  93. #watch .minute-marks li:nth-child(35) {transform:rotate(258deg) translateY(-12.7em)}
  94. #watch .minute-marks li:nth-child(36) {transform:rotate(264deg) translateY(-12.7em)}
  95. #watch .minute-marks li:nth-child(37) {transform:rotate(276deg) translateY(-12.7em)}
  96. #watch .minute-marks li:nth-child(38) {transform:rotate(282deg) translateY(-12.7em)}
  97. #watch .minute-marks li:nth-child(39) {transform:rotate(288deg) translateY(-12.7em)}
  98. #watch .minute-marks li:nth-child(40) {transform:rotate(294deg) translateY(-12.7em)}
  99. #watch .minute-marks li:nth-child(41) {transform:rotate(306deg) translateY(-12.7em)}
  100. #watch .minute-marks li:nth-child(42) {transform:rotate(312deg) translateY(-12.7em)}
  101. #watch .minute-marks li:nth-child(43) {transform:rotate(318deg) translateY(-12.7em)}
  102. #watch .minute-marks li:nth-child(44) {transform:rotate(324deg) translateY(-12.7em)}
  103. #watch .minute-marks li:nth-child(45) {transform:rotate(336deg) translateY(-12.7em)}
  104. #watch .minute-marks li:nth-child(46) {transform:rotate(342deg) translateY(-12.7em)}
  105. #watch .minute-marks li:nth-child(47) {transform:rotate(348deg) translateY(-12.7em)}
  106. #watch .minute-marks li:nth-child(48) {transform:rotate(354deg) translateY(-12.7em)}
  107. #watch .digits {
  108.   width:30em;
  109.   height:30em;
  110.   border-radius:15em;
  111.   position:absolute;
  112.   top:0; left:50%;
  113.   margin-left:-15em;
  114. }
  115. #watch .digits li {
  116.   font-size:1.6em;
  117.   display:block;
  118.   width:1.6em;
  119.   height:1.6em;
  120.   position:absolute;
  121.   top:50%; left:50%;
  122.   line-height:1.6em;
  123.   text-align:center;
  124.   margin:-.8em 0 0 -.8em;
  125.   font-weight:bold;
  126. }
  127. #watch .digits li:nth-child(1) { transform:translate(3.9em, -6.9em) }
  128. #watch .digits li:nth-child(2) { transform:translate(6.9em, -4em) }
  129. #watch .digits li:nth-child(3) { transform:translate(8em, 0) }
  130. #watch .digits li:nth-child(4) { transform:translate(6.8em, 4em) }
  131. #watch .digits li:nth-child(5) { transform:translate(3.9em, 6.9em) }
  132. #watch .digits li:nth-child(6) { transform:translate(0, 8em) }
  133. #watch .digits li:nth-child(7) { transform:translate(-3.9em, 6.9em) }
  134. #watch .digits li:nth-child(8) { transform:translate(-6.8em, 4em) }
  135. #watch .digits li:nth-child(9) { transform:translate(-8em, 0) }
  136. #watch .digits li:nth-child(10) { transform:translate(-6.9em, -4em) }
  137. #watch .digits li:nth-child(11) { transform:translate(-3.9em, -6.9em) }
  138. #watch .digits li:nth-child(12) { transform:translate(0, -8em) }
  139. #watch .digits:before {
  140.   content:'';
  141.   width:1.6em;
  142.   height:1.6em;
  143.   border-radius:.8em;
  144.   position:absolute;
  145.   top:50%; left:50%;
  146.   margin:-.8em 0 0 -.8em;
  147.   background:#121314;
  148. }
  149. #watch .digits:after {
  150.   content:'';
  151.   width:4em;
  152.   height:4em;
  153.   border-radius:2.2em;
  154.   position:absolute;
  155.   top:50%; left:50%;
  156.   margin:-2.1em 0 0 -2.1em;
  157.   border:.1em solid #c6c6c6;
  158.   background:-webkit-radial-gradient(center, ellipse cover, rgba(200,200,200,0), rgba(190,190,190,1) 90%, rgba(130,130,130,1) 100%);
  159.   background:-moz-radial-gradient(center, ellipse cover, rgba(200,200,200,0), rgba(190,190,190,1) 90%, rgba(130,130,130,1) 100%);
  160.   background:radial-gradient(ellipse at center, rgba(200,200,200,0), rgba(190,190,190,1) 90%, rgba(130,130,130,1) 100%);
  161. }
  162. @keyframes hours { to {transform:rotate(335deg)} }
  163. #watch .hours-hand {
  164.   width:.8em;
  165.   height:7em;
  166.   border-radius:0 0 .9em .9em;
  167.   background:#232425;
  168.   position:absolute;
  169.   bottom:50%; left:50%;
  170.   margin:0 0 -.8em -.4em;
  171.   box-shadow:#232425 0 0 2px;
  172.   transform-origin:0.4em 6.2em;
  173.   transform:rotate(-25deg);
  174.   animation:hours 43200s linear 0s infinite;
  175. }
  176. #watch .hours-hand:before {
  177.   content:'';
  178.   background:inherit;
  179.   width:1.8em;
  180.   height:.8em;
  181.   border-radius:0 0 .8em .8em;
  182.   box-shadow:#232425 0 0 1px;
  183.   position:absolute;
  184.   top:-.7em; left:-.5em;
  185. }
  186. #watch .hours-hand:after {
  187.   content:'';
  188.   width:0; height:0;
  189.   border:.9em solid #232425;
  190.   border-width:0 .9em 2.4em .9em;
  191.   border-left-color:transparent;
  192.   border-right-color:transparent;
  193.   position:absolute;
  194.   top:-3.1em; left:-.5em;
  195. }
  196. @keyframes minutes { to {transform:rotate(422deg)} }
  197. #watch .minutes-hand {
  198.   width:.8em;
  199.   height:12.5em;
  200.   border-radius:.5em;
  201.   background:#343536;
  202.   position:absolute;
  203.   bottom:50%; left:50%;
  204.   margin:0 0 -1.5em -.4em;
  205.   box-shadow:#343536 0 0 2px;
  206.   transform-origin:0.4em 11em;
  207.   transform:rotate(62deg);
  208.   animation:minutes 3600s linear 0s infinite;
  209. }
  210. @keyframes seconds { to {transform:rotate(480deg)} }
  211. #watch .seconds-hand {
  212.   width:.2em;
  213.   height:14em;
  214.   border-radius:.1em .1em 0 0/10em 10em 0 0;
  215.   background:#c00;
  216.   position:absolute;
  217.   bottom:50%; left:50%;
  218.   margin:0 0 -2em -.1em;
  219.   box-shadow:rgba(0,0,0,.8) 0 0 .2em;
  220.   transform-origin:0.1em 12em;
  221.   transform:rotate(120deg);
  222.   animation:seconds 60s steps(60, end) 0s infinite;
  223. }
  224. #watch .seconds-hand:after {
  225.   content:'';
  226.   width:1.4em;
  227.   height:1.4em;
  228.   border-radius:.7em;
  229.   background:inherit;
  230.   position:absolute;
  231.   left:-.65em; bottom:1.35em;
  232. }
  233. #watch .seconds-hand:before {
  234.   content:'';
  235.   width:.8em;
  236.   height:3em;
  237.   border-radius:.2em .2em .4em .4em/.2em .2em 2em 2em;
  238.   box-shadow:rgba(0,0,0,.8) 0 0 .2em;
  239.   background:inherit;
  240.   position:absolute;
  241.   left:-.35em; bottom:-3em;
  242. }
  243. #watch .digital-wrap {
  244.   width:9em;
  245.   height:3em;
  246.   border:.1em solid #222;
  247.   border-radius:.2em;
  248.   position:absolute;
  249.   top:50%; left:50%;
  250.   margin:3em 0 0 -4.5em;
  251.   overflow:hidden;
  252.   background:#4c4c4c;
  253.   background:-webkit-linear-gradient(top, #4c4c4c 0%,#0f0f0f 100%);
  254.   background:-moz-linear-gradient(top, #4c4c4c 0%, #0f0f0f 100%);
  255.   background:-ms-linear-gradient(top, #4c4c4c 0%,#0f0f0f 100%);
  256.   background:-o-linear-gradient(top, #4c4c4c 0%,#0f0f0f 100%);
  257.   background:linear-gradient(to bottom, #4c4c4c 0%,#0f0f0f 100%);
  258. }
  259. #watch .digital-wrap ul {
  260.   float:left;
  261.   width:2.85em;
  262.   height:3em;
  263.   border-right:.1em solid #000;
  264.   color:#ddd;
  265.   font-family:Consolas, monaco, monospace;
  266. }
  267. #watch .digital-wrap ul:last-child { border:none }
  268. #watch .digital-wrap li {
  269.   font-size:1.5em;
  270.   line-height:2;
  271.   letter-spacing:2px;
  272.   text-align:center;
  273.   position:relative;
  274.   left:1px;
  275. }
  276. #watch .digit-minutes li {
  277.   animation:dsm 3600s steps(60, end) 0s infinite;
  278. }
  279. #watch .digit-seconds li {
  280.   animation:dsm 60s steps(60, end) 0s infinite;
  281. }
  282. @keyframes dsm {
  283.   to { transform:translateY(-120em) }
  284. }
  285. </style>
  286. </head>
  287. <body>
  288. <div id="watch">
  289.   <div class="frame-face"></div>
  290.   <ul class="minute-marks">
  291.     <li></li><li></li><li></li><li></li><li></li><li></li>
  292.     <li></li><li></li><li></li><li></li><li></li><li></li>
  293.     <li></li><li></li><li></li><li></li><li></li><li></li>
  294.     <li></li><li></li><li></li><li></li><li></li><li></li>
  295.     <li></li><li></li><li></li><li></li><li></li><li></li>
  296.     <li></li><li></li><li></li><li></li><li></li><li></li>
  297.     <li></li><li></li><li></li><li></li><li></li><li></li>
  298.     <li></li><li></li><li></li><li></li><li></li><li></li>
  299.   </ul>
  300.   <div class="digital-wrap">
  301.     <ul class="digit-hours">
  302.       <li>23</li>
  303.       <li>00</li><li>01</li><li>02</li><li>03</li><li>04</li><li>05</li>
  304.       <li>06</li><li>07</li><li>08</li><li>09</li><li>10</li><li>11</li>
  305.       <li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li>
  306.       <li>18</li><li>19</li><li>20</li><li>21</li><li>22</li>
  307.     </ul>
  308.     <ul class="digit-minutes">
  309.       <li>10</li><li>11</li>
  310.       <li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li>
  311.       <li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li>
  312.       <li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li>
  313.       <li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li>
  314.       <li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li>
  315.       <li>42</li><li>43</li><li>44</li><li>45</li><li>46</li><li>47</li>
  316.       <li>48</li><li>49</li><li>50</li><li>51</li><li>52</li><li>53</li>
  317.       <li>54</li><li>55</li><li>56</li><li>57</li><li>58</li><li>59</li>
  318.       <li>00</li><li>01</li><li>02</li><li>03</li><li>04</li><li>05</li>
  319.       <li>06</li><li>07</li><li>08</li><li>09</li>
  320.     </ul>
  321.     <ul class="digit-seconds">
  322.       <li>20</li><li>21</li><li>22</li><li>23</li>
  323.       <li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li>
  324.       <li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li>
  325.       <li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li>
  326.       <li>42</li><li>43</li><li>44</li><li>45</li><li>46</li><li>47</li>
  327.       <li>48</li><li>49</li><li>50</li><li>51</li><li>52</li><li>53</li>
  328.       <li>54</li><li>55</li><li>56</li><li>57</li><li>58</li><li>59</li>
  329.       <li>00</li><li>01</li><li>02</li><li>03</li><li>04</li><li>05</li>
  330.       <li>06</li><li>07</li><li>08</li><li>09</li><li>10</li><li>11</li>
  331.       <li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li>
  332.       <li>18</li><li>19</li>
  333.     </ul>
  334.   </div>
  335.   <ul class="digits">
  336.     <li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li>
  337.     <li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li>
  338.   </ul>
  339.   <div class="hours-hand"></div>
  340.   <div class="minutes-hand"></div>
  341.   <div class="seconds-hand"></div>
  342. </div>
  343. </body>
  344. </html>
复制代码
回复 使用道具 举报
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册
产品与服务
活字格低代码平台
Wyn 商业智能软件
SpreadJS纯前端表格控件
技术服务体系
技术博客
低代码技术
客户与案例
典型客户
成功案例
用户访谈
合作与生态
合作伙伴网络
葡萄城市场
葡萄城与国产化
活字格用友客开工具
品牌活动
葡萄城公开课
品牌战略发布会
赋能开发者高峰论坛
企业级低代码发展研讨会
企业级低代码应用大赛
表格技术研讨会
了解葡萄城
葡萄城简介
愿景使命
研发与创新
荣誉奖项
加入我们
联系方式
联系我们
400-657-6008

葡萄城社区二维码

关注“葡萄城社区”

赋能开发者

西安葡萄城软件有限公司
专业的软件开发技术和低代码平台提供商

陕ICP备2020018819号  |   陕公网安备：61019002000258  |   隐私政策  |   网站地图  

邮箱： info.xa@grapecity.com  |  © 2024 葡萄城软件，保留所有权利

Archiver| 手机版| 小黑屋|

返回顶部