【免费】网页版翻页时钟，精美翻页时钟，HTML翻页时钟

共1个文件

html：1个

html

需积分: 0 140 浏览量 2023-04-06 15:24:41 上传评论收藏 47KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

flip-clock-master.zip （1个子文件）

flip-clock-master

index.html 125KB

<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="https://avatar.52pojie.cn/data/avatar/000/82/44/05_avatar_small.jpg"><title>Clock</title><style>.clock{width:240px;height:240px}.clock_canva{width:100%;height:100%}.setbox{width:200px;height:200px}.setbox:hover .pic_set{opacity:1}.set-warp{display:inline-block;padding:20px 20px 12px 24px;margin-top:94px;margin-left:78px}.setting{width:36px;height:36px;padding:8px}.setting:hover>div{transform:rotate(120deg)}.pic_set{width:36px;height:36px;background-image:url("data:image/png;base64,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");transition:all .5s ease-in-out;opacity:0}.set_item{top:-208px;left:-256px;width:432px;height:312px;box-sizing:border-box;border-radius:20px}.set_item,.set_item:before{position:absolute;background-color:#262729;border:1px solid #666}.set_item:before{content:"";bottom:0;right:36px;width:20px;height:20px;border-top-color:transparent;border-left-color:transparent;transform:translateY(50%) rotate(45deg)}.setLoad{display:block!important;visibility:hidden}.slider{position:relative;width:220px;cursor:pointer}.bar-line{left:0;background:-webkit-linear-gradient(#fff,#fff) no-repeat,hsla(0,0%,100%,.25);background-size:0 100%}.bar-line,.bar-line-right{position:absolute;top:50%;transform:translateY(-50%)}.bar-line-right{right:0;background-color:hsla(0,0%,100%,.25)}.bar-handle{position:absolute;top:50%;transform:translateY(-50%);box-sizing:border-box;border:4px solid #fff;background-color:#262729;border-radius:50%;box-shadow:0 0 0 4px #262729}.time-panel-box{height:24px;padding:16px 0;margin-right:4px}.time-panel-box:hover .time-panel{overflow:visible}.time-panel{position:relative;background-color:#666;width:48px;height:24px;border-radius:4px;line-height:24px;text-align:center;overflow:hidden}.panel-down,.panel-up{position:absolute;left:50%;width:100%;transform:translateX(-50%);font-weight:900;cursor:pointer}.panel-down:hover,.panel-up:hover{display:block}.panel-up{top:-100%;background-image:linear-gradient(0deg,rgba(38,39,41,0),#262729 100%)}.panel-down{bottom:-100%;background-image:linear-gradient(180deg,rgba(38,39,41,0),#262729)}.scroll-box{position:relative;top:-16px;height:56px;overflow-y:scroll;color:#fff}.scroll-box::-webkit-scrollbar{display:none}.panel-item:after,.panel-item:before{content:"";display:block;height:16px}body{margin:0}ul{list-style:none}button,ul{margin:0;padding:0}button{border:none;outline-style:none}.bg{position:fixed;top:0;bottom:0;left:0;right:0;background-color:#000}.timer{position:absolute;top:50%;width:100%;transform:translateY(-50%);display:flex;justify-content:space-evenly}.timer_hm{width:47.5vw;height:47.5vw}.timer_hms{width:30vw;height:30vw}.watchBtn{position:absolute;width:100%;height:100%;background-color:hsla(0,0%,100%,.1);text-align:center;opacity:0;transition:all .3s;cursor:pointer}.watchBtn:hover{opacity:1}.watchBtn:active{background-color:hsla(0,0%,100%,0)}.watchBtn>div{position:absolute;left:50%;transform:translate(-50%,-50%)}.watchBtn>div:first-child{font-size:180px;top:46%}.watchBtn>div:last-child{top:90%}.set_box{position:fixed;bottom:0;right:0}.set_box_inner{padding:20px;padding-bottom:0;color:#fff;font-size:18px}.set_box_inner>li{display:flex;align-items:center;margin-bottom:8px}.setName{width:116px;margin-right:12px;text-align:right}.pickItem{display:flex;text-align:center;border-radius:6px;cursor:pointer}.pickItem>li{box-sizing:border-box;width:60px;height:24px;line-height:22px;border:1px solid #666;border-right:0}.pickItem>li:first-child{border-top-left-radius:inherit;border-bottom-left-radius:inherit}.pickItem>li:last-child{border-right:1px solid #666;border-top-right-radius:inherit;border-bottom-right-radius:inherit}.pick-active{color:#333;background-color:#fff}.timerBtn{box-sizing:border-box;width:60px;height:24px;border-radius:4px;margin-right:6px;background-color:#fff;color:#1c1c1c;font-size:16px;cursor:pointer}.timerBtn:active{background-color:#ddd}.startBtn{background-color:#666;color:#fff}.startBtn:active{background-color:#555}.iconCancel,.iconTime,.iconTomato{display:inline-block;width:20px;height:20px;vertical-align:middle;background-size:contain}.iconTime{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAADTUlEQVRYR8XXR6glVRAG4G/MoCCKKAZMiIJpM+a4EhMqKujCjaPO4AyDCRUDoohgQlTMgmEnKAbEuBJMiIoLc8KAAbOCCbP8j7rSr+d2376+B692955z6vynqv6/qhdZYFu0wPebK4DbsAW+wCd4BC9P86i5AFgLv4257DVcj7vx1yQwcwGwHn7En/gKm7Uuexdn4PE+EPMB4FtshC1xOE7Cbo1Lby0g46LVWQOrYz+80BHm+B9FYASg+dADcRN2qj9fwr74ox2NrghciXNxPq7oCGEfgBzJI67GmXX+Bpw2BMBeeJ6Z6CxHQjjO1sVP+Bob9+T5QlxW60nRY8297QgE9dvYDs9hf/yDTSqvj7YuSqV/hEt6AOSOp5C0vI8dm6loA1iGcPt3bFX8ju99CtB9OBXfTaJXa30bvFdpSUquG623AXyIrXELVrSc5NDp+AYn4+EpQaQo4zM6ses4ANvjnVrYfYyiRXhexQ61555y+MNAIGHVM7U3EUnqZtEwBXcz4nDDyn3b9y4FLGBiX2LJJLGpvWvg+6Jv0phUzwJwOc4rlAf0vOosXNNav7NqYxWet/a9iET3UlzcBnAXTkQK7biBVd3cFu3IA/rsIRyFO3BKG0D+jIzei+MnONoUb2CDxr6ni2p9R+/HMV0AIhYRjSGOcskReLCold9Ruahdnz1bkpy7Luoqwo+LikOKe08chA8QVkS0uiyUTxGuX+wJ1WcVYfgfHYil2l8fgmCKPXuXxOdI1PCtNoD8jkjsjCEFNcXdM1tvx1J8js1Hh9tKmDxmmvm5pDitdj5sW2RASa8Jhc/uArBmaXb6QKRz5TzcnkemAx5SE1R8pxZmbNw8cDCeqPVj8cAcQVyFc8pHROzapr+ugSRpSDp+wQmIgExr8R26XVAHMzEf2WZKF4BofRrHHnU4Q0l4m044xFJk0YSja/MrNeL92j7cN5SuU+FK44glGjfWuD1DoZaF35kbDkXmirVr/clSv5xfxYZMxYcVkLTrkUUj3sRn1d0yxmUAXa2xJ0NN8p0U/N0VtiEAcjb0SaPKQBKR6rNQOIUbWc/XUq8NBdB0srg6Wj5E8lmWr598mn1aY1vmv0lt+T9//wfApEdNtb7gAP4FyRimIUFX3cMAAAAASUVORK5CYII=")}.iconTomato{margin-top:-3px;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAEnElEQVRYR71XbUybVRR+zi2F0Q/o2IBiyYBg1B+6j8QfOpeJoZhFVuzix0wwDHRZYoiBGRJN/CExxj+aAFGXbJoMfmhEMy3r5hLBrBgCxAwzNkeo24BNwY0NKG35avu+17yFt+v315zvz/c85znPOffcc+8lJPlpTzXXu15q74wH13z3dj5TsM+cmStvwHRiORlqSgYkYbTdjdOeyxN71z46dz2aj/aHpj0EnOLOpSlX169TOP/nwWS4k

评论收藏

内容反馈