apple watch手表效果-html代码-BFW代码库

代码语言：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(.........完整代码请登录后点击上方下载按钮下载查看