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