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
















网友评论0