纯css实现apple watch苹果手表效果-html代码-BFW代码库

纯css实现apple watch苹果手表效果

代码语言：html

代码描述：纯css实现apple watch苹果手表效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>

html{
    background: linear-gradient(-50deg, #97c794, #12656c);
  background-size: cover;
  height: 100%;
}
.wrapper{
  font-size:11px;
  margin:2em auto;
  width:30em;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateY(-50%) translateX(-50%);
          transform: translateY(-50%) translateX(-50%);
}
.watch{
  position:relative;
  margin:0 auto;
  width:22.8em;
  padding:7.3em 0
}
.case{
  position:relative;
  z-index:2;
  background:#030303;
  width:21.2em;
  height:24.7em;
  border-radius:4em;
  box-shadow: inset 0 0 0 0.1em #bdbdbd, inset 0 0 0.2em 0.2em #bebebe, inset 0 0.3em 0.3em 0.4em #070707, inset 0 -0.3em 0.1em 0.1em #070707, inset 0 0 0 0.9em #fff,inset 0 0 0 1.05em #313131, inset 3.5em -0.5em 2em -2em #a4a4a4, inset -1.2em -0em 0.5em 0em #a4a4a4, inset -0.4em -1.1em 0.5em 0em #a4a4a4;
}
.case:before{
  content:'';
  position:absolute;
  top:0.3em;
  left:2.5em;
  right:2.5em;
  height:8%;
  background:-webkit-gradient(linear, left top, left bottom, color-stop(1%, rgba(255,255,255,0.5)),color-stop(41%, rgba(255,255,255,0.5)),to(rgba(255,255,255,0.2)));
  background:linear-gradient(to bottom, rgba(255,255,255,0.5) 1%,rgba(255,255,255,0.5) 41%,rgba(255,255,255,0.2) 100%);
  border-radius:10em 10em 11em 11em / 4em 4em 4em 4em;
}
.crown{
position: absolute;
background: .........完整代码请登录后点击上方下载按钮下载查看