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,168,0.8) inset; transform:translateZ(5px); } div.inner-black-3{ width:230px; height:230px; margin-top:5px; margin-left:5px; background-color:#252525; border-radius:50%; border:1px solid #1c1c1c; box-sizing:border-box; box-shadow:-2px 3px 1px #5f5f5f inset; } div.glare{ width:220px; height:250px; border-radius:50%; background-color:#fff; margin-left:35px; transform:translateY(-50px); box-shadow:0 0 50px 37px #fff; } button.engine{ -webkit-tap-highlight-color: transparent; background:#666; border-radius:50%; width:225px; height:225px; margin-left:2.5px; margin-top:2.5px; border:0; transition:all 0.1s; cursor:pointer; box-shadow:0 0 10px 3px #000 inset, 0 -50px 100px rgba(0,0,0,0.8) inset, 0 30px 60px rgba(0,0,0,0.8) inset; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0