apple watch手表效果
代码语言:html
所属分类:动画
代码描述:apple watch手表效果
代码标签: 效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> html, body { height: 100vh; width: 100vw; } body { display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; background: #141515; color: #ffffff; font-family: "San Francisco Display", "Helvetica Neue", Helvetica, Arial, sans-serif; text-rendering: geometricPrecision; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .clock { height: 0; width: 0; display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; position: relative; } .clock:after { content: ""; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background: #141515; box-shadow: 0 0 0 2vh #ffffff; border-radius: 99em; position: absolute; height: 2vh; width: 2vh; min-height: 0.25rem; min-width: 0.25rem; } .w-num .num { position: absolute; font-size: 8.5vh; font-weight: 200; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .w-num .num:nth-child(0) { top: -30vh; left: 0vh; } .w-num .num:nth-child(1) { top: -25.98076vh; left: 15vh; } .w-num .num:nth-child(2) { top: -15vh; left: 25.98076vh; } .w-num .num:nth-child(3) { top: 0vh; left: 30vh; } .w-num .num:nth-child(4) { top: 15vh; left: 25.98076vh; } .w-num .num:nth-child(5) { top: 25.98076vh; left: 15vh; } .w-num .num:nth-child(6) { top: 30vh; left: 0vh; } .w-num .num:nth-child(7) { top: 25.98076vh; left: -15vh; } .w-num .num:nth-child(8) { top: 15vh; left: -25.98076vh; } .w-num .num:nth-child(9) { top: 0vh; left: -30vh; } .w-num .num:nth-child(10) { top: -15vh; left: -25.98076vh; } .w-num .num:nth-child(11) { top: -25.98076vh; left: -15vh; } .w-num .num:nth-child(12) { top: -30vh; left: 0vh; } .w-num-g .num-g { position: absolute; font-size: 5vh; font-weight: 600; color: rgba(255, 255, 255, 0.7); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .w-num-g .num-g:nth-child(0) { top: -47vh; left: 0vh; } .w-num-g .num-g:nth-child(1) { top: -40.70319vh; left: 23.5vh; } .w-num-g .num-g:nth-child(2) { top: -23.5vh; left: 40.70319vh; } .w-num-g .num-g:nth-child(3) { top: 0vh; left: 47vh; } .w-num-g .num-g:nth-child(4) { top: 23.5vh; left: 40.70319vh; } .w-num-g .num-g:nth-child(5) { top: 40.70319vh; left: 23.5vh; } .w-num-g .num-g:nth-child(6) { top: 47vh; left: 0vh; } .w-num-g .num-g:nth-child(7) { top: 40.70319vh; left: -23.5vh; } .w-num-g .num-g:nth-child(8) { top: 23.5vh; left: -40.70319vh; } .w-num-g .num-g:nth-child(9) { top: 0vh; left: -47vh; } .w-num-g .num-g:nth-child(10) { top: -23.5vh; left: -40.70319vh; } .w-num-g .num-g:nth-child(11) { top: -40.70319vh; left: -23.5vh; } .w-num-g .num-g:nth-child(12) { top: -47vh; left: 0vh; } .grd { position: relative; } .grd .w-ms { top: 0; left: 0; width: 0; height: 0; position: absolute; } .all .grd .w-ms [class*="ms-"]:before { height: 2.14286vh; width: 0.5vh; max-width: 0.1875rem; min-width: 0.0625rem; background: rgba(255, 255, 255, 0.25); border-radius: 99em; position: absolute; bottom: 0; content: ""; } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { background: rgba(255, 255, 255, 0.4); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-1 { -webkit-transform: rotateZ(1.5deg) translateY(42vh); transform: rotateZ(1.5deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-2 { -webkit-transform: rotateZ(3deg) translateY(42vh); transform: rotateZ(3deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-3 { -webkit-transform: rotateZ(4.5deg) translateY(42vh); transform: rotateZ(4.5deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-4 { -webkit-transform: rotateZ(6deg) translateY(42vh); transform: rotateZ(6deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-5 { -webkit-transform: rotateZ(7.5deg) translateY(42vh); transform: rotateZ(7.5deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-6 { -webkit-transform: rotateZ(9deg) translateY(42vh); transform: rotateZ(9deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-7 { -webkit-transform: rotateZ(10.5deg) translateY(42vh); transform: rotateZ(10.5deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-8 { -webkit-transform: rotateZ(12deg) translateY(42vh); transform: rotateZ(12deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-9 { -webkit-transform: rotateZ(13.5deg) translateY(42vh); transform: rotateZ(13.5deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-10 { -webkit-transform: rotateZ(15deg) translateY(42vh); transform: rotateZ(15deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-11 { -webkit-transform: rotateZ(16.5deg) translateY(42vh); transform: rotateZ(16.5deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-12 { -webkit-transform: rotateZ(18deg) translateY(42vh); transform: rotateZ(18deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-13 { -webkit-transform: rotateZ(19.5deg) translateY(42vh); transform: rotateZ(19.5deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-14 { -webkit-transform: rotateZ(21deg) translateY(42vh); transform: rotateZ(21deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-15 { -webkit-transform: rotateZ(22.5deg) translateY(42vh); transform: rotateZ(22.5deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-16 { -webkit-transform: rotateZ(24deg) translateY(42vh); transform: rotateZ(24deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-17 { -webkit-transform: rotateZ(25.5deg) translateY(42vh); transform: rotateZ(25.5deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-18 { -webkit-transform: rotateZ(27deg) translateY(42vh); transform: rotateZ(27deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-19 { -webkit-transform: rotateZ(28.5deg) translateY(42vh); transform: rotateZ(28.5deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-20 { -webkit-transform: rotateZ(30deg) translateY(42vh); transform: rotateZ(30deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-21 { -webkit-transform: rotateZ(31.5deg) translateY(42vh); transform: rotateZ(31.5deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-22 { -webkit-transform: rotateZ(33deg) translateY(42vh); transform: rotateZ(33deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-23 { -webkit-transform: rotateZ(34.5deg) translateY(42vh); transform: rotateZ(34.5deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-24 { -webkit-transform: rotateZ(36deg) translateY(42vh); transform: rotateZ(36deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-25 { -webkit-transform: rotateZ(37.5deg) translateY(42vh); transform: rotateZ(37.5deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-26 { -webkit-transform: rotateZ(39deg) translateY(42vh); transform: rotateZ(39deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-27 { -webkit-transform: rotateZ(40.5deg) translateY(42vh); transform: rotateZ(40.5deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-28 { -webkit-transform: rotateZ(42deg) translateY(42vh); transform: rotateZ(42deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-29 { -webkit-transform: rotateZ(43.5deg) translateY(42vh); transform: rotateZ(43.5deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-30 { -webkit-transform: rotateZ(45deg) translateY(42vh); transform: rotateZ(45deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-31 { -webkit-transform: rotateZ(46.5deg) translateY(42vh); transform: rotateZ(46.5deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-32 { -webkit-transform: rotateZ(48deg) translateY(42vh); transform: rotateZ(48deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-33 { -webkit-transform: rotateZ(49.5deg) translateY(42vh); transform: rotateZ(49.5deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-34 { -webkit-transform: rotateZ(51deg) translateY(42vh); transform: rotateZ(51deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-35 { -webkit-transform: rotateZ(52.5deg) translateY(42vh); transform: rotateZ(52.5deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-36 { -webkit-transform: rotateZ(54deg) translateY(42vh); transform: rotateZ(54deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-37 { -webkit-transform: rotateZ(55.5deg) translateY(42vh); transform: rotateZ(55.5deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-38 { -webkit-transform: rotateZ(57deg) translateY(42vh); transform: rotateZ(57deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-39 { -webkit-transform: rotateZ(58.5deg) translateY(42vh); transform: rotateZ(58.5deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-40 { -webkit-transform: rotateZ(60deg) translateY(42vh); transform: rotateZ(60deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-41 { -webkit-transform: rotateZ(61.5deg) translateY(42vh); transform: rotateZ(61.5deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-42 { -webkit-transform: rotateZ(63deg) translateY(42vh); transform: rotateZ(63deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-43 { -webkit-transform: rotateZ(64.5deg) translateY(42vh); transform: rotateZ(64.5deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-44 { -webkit-transform: rotateZ(66deg) translateY(42vh); transform: rotateZ(66deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-45 { -webkit-transform: rotateZ(67.5deg) translateY(42vh); transform: rotateZ(67.5deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-46 { -webkit-transform: rotateZ(69deg) translateY(42vh); transform: rotateZ(69deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-47 { -webkit-transform: rotateZ(70.5deg) translateY(42vh); transform: rotateZ(70.5deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-48 { -webkit-transform: rotateZ(72deg) translateY(42vh); transform: rotateZ(72deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-49 { -webkit-transform: rotateZ(73.5deg) translateY(42vh); transform: rotateZ(73.5deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-50 { -webkit-transform: rotateZ(75deg) translateY(42vh); transform: rotateZ(75deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-51 { -webkit-transform: rotateZ(76.5deg) translateY(42vh); transform: rotateZ(76.5deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-52 { -webkit-transform: rotateZ(78deg) translateY(42vh); transform: rotateZ(78deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-53 { -webkit-transform: rotateZ(79.5deg) translateY(42vh); transform: rotateZ(79.5deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-54 { -webkit-transform: rotateZ(81deg) translateY(42vh); transform: rotateZ(81deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-55 { -webkit-transform: rotateZ(82.5deg) translateY(42vh); transform: rotateZ(82.5deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-56 { -webkit-transform: rotateZ(84deg) translateY(42vh); transform: rotateZ(84deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-57 { -webkit-transform: rotateZ(85.5deg) translateY(42vh); transform: rotateZ(85.5deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-58 { -webkit-transform: rotateZ(87deg) translateY(42vh); transform: rotateZ(87deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-59 { -webkit-transform: rotateZ(88.5deg) translateY(42vh); transform: rotateZ(88.5deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-60 { -webkit-transform: rotateZ(90deg) translateY(42vh); transform: rotateZ(90deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-61 { -webkit-transform: rotateZ(91.5deg) translateY(42vh); transform: rotateZ(91.5deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-62 { -webkit-transform: rotateZ(93deg) translateY(42vh); transform: rotateZ(93deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-63 { -webkit-transform: rotateZ(94.5deg) translateY(42vh); transform: rotateZ(94.5deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-64 { -webkit-transform: rotateZ(96deg) translateY(42vh); transform: rotateZ(96deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-65 { -webkit-transform: rotateZ(97.5deg) translateY(42vh); transform: rotateZ(97.5deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-66 { -webkit-transform: rotateZ(99deg) translateY(42vh); transform: rotateZ(99deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-67 { -webkit-transform: rotateZ(100.5deg) translateY(42vh); transform: rotateZ(100.5deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-68 { -webkit-transform: rotateZ(102deg) translateY(42vh); transform: rotateZ(102deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-69 { -webkit-transform: rotateZ(103.5deg) translateY(42vh); transform: rotateZ(103.5deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-70 { -webkit-transform: rotateZ(105deg) translateY(42vh); transform: rotateZ(105deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-71 { -webkit-transform: rotateZ(106.5deg) translateY(42vh); transform: rotateZ(106.5deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-72 { -webkit-transform: rotateZ(108deg) translateY(42vh); transform: rotateZ(108deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-73 { -webkit-transform: rotateZ(109.5deg) translateY(42vh); transform: rotateZ(109.5deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-74 { -webkit-transform: rotateZ(111deg) translateY(42vh); transform: rotateZ(111deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-75 { -webkit-transform: rotateZ(112.5deg) translateY(42vh); transform: rotateZ(112.5deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-76 { -webkit-transform: rotateZ(114deg) translateY(42vh); transform: rotateZ(114deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-77 { -webkit-transform: rotateZ(115.5deg) translateY(42vh); transform: rotateZ(115.5deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-78 { -webkit-transform: rotateZ(117deg) translateY(42vh); transform: rotateZ(117deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-79 { -webkit-transform: rotateZ(118.5deg) translateY(42vh); transform: rotateZ(118.5deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-80 { -webkit-transform: rotateZ(120deg) translateY(42vh); transform: rotateZ(120deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-81 { -webkit-transform: rotateZ(121.5deg) translateY(42vh); transform: rotateZ(121.5deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-82 { -webkit-transform: rotateZ(123deg) translateY(42vh); transform: rotateZ(123deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-83 { -webkit-transform: rotateZ(124.5deg) translateY(42vh); transform: rotateZ(124.5deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-84 { -webkit-transform: rotateZ(126deg) translateY(42vh); transform: rotateZ(126deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-85 { -webkit-transform: rotateZ(127.5deg) translateY(42vh); transform: rotateZ(127.5deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-86 { -webkit-transform: rotateZ(129deg) translateY(42vh); transform: rotateZ(129deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-87 { -webkit-transform: rotateZ(130.5deg) translateY(42vh); transform: rotateZ(130.5deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-88 { -webkit-transform: rotateZ(132deg) translateY(42vh); transform: rotateZ(132deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-89 { -webkit-transform: rotateZ(133.5deg) translateY(42vh); transform: rotateZ(133.5deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-90 { -webkit-transform: rotateZ(135deg) translateY(42vh); transform: rotateZ(135deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-91 { -webkit-transform: rotateZ(136.5deg) translateY(42vh); transform: rotateZ(136.5deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-92 { -webkit-transform: rotateZ(138deg) translateY(42vh); transform: rotateZ(138deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-93 { -webkit-transform: rotateZ(139.5deg) translateY(42vh); transform: rotateZ(139.5deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-94 { -webkit-transform: rotateZ(141deg) translateY(42vh); transform: rotateZ(141deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-95 { -webkit-transform: rotateZ(142.5deg) translateY(42vh); transform: rotateZ(142.5deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-96 { -webkit-transform: rotateZ(144deg) translateY(42vh); transform: rotateZ(144deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-97 { -webkit-transform: rotateZ(145.5deg) translateY(42vh); transform: rotateZ(145.5deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-98 { -webkit-transform: rotateZ(147deg) translateY(42vh); transform: rotateZ(147deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-99 { -webkit-transform: rotateZ(148.5deg) translateY(42vh); transform: rotateZ(148.5deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-100 { -webkit-transform: rotateZ(150deg) translateY(42vh); transform: rotateZ(150deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-101 { -webkit-transform: rotateZ(151.5deg) translateY(42vh); transform: rotateZ(151.5deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-102 { -webkit-transform: rotateZ(153deg) translateY(42vh); transform: rotateZ(153deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-103 { -webkit-transform: rotateZ(154.5deg) translateY(42vh); transform: rotateZ(154.5deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-104 { -webkit-transform: rotateZ(156deg) translateY(42vh); transform: rotateZ(156deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-105 { -webkit-transform: rotateZ(157.5deg) translateY(42vh); transform: rotateZ(157.5deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-106 { -webkit-transform: rotateZ(159deg) translateY(42vh); transform: rotateZ(159deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-107 { -webkit-transform: rotateZ(160.5deg) translateY(42vh); transform: rotateZ(160.5deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-108 { -webkit-transform: rotateZ(162deg) translateY(42vh); transform: rotateZ(162deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-109 { -webkit-transform: rotateZ(163.5deg) translateY(42vh); transform: rotateZ(163.5deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-110 { -webkit-transform: rotateZ(165deg) translateY(42vh); transform: rotateZ(165deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-111 { -webkit-transform: rotateZ(166.5deg) translateY(42vh); transform: rotateZ(166.5deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-112 { -webkit-transform: rotateZ(168deg) translateY(42vh); transform: rotateZ(168deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-113 { -webkit-transform: rotateZ(169.5deg) translateY(42vh); transform: rotateZ(169.5deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-114 { -webkit-transform: rotateZ(171deg) translateY(42vh); transform: rotateZ(171deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-115 { -webkit-transform: rotateZ(172.5deg) translateY(42vh); transform: rotateZ(172.5deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-116 { -webkit-transform: rotateZ(174deg) translateY(42vh); transform: rotateZ(174deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-117 { -webkit-transform: rotateZ(175.5deg) translateY(42vh); transform: rotateZ(175.5deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-118 { -webkit-transform: rotateZ(177deg) translateY(42vh); transform: rotateZ(177deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-119 { -webkit-transform: rotateZ(178.5deg) translateY(42vh); transform: rotateZ(178.5deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-120 { -webkit-transform: rotateZ(180deg) translateY(42vh); transform: rotateZ(180deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-121 { -webkit-transform: rotateZ(181.5deg) translateY(42vh); transform: rotateZ(181.5deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-122 { -webkit-transform: rotateZ(183deg) translateY(42vh); transform: rotateZ(183deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-123 { -webkit-transform: rotateZ(184.5deg) translateY(42vh); transform: rotateZ(184.5deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-124 { -webkit-transform: rotateZ(186deg) translateY(42vh); transform: rotateZ(186deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-125 { -webkit-transform: rotateZ(187.5deg) translateY(42vh); transform: rotateZ(187.5deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-126 { -webkit-transform: rotateZ(189deg) translateY(42vh); transform: rotateZ(189deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-127 { -webkit-transform: rotateZ(190.5deg) translateY(42vh); transform: rotateZ(190.5deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-128 { -webkit-transform: rotateZ(192deg) translateY(42vh); transform: rotateZ(192deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-129 { -webkit-transform: rotateZ(193.5deg) translateY(42vh); transform: rotateZ(193.5deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-130 { -webkit-transform: rotateZ(195deg) translateY(42vh); transform: rotateZ(195deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-131 { -webkit-transform: rotateZ(196.5deg) translateY(42vh); transform: rotateZ(196.5deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-132 { -webkit-transform: rotateZ(198deg) translateY(42vh); transform: rotateZ(198deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-133 { -webkit-transform: rotateZ(199.5deg) translateY(42vh); transform: rotateZ(199.5deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-134 { -webkit-transform: rotateZ(201deg) translateY(42vh); transform: rotateZ(201deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-135 { -webkit-transform: rotateZ(202.5deg) translateY(42vh); transform: rotateZ(202.5deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-136 { -webkit-transform: rotateZ(204deg) translateY(42vh); transform: rotateZ(204deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-137 { -webkit-transform: rotateZ(205.5deg) translateY(42vh); transform: rotateZ(205.5deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-138 { -webkit-transform: rotateZ(207deg) translateY(42vh); transform: rotateZ(207deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-139 { -webkit-transform: rotateZ(208.5deg) translateY(42vh); transform: rotateZ(208.5deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-140 { -webkit-transform: rotateZ(210deg) translateY(42vh); transform: rotateZ(210deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-141 { -webkit-transform: rotateZ(211.5deg) translateY(42vh); transform: rotateZ(211.5deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-142 { -webkit-transform: rotateZ(213deg) translateY(42vh); transform: rotateZ(213deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-143 { -webkit-transform: rotateZ(214.5deg) translateY(42vh); transform: rotateZ(214.5deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-144 { -webkit-transform: rotateZ(216deg) translateY(42vh); transform: rotateZ(216deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-145 { -webkit-transform: rotateZ(217.5deg) translateY(42vh); transform: rotateZ(217.5deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-146 { -webkit-transform: rotateZ(219deg) translateY(42vh); transform: rotateZ(219deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-147 { -webkit-transform: rotateZ(220.5deg) translateY(42vh); transform: rotateZ(220.5deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-148 { -webkit-transform: rotateZ(222deg) translateY(42vh); transform: rotateZ(222deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-149 { -webkit-transform: rotateZ(223.5deg) translateY(42vh); transform: rotateZ(223.5deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-150 { -webkit-transform: rotateZ(225deg) translateY(42vh); transform: rotateZ(225deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-151 { -webkit-transform: rotateZ(226.5deg) translateY(42vh); transform: rotateZ(226.5deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-152 { -webkit-transform: rotateZ(228deg) translateY(42vh); transform: rotateZ(228deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-153 { -webkit-transform: rotateZ(229.5deg) translateY(42vh); transform: rotateZ(229.5deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-154 { -webkit-transform: rotateZ(231deg) translateY(42vh); transform: rotateZ(231deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-155 { -webkit-transform: rotateZ(232.5deg) translateY(42vh); transform: rotateZ(232.5deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-156 { -webkit-transform: rotateZ(234deg) translateY(42vh); transform: rotateZ(234deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-157 { -webkit-transform: rotateZ(235.5deg) translateY(42vh); transform: rotateZ(235.5deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-158 { -webkit-transform: rotateZ(237deg) translateY(42vh); transform: rotateZ(237deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; } .grd .w-ms .ms-159 { -webkit-transform: rotateZ(238.5deg) translateY(42vh); transform: rotateZ(238.5deg) translateY(42vh); } .all .grd .w-ms:nth-child(4n) [class*="ms-"]:before { height: 3.75vh; } .all .grd .w-ms:nth-child(20n) [class*="ms-"]:before { height: 4.6875vh; background: #ffffff; }.........完整代码请登录后点击上方下载按钮下载查看
网友评论0