css绘制一个万圣节夜色场景背景效果代码
代码语言:html
所属分类:背景
代码描述:css绘制一个万圣节夜色场景背景效果代码,包含城堡、月亮、蝙蝠、南瓜头、蜘蛛、坟墓等元素。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> /* ************** COLORS ************* */ /* ************** MIXINs ************* */ /* ************************* */ * { padding: 0; margin: 0; box-sizing: border-box; } html { font-size: 62.5%; } /* Large devices (laptops/desktops, 992px and up) */ .background { background: linear-gradient(#eb6800, #ad2200); width: 153.6rem; height: 72.7rem; position: relative; } .background .moon { background: #fffdd7; width: 28rem; height: 28rem; position: absolute; top: 5rem; left: 10rem; border-radius: 50%; box-shadow: 0 0 2.2rem 1rem #fffdd7; } .background .spider-web { position: absolute; right: 0.4rem; } .background .spider-web .spider-web1 { background: #000; width: 0.4rem; height: 16rem; position: absolute; top: 5.2rem; left: -9rem; } .background .spider-web .spider-web2 { background: #000; width: 0.5rem; height: 14rem; } .background .spider-web .spider-web3 { background: #000; width: 0.5rem; height: 14rem; transform: rotate(90deg); position: absolute; top: -6.7rem; left: -6.8rem; } .background .spider-web .spider-web4 { background: #000; width: 0.5rem; height: 14rem; transform: rotate(20deg) translateX(6rem) translateY(3.8rem); position: absolute; top: -6.9rem; left: -6.8rem; } .background .spider-web .spider-web5 { background: #000; width: 0.5rem; height: 14rem; transform: rotate(55deg) translateX(4rem) translateY(2rem); position: absolute; top: -7.9rem; left: -6.8rem; } .background .spider-web .spider-web6 { background: transparent; width: 1.7rem; height: 1.7rem; border-bottom: solid #000 0.35rem; border-left: solid #000 0.35rem; border-radius: 50%; transform: rotate(-180deg); position: absolute; top: 0; left: -5rem; } .background .spider-web .spider-web7 { background: transparent; width: 1.7rem; height: 1.7rem; border-bottom: solid #000 0.35rem; border-left: solid #000 0.35rem; border-radius: 50%; transform: rotate(-180deg) translateX(2.3rem) translateY(-2rem); position: absolute; top: -1rem; left: -0.5rem; } .background .spider-web .spider-web8 { background: transparent; width: 1.7rem; height: 1.7rem; border-bottom: solid #000 0.35rem; border-left: solid #000 0.35rem; border-radius: 50%; transform: rotate(-190deg) translateX(1.4rem) translateY(-2.5rem); position: absolute; top: -1rem; left: -0.5rem; } .background .spider-web .spider-web9 { background: transparent; width: 1.9rem; height: 1.9rem; border-bottom: solid #000 0.35rem; border-left: solid #000 0.35rem; border-radius: 50%; transform: rotate(-190deg) translateX(1.4rem) translateY(-2.5rem); position: absolute; top: 1.8rem; left: -0.9rem; } .background .spider-web .spider-web10 { background: transparent; width: 3.2rem; height: 3.2rem; border-bottom: solid #000 0.35rem; border-left: solid #000 0.35rem; border-radius: 50%; transform: rotate(-215deg) translateX(1.4rem) translateY(-2.5rem); position: absolute; top: 4rem; left: -3.6rem; } .background .spider-web .spider-web11 { background: transparent; width: 4.2rem; height: 4.2rem; border-bottom: solid #000 0.36rem; border-left: solid #000 0.36rem; border-radius: 50%; transform: rotate(-213deg) translateX(1.4rem) translateY(-2.5rem); position: absolute; top: 6.7rem; left: -4.3rem; } .background .spider-web .spider-web12 { background: transparent; width: 4.2rem; height: 4.2rem; border-bottom: solid #000 0.35rem; border-left: solid #000 0.35rem; border-radius: 50%; transform: rotate(-190deg) translateX(0.1rem) translateY(-0.7rem); position: absolute; top: 1.8rem; left: -6rem; } .background .spider-web .spider-web13 { background: transparent; width: 6.2rem; height: 6.2rem; border-bottom: solid #000 0.39rem; border-left: solid #000 0.39rem; border-radius: 50%; transform: rotate(-190deg) translateX(3rem) translateY(-2.5rem); position: absolute; top: 1rem; left: -6.5rem; } .background .spider-web .spider-web14 { background: transparent; width: 7.4rem; height: 7.4rem; border-bottom: solid #000 0.39rem; border-left: solid #000 0.39rem; border-radius: 50%; transform: rotate(-190deg) translateX(8rem) translateY(-6rem); position: absolute; top: -1.5rem; left: -4.5rem; } .background .spider-web .spider-web15 { background: transparent; width: 3.5rem; height: 3.5rem; border-bottom: solid #000 0.39rem; border-left: solid #000 0.39rem; border-radius: 50%; transform: rotate(-160deg) translateX(0.7rem) translateY(0.7rem); position: absolute; top: 1rem; left: -8rem; } .background .spider-web .spider-web15 { background: transparent; width: 4.5rem; height: 4.5rem; border-bottom: solid #000 0.39rem; border-left: solid #000 0.39rem; border-radius: 50%; transform: rotate(-165deg) translateX(2.5rem) translateY(0.7rem); position: absolute; top: 1rem; left: -7.5rem; } .background .spider-web .spider-web16 { background: transparent; width: 5.5rem; height: 5.5rem; border-bottom: solid #000 0.39rem; border-left: solid #000 0.39rem; border-radius: 50%; transform: rotate(-165deg) translateX(6rem) translateY(0.7rem); position: absolute; top: 2.5rem; left: -7.2rem; } .background .spider-web .spider-web17 { background: transparent; width: 6.7rem; height: 6.7rem; border-bottom: solid #000 0.39rem; border-left: solid #000 0.39rem; border-radius: 50%; transform: rotate(-165deg) translateX(9.2rem) translateY(0.7rem); position: absolute; top: 3.7rem; left: -7.2rem; } .background .spider-head { background: #000; width: 7rem; height: 4.5rem; position: absolute; top: 21rem; left: 139.8rem; border-radius: 50%; } .background .spider-head .spider-left-eye { background: #fffdd7; width: 2.2rem; height: 2.2rem; border-radius: 50%; position: absolute; top: 1.2rem; left: 1.2rem; } .background .spider-head .spider-left-eye::before { content: ""; display: block; background: #000; width: 1.4rem; height: 1.4rem; border-radius: 50%; position: absolute; top: 0.4rem; left: 0.6rem; } .background .spider-head .spider-right-eye { background: #fffdd7; width: 2.3rem; height: 2.3rem; border-radius: 50%; position: absolute; top: 1.2rem; left: 3.5rem; } .background .spider-head .spider-right-eye::before { content: ""; display: block; background: #000; width: 1.4rem; height: 1.4rem; border-radius: 50%; position: absolute; top: 0.4rem; left: 0.4rem; } .background .spider-head .legs1 { background: #000; width: 2rem; height: 0.7rem; position: absolute; top: 1rem; left: -1.5rem; } .background .spider-head .legs1::before { content: ""; display: block; background: #000; width: 1.7rem; height: 0.7rem; position: absolute; top: 0.4rem; left: -1rem; transform: rotate(-50deg); border-radius: 0 50% 0 0; } .background .spider-head .legs2 { background: #000; width: 1rem; height: 0.7rem; position: absolute; top: 2.1rem; left: -0.7rem; } .background .spider-head .legs2::before { content: ""; display: block; background: #000; width: 1.5rem; height: 0.7rem; position: absolute; top: 0.4rem; left: -1.2rem; transform: rotate(-50deg); border-radius: 0 50% 0 0; } .background .spider-head .legs3 { background: #000; width: 0.9rem; height: 0.8rem; position: absolute; top: 3rem; left: -0.1rem; } .background .spider-head .legs3::before { content: ""; display: block; background: #000; width: 1.3rem; height: 0.6rem; position: absolute; top: 0.4rem; left: -1rem; transform: rotate(-50deg); border-radius: 0 50% 0 0; } .background .spider-head .legs4 { background: #000; width: 2rem; height: 0.7rem; position: absolute; top: 1rem; left: 6rem; transform: scaleX(-1); } .background .spider-head .legs4::before { content: ""; display: block; background: #000; width: 1.7rem; height: 0.7rem; position: absolute; top: 0.4rem; left: -1.4rem; transform: rotate(-50deg); border-radius: 0 50% 0 0; } .background .spider-head .legs5 { background: #000; width: 1rem; height: 0.7rem; position: absolute; top: 2.1rem; left: 6.6rem; transform: scaleX(-1); } .background .spider-head .legs5::before { content: ""; display: block; background: #000; width: 1.5rem; height: 0.7rem; position: absolute; top: 0.4rem; left: -1.4rem; transform: rotate(-50deg); border-radius: 0 50% 0 0; } .background .spider-head .legs6 { background: #000; width: 0.9rem; height: 0.8rem; position: absolute; top: 3rem; left: 6.2rem; transform: scaleX(-1); } .background .spider-head .legs6::before { content: ""; display: block; background: #000; width: 1.3rem; height: 0.6rem; position: absolute; top: 0.4rem; left: -1rem; transform: rotate(-50deg); border-radius: 0 50% 0 0; } .background .ground-left { border-radius: 40% 60% 50% 50%/100% 100% 0% 0%; background: #000; width: 95rem; height: 8rem; position: absolute; bottom: 0; } .background .ground-right { border-radius: 99% 24% 0% 0%/100% 100% 20% 27%; background: #000; width: 85rem; height: 6rem; position: absolute; bottom: 0; right: 0; } .background .houses { position: absolute; left: 10rem; bottom: 2rem; } .background .houses .house1 { background: #000; width: 15rem; height: 28rem; } .background .houses .house1::before { content: ""; display: block; border-bottom: 12rem solid #000; border-left: 12rem solid transparent; border-right: 12rem solid transparent; position: absolute; top: -10rem; left: -4.3rem; } .background .houses .house1 .window1 { background: linear-gradient(#f0a403, #fffdd7); border: solid #000 0.2rem; transform: rotate(0); width: 6.2rem; height: 6rem; position: absolute; top: 5rem; left: 4.3rem; } .background .houses .house1 .window1::before { content: ""; display: block; background: black; width: 0.4rem; height: 6rem; position: absolute; } .background .houses .house1 .window1::after { content: ""; display: block; background: #000; width: 0.4rem; height: 6.2rem; transform: rotate(90deg); position: absolute; } .background .houses .house1 .window1::before { left: 2.5rem; } .background .houses .house1 .window1::after { left: 2.5rem; } .background .houses .house1 .window2 { background: linear-gradient(#f0a403, #fffdd7); border: solid #000 0.2rem; transform: rotate(0); width: 6.2rem; height: 6rem; position: absolute; top: 15rem; left: 4.3rem; } .background .houses .house1 .window2::before { content: ""; display: block; background: black; width: 0.4rem; height: 6rem; position: absolute; } .background .houses .house1 .window2::after { content: ""; display: block; background: #000; width: 0.4rem; height: 6.2rem; transform: rotate(90deg); position: absolute; } .background .houses .house1 .window2::before { left: 2.5rem; } .background .houses .house1 .window2::after { left: 2.5rem; } .background .houses .house2 { background: #000; width: 20rem; height: 20rem; position: absolute; left: 22rem; bottom: 2rem; } .background .houses .house2::before { content: ""; display: block; border-bottom: 16rem solid #000; border-left: 14rem solid transparent; border-right: 14rem solid transparent; position: absolute; top: -15rem; left: -3.8rem; } .background .houses .house2 .window3 { background: linear-gradient(#f0a403, #fffdd7); border: solid #000 0.2rem; transform: rotate(0); width: 5rem; height: 5rem; position: absolute; top: 2rem; left: 3.3rem; } .background .houses .house2 .window3::before { content: ""; display: block; background: black; width: 0.4rem; height: 6.5rem; position: absolute; } .background .houses .house2 .window3::after { content: ""; display: block; background: #000; width: 0.4rem; height: 5.5rem; transform: rotate(90deg); position: absolute; } .background .houses .house2 .window3::before { left: 2.5rem; } .background .houses .house2 .window3::after { left: 2.5rem; } .background .houses .house2 .window4 { background: linear-gradient(#f0a403, #fffdd7); border: solid #000 0.2rem; transform: rotate(0); width: 5.5rem; height: 5.5rem; position: absolute; top: 2rem; left: 11.3rem; } .background .houses .house2 .window4::before { content: ""; display: block; background: black; width: 0.4rem; height: 6rem; position: absolute; } .background .houses .house2 .window4::after { content: ""; display: block; background: #000; width: 0.4rem; height: 5.8rem; transform: rotate(90deg); position: absolute; } .background .houses .house2 .window4::before { left: 2.5rem; } .background .houses .house2 .window4::after { left: 2.5rem; } .background .houses .house2 .door { border-radius: 50% 50% 0 0; background: linear-gradient(#f0a403, #fffdd7); width: 5.5rem; height: 7.5rem; position: absolute; top: 9rem; left: 7.3rem; } .background .houses .house3 { background: #000; width: 7rem; height: 10rem; position: absolute; top: -11.5rem; left: 22.5rem; transform: rotate(-40deg); } .background .houses .house3::before { content: ""; display: block; border-bottom: 6rem solid #000; border-left: 6rem solid transparent; border-right: 6rem solid transparent; position: absolute; top: -5rem; left: -3rem; } .background .houses .house3 .window5 { background: linear-gradient(#f0a403, #fffdd7); border: solid #000 0.2rem; transform: rotate(0); width: 3.5rem; height: 3.5rem; position: absolute; top: 2rem; left: 1.8rem; } .background .houses .house3 .window5::before { content: ""; display: block; background: black; width: 0.4rem; height: 4rem; position: absolute; } .background .houses .house3 .window5::after { content: ""; display: block; background: #000; width: 0.4rem; height: 4rem; transform: rotate(90deg); position: absolute; } .background .houses .house3 .window5::before { left: 1.4rem; } .background .houses .house3 .window5::after { left: 1.5rem; } .background .houses .house4 { background: #000; width: 5rem; height: 7rem; position: absolute; top: -5rem; left: 39rem; transform: rotate(40deg); } .background .houses .house4::before { content: ""; display: block; border-bottom: 3.5rem solid #000; border-left: 3.5rem solid transparent; border-right: 3.5rem solid transparent; position: absolute; top: -3rem; left: -1rem; } .background .houses .house4 .window6 { background: linear-gradient(#f0a403, #fffdd7); border: solid #000 0.2rem; transform: rotate(0); width: 2.5rem; height: 2.5rem; position: absolute; top: 2rem; left: 1.4rem; } .background .houses .house4 .window6::before { content: ""; display: block; background: black; width: 0.4rem; height: 4rem; position: absolute; } .background .houses .house4 .window6::after { content: ""; display: block; background: #000; width: 0.4rem; height: 4rem; transform: rotate(90deg); position: absolute; } .background .houses .house4 .window6::before { left: 1rem; } .background .houses .house4 .window6::after { left: 1rem; top: -0.9rem; } .background .curve .curve1 { width: 2.7rem; height: 2.7rem; background: transparent; border-bottom: solid #000 0.35rem; border-left: solid #000 0.35rem; border-radius: 50%; transform: rotate(20deg); position: absolute; top: 42.1rem; left: 3.8rem; } .background .curve .curve1::after { content: ""; display: block; width: 1.2rem; height: 1.2rem; background: transparent; border-bottom: solid #000 0.25rem; border-left: solid #000 0.25rem; border-radius: 50%; transform: rotate(150deg); } .background .curve .curve2 { width: 2.7rem; height: 2.7rem; background: transparent; border-bottom: solid #000 0.35rem; border-left: solid #000 0.35rem; border-radius: 50%; transform: rotate(20deg); position: absolute; top: 42.1rem; left: 28.8rem; transform: scaleX(-1); } .background .curve .curve2::after { content: ""; display: block; width: 1.2rem; height: 1.2rem; background: transparent; border-bottom: solid #000 0.25rem; border-left: solid #000 0.25rem; border-radius: 50%; transform: rotate(150deg); } .background .curve .curve3 { width: 2.7rem; height: 2.7rem; background: transparent; border-bottom: solid #000 0.35rem; border-left: solid #000 0.35rem; border-radius: 50%; transform: rotate(20deg); position: absolute; top: 30.4rem; left: 16rem; transform: scaleX(-1) rotate(70deg); } .background .curve .curve3::after { content: ""; display: block; width: 1.2rem; height: 1.2rem; background: transparent; border-bottom: solid #000 0.25rem; border-left: solid #000 0.25rem; border-radius: 50%; transform: rotate(150deg); } .background .curve .curve4 { width: 2.7rem; height: 2.7rem; background: transparent; border-bottom: solid #000 0.35rem; border-left: solid #000 0.35rem; border-radius: 50%; transform: rotate(20deg); position: absolute; top: 47rem; left: 27rem; } .background .curve .curve4::after { content: ""; display: block; width: 1.2rem; height: 1.2rem; background: transparent; border-bottom: solid #000 0.25rem; border-left: solid #000 0.25rem; border-radius: 50%; transform: rotate(150deg); } .background .curve .curve5 { width: 2.7rem; height: 2.7rem; background: transparent; border-bottom: solid #000 0.35rem; border-left: solid #000 0.35rem; border-radius: 50%; transform: rotate(20deg); position: absolute; top: 47rem; left: 55rem; transform: scaleX(-1); } .background .curve .curve5::after { content: ""; display: block; width: 1.2rem; height: 1.2rem; background: transparent; border-bottom: solid #000 0.25rem; border-left: solid #000 0.25rem; border-radius: 50%; transform: rotate(150deg); } .background .curve .curve6 { width: 2.7rem; height: 2.7rem; background: transparent; border-bottom: solid #000 0.35rem; border-left: solid #000 0.35rem; border-radius: 50%; transform: rotate(20deg); position: absolute; top: 31.6rem; left: 40.3rem; transform: scaleX(-1) rotate(70deg); } .background .curve .curve6::after { content: ""; display: block; width: 1.2rem; height: 1.2rem; background: transparent; border-bottom: solid #000 0.25rem; border-left: solid #000 0.25rem; border-radius: 50%; transform: rotate(150deg); } .background .curve .curve7 { width: 2.7rem; height: 2.7rem; background: transparent; border-bottom: solid #000 0.35rem; border-left: solid #000 0.35rem; border-radius: 50%; transform: rotate(20deg); position: absolute; top: 35rem; left: 26.5rem; transform: rotate(-40deg); } .background .curve .curve7::after { content: ""; display: block; width: 1.2rem; height: 1.2rem; background: transparent; border-bottom: solid #000 0.25rem; border-left: solid #000 0.25rem; border-radius: 50%; transform: rotate(150deg); } .background .curve .curve8 { width: 2.7rem; height: 2.7rem; background: transparent; border-bottom: solid #000 0.35rem; border-left: solid #000 0.35rem; border-radius: 50%; transform: rotate(20deg); position: absolute; top: 27.5rem; left: 35.5rem; transform: scaleX(-1) rotate(40deg); } .background .curve .curve8::after { content: ""; display: block; width: 1.2rem; height: 1.2rem; background: transparent; border-bottom: solid #000 0.25rem; border-left: solid #000 0.25rem; border-radius: 50%; transform: rotate(150deg); } .background .curve .curve9 { width: 2.7rem; height: 2.7rem; background: transparent; border-bottom: solid #000 0.35rem; border-left: solid #000 0.35rem; border-radius: 50%; transform: rotate(20deg); position: absolute; top: 28rem; left: 27rem; transform: scaleX(-1) rotate(110deg); } .background .curve .curve9::after { content: ""; display: block; width: 1.2rem; height: 1.2rem; background: transparent; border-bottom: solid #000 0.25rem; border-left: solid #000 0.25rem; border-radius: 50%; transform: rotate(150deg); } .background .curve .curve10 { width: 2.7rem; height: 2.7rem; background: transparent; border-bottom: solid #000 0.35rem; border-left: solid #000 0.35rem; border-radius: 50%; transform: rotate(20deg); position: absolute; top: 35.3rem; left: 50.5rem; transform: rotate(20deg); width: 2rem; height: 2rem; } .background .curve .curve10::after { content: ""; display: block; width: 1.2rem; height: 1.2rem; background: transparent; border-bottom: solid #000 0.25rem; border-left: solid #000 0.25rem; border-radius: 50%; transform: rotate(150deg); } .background .curve .curve11 { width: 2.7rem; height: 2.7rem; background: transparent; border-bottom: solid #000 0.35rem; border-left: solid #000 0.35rem; border-radius: 50%; transform: rotate(20deg); position: absolute; top: 39.5rem; left: 55.7rem; transform: scaleX(-1) rotate(-60deg); width: 2rem; height: 2rem; } .background .curve .curve11::after { content: ""; display: block; width: 1.2rem; height: 1.2rem; background: transparent; border-bottom: solid #000 0.25rem; border-left: solid #000 0.25rem; border-radius: 50%; transform: rotate(150deg); } .background .curve .curve12 { width: 2.7rem; height: 2.7rem; background: transparent; border-bottom: solid #000 0.35rem; border-left: solid #000 0.35rem; border-radius: 50%; transform: rotate(20deg); position: absolute; top: 35.2rem; left: 55rem; transform: scaleX(-1) rotate(-5deg); width: 2rem; height: 2rem; } .background .curve .curve12::after { content: ""; display: block; width: 1.2rem; height: 1.2rem; background: transparent; border-bottom: solid #000 0.25rem; border-left: solid #000 0.25rem; border-radius: 50%; transform: rotate(150deg); } .background .tomb { border-radius: 50% 50% 0 0; background: #000; width: 6.5rem; height: 8rem; position: absolute; left: 90.3rem; bottom: 4.3rem; border: solid #000 0.18rem; } .background .tomb .rip { font-size: 2rem; position: absolute; left: 1rem; bottom: 2.5rem; color: #fffdd7; } .background .tomb .cross-tomb { background: #000; width: 1rem; height: 7.5rem; position: absolute; left: 2.7rem; bottom: 6.5rem; } .background .tomb .cross-tomb::after { content: ""; display: block; background: #000; width: 1rem; height: 4rem; position: absolute; left: 0; bottom: 3rem; transform: rotate(90deg); } .background .cross { background: #000; width: 2.3rem; height: 11rem; position: absolute; left: 60rem; bottom: 6.5rem; transform: rotate(-8deg); border: solid #000 0.1rem; } .background .cross::after { content: ""; display: block; background: #000; width: 1.7rem; height: 6.5rem; position: absolute; left: 0; bottom: 3.5rem; transform: rotate(90deg); } .background .pumpkin1 { background: #eb6800; width: 12rem; height: 10rem; border-radius: 50%; position: absolute; left: 67rem; bottom: 5rem; transform: rotate(20deg); border: solid 2px #ad2200; filter: drop-shadow(0 0 0.1rem); } .background .pumpkin1::after { content: ""; display: block; background: #eb6800; width: 12rem; height: 10rem; border-radius: 50%; position: absolute; left: 3.5rem; bottom: 1rem; transform: rotate(-30deg); z-index: -1; } .background .pumpkin1 .left-eye-pumpkin { width: 3.2rem; height: 3.2rem; border-radius: 50%; box-shadow: 1rem 1rem 0 0 #000; transform: rotate(200deg); position: absolute; left: 2.5rem; bottom: 2.7rem; filter: drop-shadow(0 0 0.1rem); } .background .pumpkin1 .right-eye-pumpkin { width: 3.2rem; height: 3.2rem; border-radius: 50%; box-shadow: 1rem 1rem 0 0 #000; transform: rotate(210deg) translateX(3rem) translateY(-2.4rem); position: absolute; left: 12.5rem; bottom: 5.7rem; } .background .pumpkin1 .smile { border-radius: 50% 50% 10% 90%/100% 100% 0% 0%; background: #000; width: 9.5rem; height: 2.8rem; transform: rotate(160deg); position: absolute; left: 3.8rem; bottom: 2rem; } .background.........完整代码请登录后点击上方下载按钮下载查看
网友评论0