div+css布局实现低音吉他效果代码-html代码-BFW代码库

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