div+css布局实现低音吉他效果代码
代码语言:html
所属分类:布局界面
代码描述:div+css布局实现低音吉他效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
:root {
--marfil: #fffcde;
--bridge: linear-gradient(-90deg, #9998, #fff9, #fffc, #ccc8, #8888), repeating-linear-gradient(90deg, #fff4 0.01px, #96a5a580 0.02px, #fff8 0.03px);
--body: #af8459;
--dark: #1c0808;
--pickup: #282828;
--deg: 90deg;
}
body {
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(var(--deg), #1e1e1d, #343434, #1e1e1d);
}
.guitar {
width: 360px;
height: 100vh;
display: flex;
align-items: flex-start;
justify-content: center;
margin-top: -2px;
}
.pickups {
width: 360px;
height: 80vh;
position: absolute;
bottom: 20vh;
display: flex;
align-items: center;
justify-content: center;
}
.pickups div {
position: absolute;
width: 200px;
height: 110px;
border-radius: 5px;
left: 25px;
margin-top: -250px;
filter: drop-shadow(0px 6px 0px #111) drop-shadow(4px -1px 0px #111) drop-shadow(-4px -1px 0px #111);
box-sizing: border-box;
background: var(--pickup);
}
.pickups div + div {
left: inherit;
right: 25px;
margin-top: 20px;
}
.pickups div + div + div {
left: inherit;
right: inherit;
margin-top: 300px;
height: 60px;
width: 300px;
}
.pickups div:before, .pick.........完整代码请登录后点击上方下载按钮下载查看
网友评论0