jquery实现手表转动显示时间效果
代码语言:html
所属分类:动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> Rolex Oyster Perpetual Submariner - pure HTML/CSS illustration</title> <link rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/reset.min.css"> <style> /* CSS isn't organized very well */ /* Text */ @import url("https://fonts.googleapis.com/css?family=Roboto:300i,400&display=swap"); /* Numerals */ @import url("https://fonts.googleapis.com/css?family=Chathura:800&display=swap"); /* Date */ @import url("https://fonts.googleapis.com/css?family=Krona+One&display=swap"); /* Rolex */ @import url("https://fonts.googleapis.com/css?family=Rhodium+Libre&display=swap"); /* Swiss Made */ @import url("https://fonts.googleapis.com/css?family=Montserrat:600&display=swap"); *, *:before, *:after { box-sizing: border-box; } html, body { height: 100%; width: 100%; } body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { -webkit-transform: scale(0.7); transform: scale(0.7); } /* Not sure where this is used */ i:before, i:after, .rolex:before, .rolex:after, .rolex .crown:before, .rolex .crown:after, .bezel .bezel-gradient:after, .bezel .bezel-gradient:before, .bezel-decor:before, .bezel-decor:after, .crystal:before, .crystal:after, .face:after, .face .sec:nth-of-type(1):after, .face .sec:nth-of-type(14):after, .content-upper .logo:before, .content-upper .logo:after, .content-upper .logo .logo-left:before, .content-upper .logo .logo-right:before, .marker-triangle:before, .marker-triangle:after, .marker-square:before, .marker-square:after, .date:after, .hand-sec:after, .hand-sec:before, .hand-min:before, .hand-min span:after, .hand-hour:after, .hand-hour:before, .hand-hour span:before, .hand-hour span:after, .hand-hour span .hour-decor:after, .hand-hour span .hour-decor:before { content: ''; display: block; position: absolute; } /* Circle marker details */ .bezel-decor:after, .markers-circle:before, .markers-circle:after { width: 26px; height: 26px; border-radius: 100%; background: #fff; box-shadow: inset 1px 1px 1px 0 #666, inset 2px 2px 7px 0 #aaa, 1px 1px 1px 0 #222; border: 2px solid #ccc; } .rolex, .rolex .band, .bezel .bezel-gradient, .bez-num, .bez-num li, .crystal, .crystal:before, .crystal:after, .face, .face:after, .marker-square, .hand-sec, .hand-min, .hand-hour { top: 0; bottom: 0; right: 0; left: 0; margin: auto; } /* .bez, .sec */ i { position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; } i:before, i:after { height: inherit; width: inherit; border-radius: inherit; -webkit-transform: rotateZ(calc(90deg)); transform: rotateZ(calc(90deg)); } /* *********************** Start main code *********************** */ /* Band and crown */ .rolex { position: absolute; width: 430px; height: 430px; /* Left and right container */ } .rolex:before, .rolex:after { border-top: 210px solid transparent; border-bottom: 210px solid transparent; height: 500px; z-index: -1; top: -35px; } .rolex:before { border-right: 73px solid #e6e6e6; left: 5px; box-shadow: 30px 0 0 #e6e6e6; } .rolex:after { border-left: 73px solid #e6e6e6; right: 5px; box-shadow: -30px 0 0 #e6e6e6; } .rolex .band { position: absolute; height: 508px; width: 82px; background: #e6e6e6; box-shadow: -74px 0 0 -14px #e6e6e6, 74px 0 0 -14px #e6e6e6; } .rolex .crown { position: absolute; top: 0; bottom: 0; margin: auto 0; right: -30px; width: 30px; height: 76px; background: #e6e6e6; box-shadow: 20px 0 0 -10px #e6e6e6; /* Top and bottom of crown */ } .rolex .crown:before, .rolex .crown:after { right: 16px; } .rolex .crown:before { top: 110px; border-top: 30px solid #e6e6e6; border-right: 40px solid transparent; box-shadow: 0 -28px 0 0 #e6e6e6; /* 6px margin */ } .rolex .crown:after { bottom: 110px; border-left: 40px solid #e6e6e6; border-top: 30px solid transparent; box-shadow: 0 28px 0 0 #e6e6e6; /* 6px margin */ } /* Bezel radius and face */ .bezel { width: inherit; height: inherit; background: linear-gradient(45deg, #f0f0f0 0%, #ddd 50%, #f0f0f0 100%); border-radius: 100%; position: relative; overflow: hidden; box-shadow: 0 0 0 6px #fff; /* Bezel face */ } .bezel .bezel-gradient { position: absolute; overflow: hidden; height: 404px; width: 404px; border-radius: inherit; background: linear-gradient(90deg, #373D7D 0%, #2E305B 30%, #4B60A6 50%, #2E305B 60%, #4B60A6 100%); /* Main BG */ box-shadow: 0 0 0 2px #272A51, -1px 0 6px 0 #fff; /* Shadow */ /* Gradient shine decor */ /* Gradient shine decor */ } .bezel .bezel-gradient:after { height: 280px; width: 120px; right: 0; opacity: 0.6; background: linear-gradient(128deg, #373D7D 0%, #2E305B 22%, #5666AD 22%, #4B60A6 50%, rgba(40, 42, 80, 0) 90%); } .bezel .bezel-gradient:before { height: 300px; width: 148px; left: 0; top: 50px; opacity: 0.4; background: linear-gradient(-138deg, #373D7D 0%, #2E305B 22%, #5666AD 22%, #4B60A6 64%, rgba(40, 42, 80, 0) 70%); } /* Bezel indents */ .bez { opacity: 0.7; height: 18px; width: 18px; border-radius: inherit; box-shadow: 0 222px 0 0 #fff, 0 -222px 0 0 #fff, 2px 216px 2px -2px #777, 2px -216px 2px -2px #777, 0 -215px 0 0 #222, 0 215px 0 0 #222; } .bez:before { box-shadow: 0 222px 0 0 #fff, 0 -222px 0 0 #fff, 2px 216px 2px -2px #777, 2px -216px 2px -2px #777, 0 -215px 0 0 #222, 0 215px 0 0 #222; } i.bez:nth-of-type(1) { -webkit-transform: rotateZ(calc(6deg * 1)); transform: rotateZ(calc(6deg * 1)); } i.bez:nth-of-type(2) { -webkit-transform: rotateZ(calc(6deg * 2)); transform: rotateZ(calc(6deg * 2)); } i.bez:nth-of-type(3) { -webkit-transform: rotateZ(calc(6deg * 3)); transform: rotateZ(calc(6deg * 3)); } i.bez:nth-of-type(4) { -webkit-transform: rotateZ(calc(6deg * 4)); transform: rotateZ(calc(6deg * 4)); } i.bez:nth-of-type(5) { -webkit-transform: rotateZ(calc(6deg * 5)); transform: rotateZ(calc(6deg * 5)); } i.bez:nth-of-type(6) { -webkit-transform: rotateZ(calc(6deg * 6)); transform: rotateZ(calc(6deg * 6)); } i.bez:nth-of-type(7) { -webkit-transform: rotateZ(calc(6deg * 7)); transform: rotateZ(calc(6deg * 7)); } i.bez:nth-of-type(8) { -webkit-transform: rotateZ(calc(6deg * 8)); transform: rotateZ(calc(6deg * 8)); } i.bez:nth-of-type(9) { -webkit-transform: rotateZ(calc(6deg * 9)); transform: rotateZ(calc(6deg * 9)); } i.bez:nth-of-type(10) { -webkit-transform: rotateZ(calc(6deg * 10)); transform: rotateZ(calc(6deg * 10)); } i.bez:nth-of-type(11) { -webkit-transform: rotateZ(calc(6deg * 11)); transform: rotateZ(calc(6deg * 11)); } i.bez:nth-of-type(12) { -webkit-transform: rotateZ(calc(6deg * 12)); transform: rotateZ(calc(6deg * 12)); } i.bez:nth-of-type(13) { -webkit-transform: rotateZ(calc(6deg * 13)); transform: rotateZ(calc(6deg * 13)); } i.bez:nth-of-type(14) { -webkit-transform: rotateZ(calc(6deg * 14)); transform: rotateZ(calc(6deg * 14)); } /* 5, 15, 25, 35, 45, 55 marks */ .bez-five-min { height: 30px; width: 10px; box-shadow: 0 182px 0 0 #efefef, 0 -182px 0 0 #efefef, 2px -182px 0 0 #888, 2px 182px 0 0 #888; opacity: 1; -webkit-transform: rotateZ(30deg); transform: rotateZ(30deg); } .bez-five-min:before, .bez-five-min:after { height: inherit; width: inherit; box-shadow: inherit; } .bez-five-min:before { -webkit-transform: rotateZ(60deg); transform: rotateZ(60deg); } .bez-five-min:after { -webkit-transform: rotateZ(-60deg); transform: rotateZ(-60deg); } /* 10, 20, 30, 40, 50 numbers */ .bez-num { font-family: 'Chathura', sans-serif; font-size: 72px; letter-spacing: -0.02em; position: absolute; width: 406px; height: 406px; } .bez-num li { position: absolute; height: 436px; width: 48px; text-align: center; text-indent: -5px; /* Fake inset */ color: #e0e0e0; text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.5); } .bez-num li:nth-child(1) { -webkit-transform: rotateZ(calc(60deg * 1)); transform: rotateZ(calc(60deg * 1)); } .bez-num li:nth-child(2) { -webkit-transform: rotateZ(calc(60deg * 2)); transform: rotateZ(calc(60deg * 2)); } .bez-num li:nth-child(3) { -webkit-transform: rotateZ(calc(60deg * 3)); transform: rotateZ(calc(60deg * 3)); } .bez-num li:nth-child(4) { -webkit-transform: rotateZ(calc(60deg * 4)); transform: rotateZ(calc(60deg * 4)); } .bez-num li:nth-child(5) { -webkit-transform: rotateZ(calc(60deg * 5)); transform: rotateZ(calc(60deg * 5)); } /* Bezel top triangle and circle */ .bezel-decor { /* Bezel top triangle */ /* Bezel circle in triangle */ } .bezel-decor:before { top: 18px; left: 0; right: 0; margin: auto; width: 0; height: 0; border-top: 32px solid #ddd; border-right: 24px solid transparent; border-left: 24px solid transparent; box-shadow: 0 -1px 0 #333; } .bezel-decor:after { left: 0; right: 0; margin: auto; top: 17px; box-shadow: inset 0 2px 1px 0 rgba(0, 0, 0, 0.7); background: linear-gradient(90deg, #ccc 0%, #ccc 30%, #eee 70%, #eee 100%); } /* 1-15 squares */ .bez-min { height: 14px; width: 4px; box-shadow: 0 -174px 0 0 #efefef, 1px -175px 0 0 #444; /* Fake indent */ } .bez-min:nth-child(5), .bez-min:nth-child(10) { display: none; } .bez-min:nth-child(1) { -webkit-transform: rotateZ(calc(6deg * 1)); transform: rotateZ(calc(6deg * 1)); } .bez-min:nth-child(2) { -webkit-transform: rotateZ(calc(6deg * 2)); transform: rotateZ(calc(6deg * 2)); } .bez-min:nth-child(3) { -webkit-transform: rotateZ(calc(6deg * 3)); transform: rotateZ(calc(6deg * 3)); } .bez-min:nth-child(4) { -webkit-transform: rotateZ(calc(6deg * 4)); transform: rotateZ(calc(6deg * 4)); } .bez-min:nth-child(5) { -webkit-transform: rotateZ(calc(6deg * 5)); transform: rotateZ(calc(6deg * 5)); } .bez-min:nth-child(6) { -webkit-transform: rotateZ(calc(6deg * 6)); transform: rotateZ(calc(6deg * 6)); } .bez-min:nth-child(7) { -webkit-transform: rotateZ(calc(6deg * 7)); transform: rotateZ(calc(6deg * 7)); } .bez-min:nth-child(8) { -webkit-transform: rotateZ(calc(6deg * 8)); transform: rotateZ(calc(6deg * 8)); } .bez-min:nth-child(9) { -webkit-transform: rotateZ(calc(6deg * 9)); transform: rotateZ(calc(6deg * 9)); } .bez-min:nth-child(10) { -webkit-transform: rotateZ(calc(6deg * 10)); transform: rotateZ(calc(6deg * 10)); } .bez-min:nth-child(11) { -webkit-transform: rotateZ(calc(6deg * 11)); transform: rotateZ(calc(6deg * 11)); } .bez-min:nth-child(12) { -webkit-transform: rotateZ(calc(6deg * 12)); transform: rotateZ(calc(6deg * 12)); } .bez-min:nth-child(13) { -webkit-transform: rotateZ(calc(6deg * 13)); transform: rotateZ(calc(6deg * 13)); } .bez-min:nth-child(14) { -webkit-transform: rotateZ(calc(6deg * 14)); transform: rotateZ(calc(6deg * 14)); } /* Border, inner and outer rings */ .crystal { position: absolute; width: 322px; height: 322px; border-radius: 50%; box-shadow: inset 1px 1px 4px 0 rgba(0, 0, 0, 0.7), 0 0 0 2px #272A51; background: linear-gradient(90deg, #ddd 0%, #777 65%, #ccc 100%); /* Outer ring */ /* Inner ring */ } .crystal:before, .crystal:after { border-radius: 100%; } .crystal:before { width: 316px; height: 316px; border: 2px solid #444; background: linear-gradient(0deg, #aaa 0%, #888 65%, #aaa 100%); box-shadow: inset 0 0 10px 0 #444; } .crystal:after { width: 304px; height: 304px; border: 1px solid rgba(255, 255, 255, 0.5); background: linear-gradient(-25deg, #666 0%, #ddd 55%, #999 100%); box-shadow: inset 0 -2px 4px 0 rgba(255, 255, 255, 0.8), inset 0 2px 3px 0 rgba(255, 255, 255, 0.6); } .face { position: absolute; width: 286px; height: 286px; border-radius: 100%; background: radial-gradient(ellipse at center, #3B509B 0%, #323868 80%); box-shadow: inset 0 0 8px 2px rgba(0, 0, 0, 0.4), inset 0 -4px 20px 0 rgba(0, 0, 0, 0.2); /* Thicker 30, reduced height */ /* Each second tick */ } .face:after { width: 3px; height: 3px; background: #e0e0e0; top: 281px; -webkit-transform: rotateZ(180deg); transform: rotateZ(180deg); } .face .sec { height: 7px; width: 1px; box-shadow: 0 137px 0 0 #e0e0e0, 0 147px 0 0 rgba(255, 255, 255, 0.2), 0 -137px 0 0 #e0e0e0; /* Thicker 35, 5, before:20, after:50 */ /* Thicker 40, 10, before:25, after:55 */ /* Thicker before:15, after:50 */ /* Remove ticks for footer text */ } .face .sec:before { box-shadow: 0 -137px 0 0 #e0e0e0, 0 137px 0 0 #e0e0e0, 0 -147px 0 0 rgba(255, 255, 255, 0.2); } .face .sec:nth-of-type(5) { box-shadow: 0 137px 0 0 #e0e0e0, 1px 137px 0 0 #e0e0e0, -1px 137px 0 0 #e0e0e0, 0 -137px 0 0 #e0e0e0, 1px -137px 0 0 #e0e0e0, -1px -137px 0 0 #e0e0e0, 0 147px 0 0 rgba(255, 255, 255, 0.2); } .face .sec:nth-of-type(5):before { box-shadow: 0 -137px 0 0 #e0e0e0, 1px -137px 0 0 #e0e0e0, -1px -137px 0 0 #e0e0e0, 0 -147px 0 0 rgba(255, 255, 255, 0.2); } .face .sec:nth-of-type(5):after { box-shadow: 0 137px 0 0 #e0e0e0, 1px 137px 0 0 #e0e0e0, -1px 137px 0 0 #e0e0e0; } .face .sec:nth-of-type(10) { box-shadow: 0 137px 0 0 #e0e0e0, 1px 137px 0 0 #e0e0e0, -1px 137px 0 0 #e0e0e0, 0 -137px 0 0 #e0e0e0, 1px -137px 0 0 #e0e0e0, -1px -137px 0 0 #e0e0e0, 0 147px 0 0 rgba(255, 255, 255, 0.2); } .face .sec:nth-of-type(10):before { box-shadow: 0 -137px 0 0 #e0e0e0, 1px -137px 0 0 #e0e0e0, -1px -137px 0 0 #e0e0e0, 0 -147px 0 0 rgba(255, 255, 255, 0.2); } .face .sec:nth-of-type(10):after { box-shadow: 0 137px 0 0 #e0e0e0, 1px 137px 0 0 #e0e0e0, -1px 137px 0 0 #e0e0e0; } .face .sec:nth-of-type(15):before { box-shadow: 0 -137px 0 0 #e0e0e0, 1px -137px 0 0 #e0e0e0, -1px -137px 0 0 #e0e0e0, 0 -147px 0 0 rgba(255, 255, 255, 0.2); } .face .sec:nth-of-type(15):after { box-shadow: 0 137px 0 0 #e0e0e0, 1px 137px 0 0 #e0e0e0, -1px 137px 0 0 #e0e0e0; } .face .sec:nth-of-type(1) { box-shadow: 0 -137px 0 0 #e0e0e0, 0 147px 0 0 rgba(255, 255, 255, 0.2); /* Shorter tick 31 */ } .face .sec:nth-of-type(1):after { height: 1px; width: 3px; background: #e0e0e0; top: 143px; left: -1px; } .face .sec:nth-of-type(14) { /* Shorter tick 29 - Super hacky */ } .face .sec:nth-of-type(14):before { box-shadow: 0 137px 0 0 #e0e0e0, 0 -147px 0 0 rgba(255, 255, 255, 0.2); } .face .sec:nth-of-type(14):after { height: 3px; width: 1px; background: #e0e0e0; left: 140px; top: 2px; } .face .sec:nth-of-type(15) { box-shadow: 0 -137px 0 0 #e0e0e0, 1px -137px 0 0 #e0e0e0, -1px -137px 0 0 #e0e0e0, 0 147px 0 0 rgba(255, 255, 255, 0.2), 1px 147px 0 0 rgba(255, 255, 255, 0.2), -1px 147px 0 0 rgba(255, 255, 255, 0.2); } i.sec:nth-of-type(1) { -webkit-transform: rotateZ(calc(6deg * 1)); transform: rotateZ(calc(6deg * 1)); } i.sec:nth-of-type(2) { -webkit-transform: rotateZ(calc(6deg * 2)); transform: rotateZ(calc(6deg * 2)); } i.sec:nth-of-type(3) { -webkit-transform: rotateZ(calc(6deg * 3)); transform: rotateZ(calc(6deg * 3)); } i.sec:nth-of-type(4) { -webkit-transform: rotateZ(calc(6deg * 4)); transform: rotateZ(calc(6deg * 4)); } i.sec:nth-of-type(5) { -webkit-transform: rotateZ(calc(6deg * 5)); transform: rotateZ(calc(6deg * 5)); } i.sec:nth-of-type(6) { -webkit-transform: rotateZ(calc(6deg * 6)); transform: rotateZ(calc(6deg * 6)); } i.sec:nth-of-type(7) { -webkit-transform: rotateZ(calc(6deg * 7)); transform: rotateZ(calc(6deg * 7)); } i.sec:nth-of-type(8) { -webkit-transform: rotateZ(calc(6deg * 8)); transform: rotateZ(calc(6deg * 8)); } i.sec:nth-of-type(9) { -webkit-transform: rotateZ(calc(6deg * 9)); transform: rotateZ(calc(6deg * 9)); } i.sec:nth-of-type(10) { -webkit-transform: rotateZ(calc(6deg * 10)).........完整代码请登录后点击上方下载按钮下载查看
网友评论0