jquery圆环形带天气时钟走动效果代码
代码语言:html
所属分类:其他
代码描述:jquery圆环形带天气时钟走动效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css"> <style> #x1 { background: #FF3B30; } #x2 { background: #FF9500; } #x3 { background: #FFCC00; } #x4 { background: #4CD964; } #x5 { background: #5AC8FA; } #x6 { background: #007AFF; } #x7 { background: #5856D6; } .bar:nth-child(1) { position: absolute; top: 0px; left: 0px; } .bar:nth-child(2) { position: absolute; top: 0px; left: 20px; } .bar:nth-child(3) { position: absolute; top: 0px; left: 40px; } .bar:nth-child(4) { position: absolute; top: 0px; left: 60px; } .bar:nth-child(5) { position: absolute; top: 0px; left: 80px; } .bar:nth-child(6) { position: absolute; top: 0px; left: 100px; } .bar:nth-child(7) { position: absolute; top: 0px; left: 120px; } .day-dial, .month-dial, .day-name-dial { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); } .head { position: relative; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); } .day-text span, .day-preview span, .month-text span, .month-preview span, .day-name-text span, .day-name-preview span, .hand-container, .center-preview span { text-align: center; moz-transform-origin: center center; -o-transform-origin: center center; -ms-transform-origin: center center; -webkit-transform-origin: center center; transform-origin: center center; } * { box-sizing: border-box; } html, body { background: #292929; border: 0; font-family: "Roboto Mono", monospace; height: 100%; margin: 0px; width: 100%; } h1 { color: #555; font-size: 25px; } h2 { color: #555; font-size: 15px; } .center-dial { position: absolute; top: calc(50% - 75px); left: calc(50% - 75px); -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; width: 150px; height: 150px; background-color: #202020; border-radius: 50%; color: #000; box-shadow: 0px 2px 2px #000; cursor: pointer; overflow: hidden; } .center-preview span { position: absolute; top: 0%; left: calc(50% - 12.5px); height: 150px; width: 25px; } .center-preview { opacity: 0; filter: alpha(opacity=0); } .center-preview .char1 { -moz-transform: rotate(-40deg); -o-transform: rotate(-40deg); -ms-transform: rotate(-40deg); -webkit-transform: rotate(-40deg); transform: rotate(-40deg); } .center-preview .char2 { -moz-transform: rotate(-20deg); -o-transform: rotate(-20deg); -ms-transform: rotate(-20deg); -webkit-transform: rotate(-20deg); transform: rotate(-20deg); } .center-preview .char3 { -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); } .center-preview .char4 { -moz-transform: rotate(20deg); -o-transform: rotate(20deg); -ms-transform: rotate(20deg); -webkit-transform: rotate(20deg); transform: rotate(20deg); } .center-preview .char5 { -moz-transform: rotate(40deg); -o-transform: rotate(40deg); -ms-transform: rotate(40deg); -webkit-transform: rotate(40deg); transform: rotate(40deg); } .center-preview .char6 { -moz-transform: rotate(60deg); -o-transform: rotate(60deg); -ms-transform: rotate(60deg); -webkit-transform: rotate(60deg); transform: rotate(60deg); } .head { width: 50px; height: 50px; background: #FFF; border-radius: 50%; } .torso { position: relative; top: calc(50% - 20px); left: calc(50% - 50px); width: 100px; height: 100px; background: #FFF; border-radius: 50%; } .hand-container { position: absolute; top: 0%; left: calc(50% - 12.5px); opacity: 0; filter: alpha(opacity=0); width: 25px; height: 150px; moz-transform-origin: center center; -o-transform-origin: center center; -ms-transform-origin: center center; -webkit-transform-origin: center center; transform-origin: center center; } .hour-hand { width: 10px; height: 50px; position: relative; top: calc(50% - 45px); left: calc(50% - 5px); -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; background: #FFF; border-radius: 5px; } .minute-hand { width: 10px; height: 70px; position: relative; top: calc(50% - 65px); left: calc(50% - 5px); background: #CCC; border-radius: 5px; } .second-hand { width: 2px; height: 70px; position: relative; top: calc(50% - 69px); left: calc(50% - 1px); background: #AAA; border-radius: 1px; } .day-name-dial { width: 250px; height: 250px; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } .day-name-preview span { position: absolute; top: calc(-25% - 5px); left: calc(50% - 12.5px); height: 250px; width: 25px; } .day-name-preview { opacity: 0; filter: alpha(opacity=0); } .day-name-preview .char1 { -moz-transform: rotate(-35deg); -o-transform: rotate(-35deg); -ms-transform: rotate(-35deg); -webkit-transform: rotate(-35deg); transform: rotate(-35deg); } .day-name-preview .char2 { -moz-transform: rotate(-25deg); -o-transform: rotate(-25deg); -ms-transform: rotate(-25deg); -webkit-transform: rotate(-25deg); transform: rotate(-25deg); } .day-name-preview .char3 { -moz-transform: rotate(-15deg); -o-transform: rotate(-15deg); -ms-transform: rotate(-15deg); -webkit-transform: rotate(-15deg); transform: rotate(-15deg); } .day-name-preview .char4 { -moz-transform: rotate(-5deg); -o-transform: rotate(-5deg); -ms-transform: rotate(-5deg); -webkit-transform: rotate(-5deg); transform: rotate(-5deg); } .day-name-preview .char5 { -moz-transform: rotate(5deg); -o-transform: rotate(5deg); -ms-transform: rotate(5deg); -webkit-transform: rotate(5deg); transform: rotate(5deg); } .day-name-preview .char6 { -moz-transform: rotate(15deg); -o-transform: rotate(15deg); -ms-transform: rotate(15deg); -webkit-transform: rotate(15deg); transform: rotate(15deg); } .day-name-preview .char7 { -moz-transform: rotate(25deg); -o-transform: rotate(25deg); -ms-transform: rotate(25deg); -webkit-transform: rotate(25deg); transform: rotate(25deg); } .day-name-preview .char8 { -moz-transform: rotate(35deg); -o-transform: rotate(35deg); -ms-transform: rotate(35deg); -webkit-transform: rotate(35deg); transform: rotate(35deg); } .day-name-preview .char9 { -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); } .day-name-text span { position: absolute; top: calc(-25% + 5px); left: calc(50% - 6px); height: 232px; width: 12px; } .day-name-text { opacity: 0; filter: alpha(opacity=0); } .day-name-text .char1 { -moz-transform: rotate(-125.3571428571deg); -o-transform: rotate(-125.3571428571deg); -ms-transform: rotate(-125.3571428571deg); -webkit-transform: rotate(-125.3571428571deg); transform: rotate(-125.3571428571deg); } .day-name-text .char2 { -moz-transform: rotate(-115.7142857143deg); -o-transform: rotate(-115.7142857143deg); -ms-transform: rotate(-115.7142857143deg); -webkit-transform: rotate(-115.7142857143deg); transform: rotate(-115.7142857143deg); } .day-name-text .char3 { -moz-transform: rotate(-106.0714285714deg); -o-transform: rotate(-106.0714285714deg); -ms-transform: rotate(-106.0714285714deg); -webkit-transform: rotate(-106.0714285714deg); transform: rotate(-106.0714285714deg); } .day-name-text .char4 { -moz-transform: rotate(-96.4285714286deg); -o-transform: rotate(-96.4285714286deg); -ms-transform: rotate(-96.4285714286deg); -webkit-transform: rotate(-96.4285714286deg); transform: rotate(-96.4285714286deg); } .day-name-text .char5 { -moz-transform: rotate(-86.7857142857deg); -o-transform: rotate(-86.7857142857deg); -ms-transform: rotate(-86.7857142857deg); -webkit-transform: rotate(-86.7857142857deg); transform: rotate(-86.7857142857deg); } .day-name-text .char6 { -moz-transform: rotate(-77.1428571429deg); -o-transform: rotate(-77.1428571429deg); -ms-transform: rotate(-77.1428571429deg); -webkit-transform: rotate(-77.1428571429deg); transform: rotate(-77.1428571429deg); } .day-name-text .char7 { -moz-transform: rotate(-67.5deg); -o-transform: rotate(-67.5deg); -ms-transform: rotate(-67.5deg); -webkit-transform: rotate(-67.5deg); transform: rotate(-67.5deg); } .day-name-text .char8 { -moz-transform: rotate(-57.8571428571deg); -o-transform: rotate(-57.8571428571deg); -ms-transform: rotate(-57.8571428571deg); -webkit-transform: rotate(-57.8571428571deg); transform: rotate(-57.8571428571deg); } .day-name-text .char9 { -moz-transform: rotate(-48.2142857143deg); -o-transform: rotate(-48.2142857143deg); -ms-transform: rotate(-48.2142857143deg); -webkit-transform: rotate(-48.2142857143deg); transform: rotate(-48.2142857143deg); } .day-name-text .char10 { -moz-transform: rotate(-38.5714285714deg); -o-transform: rotate(-38.5714285714deg); -ms-transform: rotate(-38.5714285714deg); -webkit-transform: rotate(-38.5714285714deg); transform: rotate(-38.5714285714deg); } .day-name-text .char11 { -moz-transform: rotate(-28.9285714286deg); -o-transform: rotate(-28.9285714286deg); -ms-transform: rotate(-28.9285714286deg); -webkit-transform: rotate(-28.9285714286deg); transform: rotate(-28.9285714286deg); } .day-name-text .char12 { -moz-transform: rotate(-19.2857142857deg); -o-transform: rotate(-19.2857142857deg); -ms-transform: rotate(-19.2857142857deg); -webkit-transform: rotate(-19.2857142857deg); transform: rotate(-19.2857142857deg); } .day-name-text .char13 { -moz-transform: rotate(-9.6428571429deg); -o-transform: rotate(-9.6428571429deg); -ms-transform: rotate(-9.6428571429deg); -webkit-transform: rotate(-9.6428571429deg); transform: rotate(-9.6428571429deg); } .day-name-text .char14 { -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); } .day-name-text .char15 { -moz-transform: rotate(9.6428571429deg); -o-transform: rotate(9.6428571429deg); -ms-transform: rotate(9.6428571429deg); -webkit-transform: rotate(9.6428571429deg); transform: rotate(9.6428571429deg); } .day-name-text .char16 { -moz-transform: rotate(19.2857142857deg); -o-transform: rotate(19.2857142857deg); -ms-transform: rotate(19.2857142857deg); -webkit-transform: rotate(19.2857142857deg); transform: rotate(19.2857142857deg); } .day-name-text .char17 { -moz-transform: rotate(28.9285714286deg); -o-transform: rotate(28.9285714286deg); -ms-transform: rotate(28.9285714286deg); -webkit-transform: rotate(28.9285714286deg); transform: rotate(28.9285714286deg); } .day-name-text .char18 { -moz-transform: rotate(38.5714285714deg); -o-transform: rotate(38.5714285714deg); -ms-transform: rotate(38.5714285714deg); -webkit-transform: rotate(38.5714285714deg); transform: rotate(38.5714285714deg); } .day-name-text .char19 { -moz-transform: rotate(48.2142857143deg); -o-transform: rotate(48.2142857143deg); -ms-transform: rotate(48.2142857143deg); -webkit-transform: rotate(48.2142857143deg); transform: rotate(48.2142857143deg); } .day-name-text .char20 { -moz-transform: rotate(57.8571428571deg); -o-transform: rotate(57.8571428571deg); -ms-transform: rotate(57.8571428571deg); -webkit-transform: rotate(57.8571428571deg); transform: rotate(57.8571428571deg); } .day-name-text .char21 { -moz-transform: rotate(67.5deg); -o-transform: rotate(67.5deg); -ms-transform: rotate(67.5deg); -webkit-transform: rotate(67.5deg); transform: rotate(67.5deg); } .day-name-text .char22 { -moz-transform: rotate(77.1428571429deg); -o-transform: rotate(77.1428571429deg); -ms-transform: rotate(77.1428571429deg); -webkit-transform: rotate(77.1428571429deg); transform: rotate(77.1428571429deg); } .day-name-text .char23 { -moz-transform: rotate(86.7857142857deg); -o-transform: rotate(86.7857142857deg); -ms-transform: rotate(86.7857142857deg); -webkit-transform: rotate(86.7857142857deg); transform: rotate(86.7857142857deg); } .day-name-text .char24 { -moz-transform: rotate(96.4285714286deg); -o-transform: rotate(96.4285714286deg); -ms-transform: rotate(96.4285714286deg); -webkit-transform: rotate(96.4285714286deg); transform: rotate(96.4285714286deg); } .day-name-text .char25 { -moz-transform: rotate(106.0714285714deg); -o-transform: rotate(106.0714285714deg); -ms-transform: rotate(106.0714285714deg); -webkit-transform: rotate(106.0714285714deg); transform: rotate(106.0714285714deg); } .day-name-text .char26 { -moz-transform: rotate(115.7142857143deg); -o-transform: rotate(115.7142857143deg); -ms-transform: rotate(115.7142857143deg); -webkit-transform: rotate(115.7142857143deg); transform: rotate(115.7142857143deg); } .day-name-text .char27 { -moz-transform: rotate(125.3571428571deg); -o-transform: rotate(125.3571428571deg); -ms-transform: rotate(125.3571428571deg); -webkit-transform: rotate(125.3571428571deg); transform: rotate(125.3571428571deg); } .day-name-text .char28 { -moz-transform: rotate(135deg); -o-transform: rotate(135deg); -ms-transform: rotate(135deg); -webkit-transform: rotate(135deg); transform: rotate(135deg); } .month-dial { width: 350px; height: 350px; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } .month-preview span { position: absolute; top: calc(-25% + 20px); left: calc(50% - 12.5px); height: 350px; width: 25px; } .month-preview { opacity: 0; filter: alpha(opacity=0); } .month-preview .char1 { -moz-transform: rotate(-30deg); -o-transform: rotate(-30deg); -ms-transform: rotate(-30deg); -webkit-transform: rotate(-30deg); transform: rotate(-30deg); } .month-preview .char2 { -moz-transform: rotate(-15deg); -o-transform: rotate(-15deg); -ms-transform: rotate(-15deg); -webkit-transform: rotate(-15deg); transform: rotate(-15deg); } .month-preview .char3 { -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); } .month-preview .char4 { -moz-transform: rotate(15deg); -o-transform: rotate(15deg); -ms-transform: rotate(15deg); -webkit-transform: rotate(15deg); transform: rotate(15deg); } .month-preview .char5 { -moz-transform: rotate(30deg); -o-transform: rotate(30deg); -ms-transform: rotate(30deg); -webkit-transform: rotate(30deg); transform: rotate(30deg); } .month-preview .char6 { -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); } .month-text span { position: absolute; top: calc(-25% + 30px); left: calc(50% - 6px); height: 332px; width: 12px; } .month-text { opacity: 0; filter: alpha(opacity=0); } .month-text .char1 { -moz-transform: rotate(-129.375deg); -o-transform: rotate(-129.375deg); -ms-transform: rotate(-129.375deg); -webkit-transform: rotate(-129.375deg); transform: rotate(-129.375deg); } .month-text .char2 { -moz-transform: rotate(-123.75deg); -o-transform: rotate(-123.75deg); -ms-transform: rotate(-123.75deg); -webkit-transform: rotate(-123.75deg); transform: rotate(-123.75deg); } .month-text .char3 { -moz-transform: rotate(-118.125deg); -o-transform: rotate(-118.125deg); -ms-transform: rotate(-118.125deg); -webkit-transform: rotate(-118.125deg); transform: rotate(-118.125deg); } .month-text .char4 { -moz-transform: rotate(-112.5deg); -o-transform: rotate(-112.5deg); -ms-transform: rotate(-112.5deg); -webkit-transform: rotate(-112.5deg); transform: rotate(-112.5deg); } .month-text .char5 { -moz-transform: rotate(-106.875deg); -o-transform: rotate(-106.875deg); -ms-transform: rotate(-106.875deg); -webkit-transform: rotate(-106.875deg); transform: rotate(-106.875deg); } .month-text .char6 { -moz-transform: rotate(-101.25deg); -o-transform: rotate(-101.25deg); -ms-transform: rotate(-101.25deg); -webkit-transform: rotate(-101.25deg); transform: rotate(-101.25deg); } .month-text .char7 { -moz-transform: rotate(-95.625deg); -o-transform: rotate(-95.625deg); -ms-transform: rotate(-95.625deg); -webkit-transform: rotate(-95.625deg); transform: rotate(-95.625deg); } .month-text .char8 { -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } .month-text .char9 { -moz-transform: rotate(-84.375deg); -o-transform: rotate(-84.375deg); -ms-transform: rotate(-84.375deg); -webkit-transform: rotate(-84.375deg); transform: rotate(-84.375deg); } .month-text .char10 { -moz-transform: rotate(-78.75deg); -o-transform: rotate(-78.75deg); -ms-transform: rotate(-78.75deg); -webkit-transform: rotate(-78.75deg); transform: rotate(-78.75deg); } .month-text .char11 { -moz-transform: rotate(-73.125deg); -o-transform: rotate(-73.125deg); -ms-transform: rotate(-73.125deg); -webkit-transform: rotate(-73.125deg); transform: rotate(-73.125deg); } .month-text .char12 { -moz-transform: rotate(-67.5deg); -o-transform: rotate(-67.5deg); -ms-transform: rotate(-67.5deg); -webkit-transform: rotate(-67.5deg); transform: rotate(-67.5deg); } .month-text .char13 { -moz-transform: rotate(-61.875deg); -o-transform: rotate(-61.875deg); -ms-transform: rotate(-61.875deg); -webkit-transform: rotate(-61.875deg); transform: rotate(-61.875deg); } .month-text .char14 { -moz-transform: rotate(-56.25deg); -o-transform: rotate(-56.25deg); -ms-transform: rotate(-56.25deg); -webkit-transform: rotate(-56.25deg); transform: rotate(-56.25deg); } .month-text .char15 { -moz-transform: rotate(-50.625deg); -o-transform: rotate(-50.625deg); -ms-transform: rotate(-50.625deg); -webkit-transform: rotate(-50.625deg); transform: rotate(-50.625deg); } .month-text .char16 { -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .month-text .char17 { -moz-transform: rotate(-39.375deg); -o-transform: rotate(-39.375deg); -ms-transform: rotate(-39.375deg); -webkit-transform: rotate(-39.375deg); transform: rotate(-39.375deg); } .month-text .char18 { -moz-transform: rotate(-33.75deg); -o-transform: rotate(-33.75deg); -ms-transform: rotate(-33.75deg); -webkit-transform: rotate(-33.75deg); transform: rotate(-33.75deg); } .month-text .char19 { -moz-transform: rotate(-28.125deg); -o-transform: rotate(-28.125deg); -ms-transform: rotate(-28.125deg); -webkit-transform: rotate(-28.125deg); transform: rotate(-28.125deg); } .month-text .char20 { -moz-transform: rotate(-22.5deg); -o-transform: rotate(-22.5deg); -ms-transform: rotate(-22.5deg); -webkit-transform: rotate(-22.5deg); transform: rotate(-22.5deg); } .month-text .char21 { -moz-transform: rotate(-16.875deg); -o-transform: rotate(-16.875deg); -ms-transform: rotate(-16.875deg); -webkit-transform: rotate(-16.875deg); transform: rotate(-16.875deg); } .month-text .char22 { -moz-transform: rotate(-11.25deg); -o-transform: rotate(-11.25deg); -ms-transform: rotate(-11.25deg); -webkit-transform: rotate(-11.25deg); transform: rotate(-11.25deg); } .month-text .char23 { -moz-transform: rotate(-5.625deg); -o-transform: rotate(-5.625deg); -ms-transform: rotate(-5.625deg); -webkit-transform: rotate(-5.625deg); transform: rotate(-5.625deg); } .month-text .char24 { -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); } .month-text .char25 { -moz-transform: rotate(5.625deg); -o-transform: rotate(5.625deg); -ms-transform: rotate(5.625deg); -webkit-transform: rotate(5.625deg); transform: rotate(5.625deg); } .month-text .char26 { -moz-transform: rotate(11.25deg); -o-transform: rotate(11.25deg); -ms-transform: rotate(11.25deg); -webkit-transform: rotate(11.25deg); transform: rotate(11.25deg); } .month-text .char27 { -moz-transform: rotate(16.875deg); -o-transform: rotate(16.875deg); -ms-transform: rotate(16.875deg); -webkit-transform: rotate(16.875deg); transform: rotate(16.875deg); } .month-text .char28 { -moz-transform: rotate(22.5deg); -o-transform: rotate(22.5deg); -ms-transform: rotate(22.5deg); -webkit-transform: rotate(22.5deg); transform: rotate(22.5deg); } .month-text .char29 { -moz-transform: rotate(28.125deg); -o-transform: rotate(28.125deg); -ms-transform: rotate(28.125deg); -webkit-transform: rotate(28.125deg); transform: rotate(28.125deg); } .month-text .char30 { -moz-transform: rotate(33.75deg); -o-transform: rotate(33.75deg); -ms-transform: rotate(33.75deg); -webkit-transform: rotate(33.75deg); transform: rotate(33.75deg); } .month-text .char31 { -moz-transform: rotate(39.375deg); -o-transform: rotate(39.375deg); -ms-transform: rotate(39.375deg); -webkit-transform: rotate(39.375deg); transform: rotate(39.375deg); } .month-text .char32 { -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); } .month-text .char33 { -moz-transform: rotate(50.625deg); -o-transform: rotate(50.625deg); -ms-transform: rotate(50.625deg); -webkit-transform: rotate(50.625deg); transform: rotate(50.625deg); } .month-text .char34 { -moz-transform: rotate(56.25deg); -o-transform: rotate(56.25deg); -ms-transform: rotate(56.25deg); -webkit-transform: rotate(56.25deg); transform: rotate(56.25deg); } .month-text .char35 { -moz-transform: rotate(61.875deg); -o-transform: rotate(61.875deg); -ms-transform: rotate(61.875deg); -webkit-transform: rotate(61.875deg); transform: rotate(61.875deg); } .month-text .char36 { -moz-transform: rotate(67.5deg); -o-transform: rotate(67.5deg); -ms-transform: rotate(67.5deg); -webkit-transform: rotate(67.5deg); transform: rotate(67.5deg); } .month-text .char37 { -moz-transform: rotate(73.125deg); -o-transform: rotate(73.125deg); -ms-transform: rotate(73.125deg); -webkit-transform: rotate(73.125deg); transform: rotate(73.125deg); } .month-text .char38 { -moz-transform: rotate(78.75deg); -o-transform: rotate(78.75deg); -ms-transform: rotate(78.75deg); -webkit-transform: rotate(78.75deg); transform: rotate(78.75deg); } .month-text .char39 { -moz-transform: rotate(84.375deg); -o-transform: rotate(84.375deg); -ms-transform: rotate(84.375deg); -webkit-transform: rotate(84.375deg); transform: rotate(84.375deg); } .month-text .char40 { -moz-transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); } .month-text .char41 { -moz-transform: rotate(95.625deg); -o-transform: rotate(95.625deg); -ms-transform: rotate(95.625deg); -webkit-transform: rotate(95.625deg); transform: rotate(95.625deg); } .month-text .char42 { -moz-transform: rotate(101.25deg); -o-transform: rotate(101.25deg); -ms-transform: rotate(101.25deg); -webkit-transform: rotate(101.25deg); transform: rotate(101.25deg); } .month-text .char43 { -moz-transform: rotate(106.875deg); -o-transform: rotate(106.875deg); -ms-transform: rotate(106.875deg); -webkit-transform: rotate(106.875deg); transform: rotate(106.875deg); } .month-text .char44 { -moz-transform: rotate(112.5deg); -o-transform: rotate(112.5deg); -ms-transform: rotate(112.5deg); -webkit-transform: rotate(112.5deg); transform: rotate(112.5deg); } .month-text .char45 { -moz-transform: rotate(118.125deg); -o-transform: rotate(118.125deg); -ms-transform: rotate(118.125deg); -webkit-transform: rotate(118.125deg); transform: rotate(118.125deg); } .month-text .char46 { -moz-transform: rotate(123.75deg); -o-transform: rotate(123.75deg); -ms-transform: rotate(123.75deg); -webkit-transform: rotate(123.75deg); transform: rotate(123.75deg); } .month-text .char47 { -moz-transform: rotate(129.375deg); -o-transform: rotate(129.375deg); -ms-transform: rotate(129.375deg); -webkit-transform: rotate(129.375deg); transform: rotate(129.375deg); } .month-text .char48 { -moz-transform: rotate(135deg); -o-transform: rotate(135deg); -ms-transform: rotate(135deg); -webkit-transform: rotate(135deg); transform: rotate(135deg); } .day-dial { width: 450px; height: 450px; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } .day-preview span { position: absolute; top: calc(-25% + 45px); left: calc(50% - 12.5px); height: 450px; width: 25px; } .day-preview { opacity: 0; filter: alpha(opacity=0); } .day-preview .char1 { -moz-transform: rotate(-22.5deg); -o-transform: rotate(-22.5deg); -ms-transform: rotate(-22.5deg); -webkit-transform: rotate(-22.5deg); transform: rotate(-22.5deg); } .day-preview .char2 { -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); } .day-preview .char3 { -moz-transform: rotate(22.5deg); -o-transform: rotate(22.5deg); -ms-transform: rotate(22.5deg); -webkit-transform: rotate(22.5deg); transform: rotate(22.5deg); } .day-preview .char4 { -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); } .day-text span { position: absolute; top: calc(-25% + 55px); left: calc(50% - 6px); height: 432px; width: 12px; } .day-text { opacity: 0; filter: alpha(opacity=0); } .day-text .char1 { -moz-transform: rotate(-132.0967741935deg); -o-transform: rotate(-132.0967741935deg); -ms-transform: rotate(-132.0967741935deg); -webkit-transform: rotate(-132.0967741935deg); transform: rotate(-132.0967741935deg); } .day-text .char2 { -moz-transform: rotate(-129.1935483871deg); -o-transform: rotate(-129.1935483871deg); -ms-transform: rotate(-129.1935483871deg); -webkit-transform: rotate(-129.1935483871deg); transform: rotate(-129.1935483871deg); } .day-text .char3 { -moz-transform: rotate(-126.2903225806deg); -o-transform: rotate(-126.2903225806deg); -ms-transform: rotate(-126.2903225806deg); -webkit-transform: rotate(-126.2903225806deg); transform: rotate(-126.2903225806deg); } .day-text .char4 { -moz-transform: rotate(-123.3870967742deg); -o-transform: rotate(-123.3870967742deg); -ms-transform: rotate(-123.3870967742deg); -webkit-transform: rotate(-123.3870967742deg); transform: rotate(-123.3870967742deg); } .day-text .char5 { -moz-transform: rotate(-120.4838709677deg); -o-transform: rotate(-120.4838709677deg); -ms-transform: rotate(-120.4838709677deg); -webkit-transform: rotate(-120.4838709677deg); transform: rotate(-120.4838709677deg); } .day-text .char6 { -moz-transform: rotate(-117.5806451613deg); -o-transform: rotate(-117.5806451613deg); -ms-transform: rotate(-117.5806451613deg); -webkit-transform: rotate(-117.5806451613deg); transform: rotate(-117.5806451613deg); } .day-text .char7 { -moz-transform: rotate(-114.6774193548deg); -o-transform: rotate(-114.6774193548deg); -ms-transform: rotate(-114.6774193548deg); -webkit-transform: rotate(-114.6774193548deg); transform: rotate(-114.6774193548deg); } .day-text .char8 { -moz-transform: rotate(-111.7741935484deg); -o-transform: rotate(-111.7741935484deg); -ms-transform: rotate(-111.7741935484deg); -webkit-transform: rotate(-111.7741935484deg); transform: rotate(-111.7741935484deg); } .day-text .char9 { -moz-transform: rotate(-108.8709677419deg); -o-transform: rotate(-108.8709677419deg); -ms-transform: rotate(-108.8709677419deg); -webkit-transform: rotate(-108.8709677419deg); transform: rotate(-108.8709677419deg); } .day-text .char10 { -moz-transform: rotate(-105.9677419355deg); -o-transform: rotate(-105.9677419355deg); -ms-transform: rotate(-105.9677419355deg); -webkit-transform: rotate(-105.9677419355deg); transform: rotate(-105.96774.........完整代码请登录后点击上方下载按钮下载查看
网友评论0