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;
.........完整代码请登录后点击上方下载按钮下载查看
网友评论0