css绘制一个万圣节夜色场景背景效果代码

代码语言:html

所属分类:背景

代码描述:css绘制一个万圣节夜色场景背景效果代码,包含城堡、月亮、蝙蝠、南瓜头、蜘蛛、坟墓等元素。

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