div+Css布局实现逼真的立体质感引擎开关效果代码
代码语言:html
所属分类:布局界面
代码描述:div+Css布局实现逼真的立体质感引擎开关效果代码
代码标签: div Css 布局 逼真 立体 质感 引擎 开关
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
body{
perspective:200px;
background-color:#1b1b1b;
perspective-origin:center;
transform-style:preserve-3d;
overflow:hidden;
}
#wrapper{
transform:rotateX(15deg) translateY(-110px);
transform-style:preserve-3d;
text-align: center;
position:relative;
height:99vh;
display:flex;
align-items:center;
align-content:center;
padding-top:100px;
transition: transform 1s;
}
div.outer-black{
background-color:rgba(2,2,2,.85);
margin-top:200px;
border-radius:50%;
width:300px;
height:300px;
margin:0 auto;
box-shadow:1px 2px 1px 0px rgba(160, 160, 160, 0.7), -1px -1px 1px rgba(85,85,85,0.7);
transform-style:preserve-3d;
}
div.outer-iron{
background: linear-gradient(135deg, #4c4c4e 0%,#414141 34%,#6a6a6a 55%,#212121 100%);
width:290px;
height:290px;
margin-left:5px;
margin-top:5px;
border-radius:50%;
box-shadow: 1px 1px 4px rgba(138, 135, 135, 0.68) inset;
overflow:hidden;
position:relative;
transform:translateZ(3px);
transform-style:preserve-3d;
}
div.inner-black{
width:260px;
height:260px;
background-color:#1e1e1e;
position:absolute;
top:15px;
left:15px;
border-radius:50%;
box-shadow:3px 3px 1px 1px #505050 inset, 1px -1px 1px 1px #e6e6e6 inset;
}
div.inner-black-2{
width:240px;
height:240px;
border-radius:50%;
margin-left:10px;
margin-top:10px;
background-color:#101010;
border:1px solid rgba(94,94,94,.7);
box-shadow:-2px -2px 1px rgba(168,168,16.........完整代码请登录后点击上方下载按钮下载查看
网友评论0