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

代码语言：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, .pickups div:after {
    content: "";
    position: absolute;
    width: 50px;
    height: 50px;
    background: linear-gradient(90deg, var(--pickup) 0 20px, #fff0 0 50%);
    border-radius: 100%;
    left: -20px;
    top: 30px;
    background: var(--pickup);
    z-index: -1;
}

.pickups div:after {
    left: initial;
    right: -20px;
}




.pickups div:nth-child(3):before, .pickups div:nth-child(3):after {
    top: -20px;
    height: 100px;
    width: 60px;
    z-index: -1;
    left: 58px;
}

.pickups div:nth-child(3):after {
    left: 184px;
}


.pickups div span {
    width: 100%;
    height: 100%;
    position: absolute;
    border-radius: 2px;
    background: var(--pickup);
    box-shadow: -2px 0 0 0 #111, 2px 0 0 0 #111;
    z-index: 0;
}


.pickups div:nth-child(3) span {
    box-shadow: 0 2px 0 0 #111, 0 -2px 0 0 #111;
}







.pickups div span:before,
.pickups div span:after {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    background: #e1e1e1;
    border-radius: 100%;
    top: 50px;
    left: -16px;
    content: "+";
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 12px;
    box-shadow: 0 1px 0 1px #000;
    text-shadow: 1px 0 0px #111, 0 1px 0px #222, 0 0 1px #333;
}


.pickups div span:after {
    left: initial;
    right: -16px;
}



.pickups div:nth-child(3) span:before,
.pickups div:nth-child(3) span:after {
    left: 83px;
    top: -16px;
}
.pickups div:nth-child(3) span:after {
    left: 209px;
}

.pickups div:nth-child(3) span + span:before,
.pickups div:nth-child(3) span + span:after {
    top: 65px;
}







/*** BRIDGE ***/


.bridge {
    background: var(--bridge);
    width: 270px;
    height: 170px;
    position: absolute;
    bottom: 6vh;
    border-radius: 5px;
    filter: drop-shadow(0px 6px 0px #101010) drop-shadow(4px -1px 0px #121212) drop-shadow(-4px -1px 0px #121212);
    box-shadow: 0 2px 0 0 #111, 0 -2px 0 0 #111;
    display: flex;
    align-items: flex-start;
    justify-content: space-evenly;
}

.bridge:before, .bridge:after {
    content: "";
    background: #737777;
    width: 25px;
    height: 100%;
    position: absolute;
    border-radius: 60% 0 0 40%;
    left: -19px;
    top: 0px;
    transform: rotate(1deg);
    z-index: 1;
}



.bridge:after {
    border-radius: 0 60% 40% 0;
    right: -20px;
    left: initial;
    background: #817f7f;
}


.bridge div {
    background: radial-gradient(circle at 76% 16%, #111 2px, #333 4px, #fff0 5px 100%), radial-gradient(circle at 24% 16%, #111 2px, #333 4px, #fff0 5px 100%), linear-gradient(180deg, #fff0 9px, #0006 12px 13px, #fff8 13px 14px, #fff0 16px 21px, #000 22px 34px, #fff0 34px 65px, #000 66px 71px, #fff0 0 10%), linear-gradient(180deg, #9998, #fff9, #fffc, #ccc8, #8888), repeating-linear-gradient(-90deg, #fff4 0.01px, #96a5a580 0.02px, #fff8 0.03px), #111.........完整代码请登录后点击上方下载按钮下载查看