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

代码语言:html

所属分类:布局界面

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

代码标签: 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 2e.........完整代码请登录后点击上方下载按钮下载查看

网友评论0