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