.box{display:flex;justify-content:center;align-items:center;padding:20px}.clock{position:relative;width:260px;height:260px;border:10px solid #333;border-radius:50%;background:#fff;box-shadow:0 4px 18px rgba(0,0,0,.15)}.clock:before{content:'';position:absolute;left:50%;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;background:#333;border-radius:50%;z-index:10}.clock-xin,.clock-xin2{position:absolute;left:50%;top:50%;border-radius:50%;transform:translate(-50%,-50%)}.clock-xin{width:8px;height:8px;background:#333;z-index:11}.clock-xin2{width:20px;height:20px;border:1px solid #ddd}.date{position:absolute;left:0;right:0;top:72%;text-align:center;color:#666;font-size:14px}.hour,.min,.sec{position:absolute;left:50%;top:50%;transform-origin:50% 100%;border-radius:4px}.hour{width:6px;height:65px;margin-left:-3px;margin-top:-65px;background:#333}.min{width:4px;height:88px;margin-left:-2px;margin-top:-88px;background:#555}.sec{width:2px;height:100px;margin-left:-1px;margin-top:-100px;background:#e74c3c}