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

代码语言：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: #f6f6f6;
width: 1.5em;
height: 4.2em;
top: 5.3em;
right: -0.9em;
box-shadow: -0.26em 0 0 -0.1em #060606,inset -0.1em 0 0.1em 0 #747474,inset 0 -0.1em 0 #fefefe,inset 0 0.1em 0 #fefefe,inset 0em 0.2em 0.1em 0em #eeeeee,inset 0.1em 1.1em 0.6em -0.3em #040404,inset 0.1em -1.1em 0.6em -0.3em #040404;
border-radius: 0.8em 0.6em 0.6em 0.8em / 1em 0.6em 0.6em 1em;
  overflow:hidden;
}
.crown:before {
content: '';
position: absolute;
top: 0.1em;
right: 0;
height: 0.1em;
width: 0.5em;
background: rgba(0,0,0,0.2);  
box-shadow: 
 0 0.1em 0 rgba(255, 255, 255, 0.2), 
0 0.3em 0 rgba(0, 0, 0, 0.2), 
0 0.4em 0 rgba(255, 255, 255, 0.2), 
0 0.6em 0 rgba(0, 0, 0, 0.2), 
0 0.7em 0 rgba(255, 255, 255, 0.2), 
0 0.9em 0 rgba(0, 0, 0, 0.2), 
0 1em 0 rgba(255, 255, 255, 0.2), 
0 1.2em 0 rgba(0, 0, 0, 0.2), 
0 1.3em 0 rgba(255, 255, 255, 0.2), 
0 1.5em 0 rgba(0, 0, 0, 0.2), 
0 1.6em 0 rgba(255, 255, 255, 0.2), 
0 1.8em 0 rgba(0, 0, 0, 0.2), 
0 1.9em 0 rgba(255, 255, 255, 0.2), 
0 2.1em 0 rgba(0, 0, 0, 0.2), 
0 2.2em 0 rgba(255, 255, 255, 0.2), 
0 2.4em 0 rgba(0, 0, 0, 0.2), 
0 2.5em 0 rgba(255, 255, 255, 0.2), 
0 2.7em 0 rgba(0, 0, 0, 0.2), 
0 2.8em 0 rgba(255, 255, 255, 0.2), 
0 3em 0 rgba(0, 0, 0, 0.2), 
0 3.1em 0 rgba(255, 255, 255, 0.2), 
0 3.3em 0 rgba(0, 0, 0, 0.2), 
0 3.4em 0 rgba(255, 255, 255, 0.2), 
0 3.6em 0 rgba(0, 0, 0, 0.2), 
0 3.7em 0 rgba(255, 255, 255, 0.2), 
0 3.9em 0 rgba(0, 0, 0, 0.2), 
0 4em 0 rgba(255, 255, 255, 0.2), 
0 4.2em 0 rgba(0, 0, 0, 0.2), 
0 4.3em 0 rgba(255, 255, 255, 0.2), 
0 4.5em 0 rgba(0, 0, 0, 0.2), 
0 4.6em 0 rgba(255, 255, 255, 0.2), 
0 4.8em 0 rgba(0, 0, 0, 0.2), 
0 4.9em 0 rgba(255, 255, 255, 0.2), 
0 5.1em 0 rgba(0, 0, 0, 0.2), 
0 5.2em 0 rgba(255, 255, 255, 0.2)  
}
.power{
  position:absolute;
  right:-0.3em;
  top:13em;
  height:6.5em;
  width:0.5em;
  background:#e4e4e4;
border-radius: 0.3em 0.1em 0.1em 0.3em / 0.9em 0.1em 0.1em 0.9em;
  box-shadow: inset 0.1em 0.05em 0 #AFAFAF,inset -0.2em 0.5em 0.2em -0.2em #FFF,inset -0.25em 0.8em 0.2em -0.2em #000,inset 0.1em -0.6em 0.2em -0.2em #000;
}
.strap{
  position:absolute;
  z-index:1;
  left:2.5em;
  width:16.2em;
  height:7.6em;
}
.strap.strap-top{
  top:0;
}
.strap.strap-bottom{
  bottom:0;
-webkit-transform: rotate(180deg);
        transform: rotate(180deg);
}
.strap:before {
content: '';
position: absolute;
left: -3.2em;
bottom: -0.3em;
height: 3.7em;
width: 3.7em;
border-radius: 50%;
box-shadow: 2.2em 2.2em 0 -0.5em #B8B8B8;
}
.strap:after {
content: '';
position: absolute;
right: -3.2em;
bottom: -0.3em;
height: 3.7em;
width: 3.7em;
border-radius: 50%;
box-shadow: -2.2em 2.2em 0 -0.5em #A0A0A0;
}
.mesh{
  position:absolute;
  box-shadow: inset 0 0.1em 0 #FFF, 0 -0.7em 0 -0.6em rgba(0, 0, 0, 0.6), 0 -0.75em 0 -0.6em rgba(255, 255, 255, 0.5);
}
.mesh:nth-child(1){
  z-index:5;
  bottom:-0.5em;
  left:0;
  width:100%;
  height:2.5em;
  background:-webkit-gradient(.........完整代码请登录后点击上方下载按钮下载查看