vue-clock/style.css

一个简单的时钟组件

.clock[data-v-87570781]{width:30rem;height:30rem;border:7px solid #282828;box-shadow:-4px -4px 10px #43434380,inset 4px 4px 10px #00000080,inset -4px -4px 10px #43434380,4px 4px 10px #0000004d;border-radius:50%;position:relative;top:50%;left:50%;margin-left:-15rem;padding:2rem}.outer-clock-face[data-v-87570781]{position:relative;width:100%;height:100%;border-radius:100%;background:#282828;overflow:hidden}.outer-clock-face[data-v-87570781]:after{-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);transform:rotate(90deg)}.outer-clock-face[data-v-87570781]:before,.outer-clock-face[data-v-87570781]:after,.outer-clock-face .marking[data-v-87570781]{content:"";position:absolute;width:5px;height:100%;background:#1df52f;z-index:0;left:49%}.outer-clock-face .marking[data-v-87570781]{background:#bdbdcb;width:3px}.outer-clock-face .marking.marking-one[data-v-87570781]{-webkit-transform:rotate(30deg);-moz-transform:rotate(30deg);transform:rotate(30deg)}.outer-clock-face .marking.marking-two[data-v-87570781]{-webkit-transform:rotate(60deg);-moz-transform:rotate(60deg);transform:rotate(60deg)}.outer-clock-face .marking.marking-three[data-v-87570781]{-webkit-transform:rotate(120deg);-moz-transform:rotate(120deg);transform:rotate(120deg)}.outer-clock-face .marking.marking-four[data-v-87570781]{-webkit-transform:rotate(150deg);-moz-transform:rotate(150deg);transform:rotate(150deg)}.inner-clock-face[data-v-87570781]{position:absolute;top:10%;left:10%;width:80%;height:80%;background:#282828;-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;z-index:1}.inner-clock-face[data-v-87570781]:before{content:"";position:absolute;top:50%;left:50%;width:16px;height:16px;border-radius:18px;margin-left:-9px;margin-top:-6px;background:#4d4b63;z-index:11}.hand[data-v-87570781]{width:50%;right:50%;height:6px;background:#61afff;position:absolute;top:50%;border-radius:6px;transform-origin:100%;transform:rotate(90deg);transition-timing-function:cubic-bezier(.1,2.7,.58,1)}.hand.hour-hand[data-v-87570781]{width:30%;z-index:3}.hand.min-hand[data-v-87570781]{height:3px;z-index:10;width:40%}.hand.second-hand[data-v-87570781]{background:#ee791a;width:45%;height:2px}