div+css布局实现低音吉他效果代码

代码语言:html

所属分类:布局界面

代码描述:div+css布局实现低音吉他效果代码

代码标签: 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