div+css实现墙上彩灯挂画相册效果代码-html代码-BFW代码库

div+css实现墙上彩灯挂画相册效果代码

代码语言：html

代码描述：div+css实现墙上彩灯挂画相册效果代码

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

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

<head>
    <meta charset="UTF-8">
<style>
    body {
    background: #000;
    background-image: radial-gradient(ellipse at 50%,rgba(0,0,0,0.008),rgba(0,0,0,0.009));
    position: relative;
    padding-bottom: 10rem;
    font-family: "Itim",sans-serif
}

* {
    box-sizing: border-box
}

.wall {
    padding: 0 5rem;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    grid-column-gap: 4rem;
    max-width: 90rem;
    margin: auto;
    position: relative
}

@media(min-width: 40rem) {
    .wall {
        grid-template-columns:1fr 1.2fr 1fr
    }
}

@media(min-width: 70rem) {
    .wall {
        grid-template-columns:1fr 1.5fr .6fr .3fr 1.4fr 1fr
    }
}

.wire {
    position: relative;
    height: auto;
    text-align: center;
    width: 100%
}

@media(min-width: 70rem) {
    .wire:nth-child(2n) {
        transform:translateY(-14rem)
    }

    .wire:nth-child(3) {
        transform: translateY(-8rem)
    }

    .wire:nth-child(4) {
        z-index: -1
    }

    .wire:nth-child(6) {
        transform: translateY(-3rem)
    }
}

.wire svg {
    margin: auto
}

.light {
    height: 1.5rem;
    width: .6rem;
    background: #fff3e8;
    border-radius: 100%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0
}

.light:before {
    content: "";
    width: .8rem;
    height: .8rem;
    border-radius: 50%;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    box-shadow: 0 0 10px #FFEB3B,inset 0 -0.35rem .6rem #eebd39,0 1rem 5rem 3rem rgba(255,174,71,0.5),0 1rem 4rem 9rem rgba(234,162,58,0.1)
}

.light--one {
    top: 5%;
    transform: translateX(-15%) rotate(120deg)
}

.light--two {
    top: 20%;
    transform: translateX(90%) rotate(-50deg)
}

.light--three {
    top: 35%;
    transform: translateX(-10%) rotate(-5deg)
}

.light--four {
    top: 50%;
    transform: translateX(-90%) rotate(-105deg)
}

.light--five {
    top: 65%;
    transform: translateX(-70%) rotate(15deg)
}

.light--six {
    top: 80%;
    transform: translateX(-100%) rotate(-105deg)
}

.polaroid {
    position: absolute;
    padding: .5rem .5rem 2rem;
    background: #fff;
    border: 3px solid #000;
    line-height: 0;
    box-shadow: 0 2px 55px rgba(255,255,255,0.3);
    left: 50%;
    transform: translateX(-50%);
    z-index: 12;
    text-decoration: none;
    color: #000;
    transition: transform .35s ease
}

.polaroid:befo.........完整代码请登录后点击上方下载按钮下载查看