一个div实现松下功放收音机效果

代码语言:html

所属分类:布局界面

代码描述:一个div实现松下功放收音机效果

代码标签: 松下 功放 收音机 效果

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  
  
  
  
<style>
* {
  box-sizing: border-box;
}

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  align-items: center;
  justify-content: center;
  background-color: rgb(245, 235, 235);
}

div {
  height: 50px;
  width: 80px;
  line-height: 12.5rem;
  font-size: 0.7rem;
  text-align: center;
  text-shadow: 1px 1px 2px black;
  color: #f8f6ea;
  position: relative;
  background-color: rgb(32, 32, 32);
  box-shadow: inset 5px 10px #6e6d65, inset -5px -20px #777774,
    0px 0px 0px 3px grey, 0px 20px 3px 2px #dad8cb,
    100px -80px 33px 0px #dad8cbe0, 0px 2px 1px 5px black,
    0px 20px 1px 5px black, 0px 8px 0px 25px #dad8cb, 0px 10px 3px 30px #1d1d1c,
    0px -20px 0 25px grey, 0px -25px 0px 25px rgb(49, 49, 49),
    0px 40px 0 25px grey, 0px 40px 3px 30px #1d1d1c, 0px -20px 3px 30px #1d1d1c,
    115px 25px 0px 65px #585149, 0px 25px 0px 65px #585149,
    -115px 25px 0px 65px#585149, 105px 35px 25px 70px #242220,
    -105px 35px 25px 70px #242220, 115px 18px 3px 65px #999996,
    -115px 18px 3px 65px#999996, 115px 15px 0px 65px #353535,
    -115px 15px 0px 65px #353535, -115px -10px 0px 45px #505050,
    0px -10px 0px 45px #505050, 115px -10px 0px 45px #505050,
    -115px -14px 0px 45px #aaaaaa, 0px -14px 0px 45px #aaaaaa,
    115px -14px 0px 45px #b1b1b1, -115px -16px 0px 45px #838181,
    0px -16px 0px 45px #838181, 115px -16px 0px 45px #838181,
    -115px -19px 0px 45px #aaaaaa, 0px -19px 0px 45px #b8b8b8,
    115px -19px 0px 45px #b1b1b1, -115px -22px 0px 45px #838181,
    0px -22px 0px 45px #838181, 115px -22px 0px 45px #838181,
    -115px -25px 0px 45px #aaaaaa, 0px -25px 0px 45px #b8b8b8,
    115px -25px 0px 45px #b1b1b1, -115px -28px 0px 45px #838181,
    0px -28px 0px 45px #838181, 115px -28px 0px 45px #838181,
    -115px -14px 10px 55px #d4d4c473, 0px -14px 5px 55px #d4d4c473,
    115px -14px 10px 55px #afaf9f8c, 0px -20px 0px 55px #a1a167,
    -115px -20px 0px 55px #a1a167, 115px -20px 0px 55px #a1a167,
    115px -18px 5px 65px #dad8cb, 0 20px rgb(202, 193, 193),
    -115px -18px 5px 65px #b4b4b3, 0px -18px 5px 65px #dad8cb,
    0 20px rgb(202, 193, 193), -115px.........完整代码请登录后点击上方下载按钮下载查看

网友评论0