Jarb Land-team D sspim. (Copy 8324)

✨ นายอธิชาติ ชูศรี

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Jarb land</title>
</head>
<style>
    body {
        height: 100vh;
        padding: 0;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .wrapper {
        perspective: 0px;
        background-image: url('https://cdn.discordapp.com/attachments/807062391375790132/810091589460295700/park.jpg');
        /* background-color: #000; */
        width: 850px;
        height: 650px;
        display: flex;
    }
    
    #lights {
        position: absolute;
        width: 850px;
        height: 650px
    }
    
    #stars {
        position: absolute;
        width: 850px;
        height: 650px;
    }
    
    .star-bg {
        animation: stars-animation 3s linear infinite alternate;
    }
    
    .star-bg.big {
        animation-delay: 1.5s;
    }
    
    @keyframes stars-animation {
        0% {
            opacity: .3;
        }
        50% {
            opacity: 1;
        }
        100% {
            opacity: .3
        }
    }
    
    .light-bulb {
        animation: light-animation 3s linear infinite;
    }
    
    @keyframes light-animation {
        0% {
            r: 30;
        }
        50% {
            r: 40;
        }
        100% {
            r: 30;
        }
    }
    /* หลังคา ,แท่นล่าง */
    
    #carousel {
        width: 850px;
        height: 650px;
        text-align: center;
        position: relative;
        transform-style: preserve-3d;
    }
    
    #horse-ride img {
        max-width: 550px;
        display: inline-block;
    }
    
    #horse-ride {
        transform-style: preserve-3d;
        transform: translate3d(0, 0, 100px);
    }
    /* เสากลาง */
    
    #pole {
        width: 25px;
        height: 195px;
        background-image: url('http://svgur.com/i/4k.svg');
        /* background-color: #ee85b5; */
        position: absolute;
        left: 0;
        background-size: cover;
        right: 0;
        margin-left: auto;
        margin-right: auto;
        top: 285px;
        animation: pole-animation 3s linear infinite;
        transform: translate3d(0, 0, -50px);
    }
    
    @keyframes pole-animation {
        0% {
            background-position: bottom;
        }
        100% {
            background-position: top;
        }
    }
    
    #cylinder {
        width: 100px;
        transform-style: preserve-3d;
        position: absolute;
        top: 290px;
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
        transform: translate3d(0, 0, -100px);
    }
    
    #fade-black {
        width: 190px;
        height: 164px;
        position: absolute;
        background: rgba(0, 0, 0, 0.4);
        top: 286px;
        left: 330px;
        transform: translate3d(0, 0, -120px);
    }
    
    #horses {
        transform-style: preserve-3d;
        animation: spin 15s infinite linear;
        transform-origin: center;
        transform-box: fill-box;
    }
    
    @keyframes spin {
        0% {
            transform: rotateY(-360deg);
        }
    }
    /* เสาม้า */
    
    #horses div {
        background-size: cover;
        position: absolute;
        height: 155px;
        width: 95px;
        transform-origin: center;
        background-image: url('https://cdn.discordapp.com/attachments/807062391375790132/810079023794749440/image0.png');
        background-position: 50%;
    }
    
    .hors {
        animation: horses-animation 3s linear infinite;
    }
    
    img.praew {
        width: 130px;
        height: 130px;
    }
    
    img.tan {
        width: 60px;
        height: 70px;
    }
    
    img.first {
        width: 130px;
        height: 130px;
    }
    
    img.pop {
        width: 70px;
        height: 70px;
    }
    
    img.tang {
        width: 60px;
        height: 90px;
    }
    
    img.pimdy {
        width: 70px;
        height: 70px;
    }
    
    img.puifai {
        width: 110px;
        height: 110px;
        transform: rotate(-38deg);
    }
    
    img.pimmoo {
        width: 80px;
        height: 80px;
    }
    
    img.game {
        width: 70px;
        height: 70px;
    }
    
    img.sspim {
        width: 100px;
        height: 100px;
    }
  
  	 img.kong {
        width: 60px;
        height: 70px;
    }
    
    img.jb {
        position: absolute;
        top: 2em;
        left: 5.5em;
        width: 190px;
        height: 190px;
        animation: jbb 2s infinite linear;
        filter: drop-shadow(0 0 30px pink);
    }
    
    img.bont {
        position: absolute;
        top: 10em;
        left: 30em;
        width: 15em;
        height: 20em;
    }
    
    img.border {
        position: absolute;
        top: -13em;
        left: -18.5em;
        width: 90em;
        height: 70em;
        z-index: 10px;
    }
    
    @keyframes jbb {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
    }
    
    .hors.down {
        animation-delay: 1.5s
    }
    
    @keyframes horses-animation {
        50% {
            margin-top: -30px;
        }
    }
    
    #horses .a {
        transform: rotateY(0deg) translateZ(100px);
        animation-delay: .2s;
    }
    
    #horses .b {
        transform: rotateY(35deg) translateZ(100px);
    }
    
    #horses .c {
        transform: rotateY(62deg) translateZ(100px);
    }
    
    #horses .d {
        transform: rotateY(93deg) translateZ(100px);
    }
    
    #horses .e {
        transform: rotateY(124deg) translateZ(100px);
    }
    
    #horses .f {
        transform: rotateY(155deg) translateZ(100px);
    }
    
    #horses .g {
        transform: rotateY(186deg) translateZ(100px);
    }
    
    #horses .h {
        transform: rotateY(217deg) translateZ(100px);
    }
    
    #horses .i {
        transform: rotateY(255deg) translateZ(100px);
    }
    
    #horses .j {
        transform: rotateY(290deg) translateZ(100px);
    }
   #horses .k {
        transform: rotateY(330deg) translateZ(100px);
    }
  .credit {
    position:absolute;
    top:26.2em;
    left:15.5em;
    font-size:25px;
    color:#7c0a02;
    font-family:sans-serif;
  }
  </style>

<body>
    <div class="wrapper">
        <div id="stars"><svg id="stars" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
        <g id="stars-2" data-name="stars">
          <g id="rect">
            <g id="star" class="star-bg big">
              <path d="M208.68,108.13a4.5,4.5,0,0,1-2.87-2.87l-1.12-3.4-1.12,3.4a4.5,4.5,0,0,1-2.87,2.87l-3.4,1.12,3.4,1.12a4.5,4.5,0,0,1,2.87,2.87l1.12,3.4,1.12-3.4a4.5,4.5,0,0,1,2.87-2.87l3.4-1.12Z" fill="#ffaaa3"/> //สีดาวครึ่งซ้าย ของดาวตรงกลางตั้นไม้ด้านซ้าย
              <path d="M204.7,101.87l1.12,3.4a4.5,4.5,0,0,0,2.87,2.87l3.4,1.12-3.4,1.12a4.5,4.5,0,0,0-2.87,2.87l-1.12,3.4V101.87Z" fill="#ee85b5"/> //สีดาวครึ่งขวา ของดาวตรงกลางตั้นไม้ด้านซ้าย
            </g>
            <g id="star-2" class="star-bg big" data-name="star">
              <path d="M95.68,194.13a4.5,4.5,0,0,1-2.87-2.87l-1.12-3.4-1.12,3.4a4.5,4.5,0,0,1-2.87,2.87l-3.4,1.12,3.4,1.12a4.5,4.5,0,0,1,2.87,2.87l1.12,3.4,1.12-3.4a4.5,4.5,0,0,1,2.87-2.87l3.4-1.12Z" fill="#ffaaa3"/> //สีดาวครึ่งซ้าย ของดาวริมต้นไม้ด้านซ้าย
              <path d="M91.7,187.87l1.12,3.4a4.5,4.5,0,0,0,2.87,2.87l3.4,1.12-3.4,1.12a4.5,4.5,0,0,0-2.87,2.87l-1.12,3.4V187.87Z" fill="#ee85b5"/> //สีดาวครึ่งขวา ของดาวริมต้นไม้ด้านซ้าย
            </g>
            <g id="star-3" class="star-bg big" data-name="star">
              <path d="M295.68,64.13a4.5,4.5,0,0,1-2.87-2.87l-1.12-3.4-1.12,3.4a4.5,4.5,0,0,1-2.87,2.87l-3.4,1.12,3.4,1.12a4.5,4.5,0,0,1,2.87,2.87l1.12,3.4,1.12-3.4a4.5,4.5,0,0,1,2.87-2.87l3.4-1.12Z" fill="#ffaaa3"/> //สีดาวครึ่งซ้าย ของดาวบนต้นไม้ด้านซ้าย
              <path d="M291.7,57.87l1.12,3.4a4.5,4.5,0,0,0,2.87,2.87l3.4,1.12-3.4,1.12a4.5,4.5,0,0,0-2.87,2.87l-1.12,3.4V57.87Z" fill="#ee85b5"/> //สีดาวครึ่งขวา ของดาวบนต้นไม้ด้านซ้าย
            </g>
            <g id="star-4" class="star-bg big" data-name="star">
              <path d="M379.68,160.13a4.5,4.5,0,0,1-2.87-2.87l-1.12-3.4-1.12,3.4a4.5,4.5,0,0,1-2.87,2.87l-3.4,1.12,3.4,1.12a4.5,4.5,0,0,1,2.87,2.87l1.12,3.4,1.12-3.4a4.5,4.5,0,0,1,2.87-2.87l3.4-1.12Z" fill="#ffaaa3"/> //สีดาวครึ่งซ้าย ของดาวบนหลังคาฝั่งซ้าย
              <path d="M375.7,153.87l1.12,3.4a4.5,4.5,0,0,0,2.87,2.87l3.4,1.12-3.4,1.12a4.5,4.5,0,0,0-2.87,2.87l-1.12,3.4V153.87Z" fill="#ee85b5"/> //สีดาวครึ่งขวา ของดาวบนหลังคาฝั่งซ้าย
            </g>
            <g id="star-5" class="star-bg big" data-name="star">
              <path d="M498.68,128.13a4.5,4.5,0,0,1-2.87-2.87l-1.12-3.4-1.12,3.4a4.5,4.5,0,0,1-2.87,2.87l-3.4,1.12,3.4,1.12a4.5,4.5,0,0,1,2.87,2.87l1.12,3.4,1.12-3.4a4.5,4.5,0,0,1,2.87-2.87l3.4-1.12Z" fill="#ffaaa3"/> //สีดาวครึ่งซ้าย ของดาวบนหลังคาฝั่งขวา
              <path d="M494.7,121.87l1.12,3.4a4.5,4.5,0,0,0,2.87,2.87l3.4,1.12-3.4,1.12a4.5,4.5,0,0,0-2.87,2.87l-1.12,3.4V121.87Z" fill="#ee85b5"/> //สีดาวครึ่งขวา ของดาวบนหลังคาฝั่งขวา
            </g>
            <g id="star-6" class="star-bg big" data-name="star">
              <path d="M653.68,139.13a4.5,4.5,0,0,1-2.87-2.87l-1.12-3.4-1.12,3.4a4.5,4.5,0,0,1-2.87,2.87l-3.4,1.12,3.4,1.12a4.5,4.5,0,0,1,2.87,2.87l1.12,3.4,1.12-3.4a4.5,4.5,0,0,1,2.87-2.87l3.4-1.12Z" fill="#ffaaa3"/> //สีดาวครึ่งซ้าย ของดาวขวาสุด
              <path d="M649.7,132.87l1.12,3.4a4.5,4.5,0,0,0,2.87,2.87l3.4,1.12-3.4,1.12a4.5,4.5,0,0,0-2.87,2.87l-1.12,3.4V132.87Z" fill="#ee85b5"/> // สีดาวครึ่งขวา ของดาวขวาสุด
            </g>
          </g>
          <g id="dots">
            <circle class="star-bg small" cx="419.81" cy="84.29" r="2.62" fill="#ff958c"/> //จุดกลมๆตรงกลางหลังคาหม้าหมุน
            <circle class="star-bg small" cx="478.81" cy="203.29" r="2.62" fill="#ff958c"/> //จุดกลมๆบนหลังคาม้าหมุนด้านขวา
            <circle class="star-bg small" cx="309.28" cy="147.62" r="2.62" fill="#ff958c"/> //จุดกลมๆตรงกลางตั้นไม้ด้านซ้าย
            <circle class="star-bg small" cx="85.55" cy="65.24" r="2.62" fill="#ff958c"/> //จุดกลมๆด้านซ้าย บนพระจันทร์
            <circle class="star-bg small" cx="717.52" cy="175.5" r="2.62" fill="#ff958c"/> //จุดกลมๆข้างล้างบนขวา
            <circle class="star-bg small" cx="582.87" cy="66.63" r="2.62" fill="#ff958c"/> //จุดกลมๆตรงกลางตั้นไม้ด้านขวา
            <circle class="star-bg small" cx="702.57" cy="98.13" r="2.62" fill="#ff958c"/> //จุดกลมๆขวาบน
          </g>
        </g>
      </svg>
        </div>
        <div id="lights"><svg id="lights" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 800 600">
        <defs>
          <radialGradient id="radial-gradient" cx="205.17" cy="270.39" r="41.14" gradientUnits="userSpaceOnUse">
            <stop offset="0.01" stop-color="#ff958c"/>
            <stop offset="0.18" stop-color="#ff958c" stop-opacity="0.77"/>
            <stop offset="0.41" stop-color="#ff958c" stop-opacity="0.5"/>
            <stop offset="0.61" stop-color="#ff958c" stop-opacity="0.28"/>
            <stop offset="0.78" stop-color="#ff958c" stop-opacity="0.13"/>
            <stop offset="0.92" stop-color="#ff958c" stop-opacity="0.03"/>
            <stop offset="1" stop-color="#ff958c" stop-opacity="0"/>
          </radialGradient>
          <radialGradient id="radial-gradient-2" cx="628.17" cy="270.39" r="41.14" xlink:href="#radial-gradient"/>
        </defs>
         <g id="light1">
          <g>
            <path d="M202.39,400l0.12,0h2.66V293.53h-2.78V400Z" fill="#b2d8b3"/> //แท่งเสาฝั่งซ้าย ด้านซ้าย
            <path d="M202.39,400a2.77,2.77,0,0,0-2.66,2.76v12.84a2.88,2.88,0,0,1,.53-0.11h4.91V400h-2.66Z" fill="#60b683"/> //แท่นตั้งไฟอันเล็กฝั่งซ้าย ด้านซ้าย
            <path d="M200.26,415.48a2.88,2.88,0,0,0-.53.11,3,3,0,0,0-2.52,2.94v33h8v-36h-4.91Z" fill="#5b7a97"/> //แท่นตั้งไฟอันใหญ่ฝั่งซ้าย ด้านซ้าย
            <path d="M200.44,286.88H198a2.5,2.5,0,0,0-2.38,2.6v1.44a2.5,2.5,0,0,0,2.38,2.6h7.14v-6.64h-4.73Z" fill="#5b7a97"/> //ขอบวางหลอดไฟฝั่งซ้าย ด้านซ้าย
          </g>
          <g>
            <path d="M207.21,400l-0.12,0h-2.66V293.53h2.78V400Z" fill="#b2d8b3"/> //แท่งเสาฝั่งซ้าย ด้านขวา
            <path d="M207.21,400a2.77,2.77,0,0,1,2.66,2.76v12.84a2.88,2.88,0,0,0-.53-0.11h-4.91V400h2.66Z" fill="#60b683"/> //แท่นตั้งไฟอันเล็กฝั่งซ้าย ด้านขวา
            <path d="M209.34,415.48a2.88,2.88,0,0,1,.53.11,3,3,0,0,1,2.52,2.94v33h-8v-36h4.91Z" fill="#5b7a97"/> // แท่นตั้งไฟอันใหญ่ฝั่งซ้าย ด้านขวา
            <path d="M209.16,286.88h2.41a2.5,2.5,0,0,1,2.38,2.6v1.44a2.5,2.5,0,0,1-2.38,2.6h-7.14v-6.64h4.73Z" fill="#5b7a97"/> //ขอบวางหลอดไฟฝั่งซ้าย ด้านขวา
          </g>
          <circle class="light-bulb" cx="205.17" cy="270.39" r="41.14" fill="url(#radial-gradient)"/> //คือไรคับเนี่ยน้อน
          <circle cx="205.17" cy="270.39" r="17.93" fill="#f8d243" opacity="0.8"/> //หลอดไฟวงกลมด้านซ้าย
          <path d="M196.69,260c-0.6-.79-3.16-0.05-3.93.58s-2.57,3.9-1.53,4.42,2.93-.52,3.94-0.62C196.44,264.29,197.46,261.05,196.69,260Z" fill="#eee"/> //เงาเร้กๆในหลอดไฟซ้าย
        </g>
        <g id="light2">
          <g>
            <path d="M625.39,400l0.12,0h2.66V293.53h-2.78V400Z" fill="#b2d8b3"/> //แท่งเสาฝั่งขวา ด้านซ้าย 
            <path d="M625.39,400a2.77,2.77,0,0,0-2.66,2.76v12.84a2.88,2.88,0,0,1,.53-0.11h4.91V400h-2.66Z" fill="#60b683"/> //แท่นตั้งไฟอันเล็กฝั่งขวา ด้านซ้าย
            <path d="M623.26,415.48a2.88,2.88,0,0,0-.53.11,3,3,0,0,0-2.52,2.94v33h8v-36h-4.91Z" fill="#5b7a97"/>//แท่นตั้งไฟอันใหญ่ฝั่งขวา ด้านซ้าย
            <path d="M623.44,286.88H621a2.5,2.5,0,0,0-2.38,2.6v1.44a2.5,2.5,0,0,0,2.38,2.6h7.14v-6.64h-4.73Z" fill="#5b7a97"/> //ขอบวางหลอดไฟฝั่งขวา ด้านซ้าย
          </g>
          <g>
            <path d="M630.21,400l-0.12,0h-2.66V293.53h2.78V400Z" fill="#b2d8b3"/>
            <path d="M630.21,400a2.77,2.77,0,0,1,2.66,2.76v12.84a2.88,2.88,0,0,0-.53-0.11h-4.91V400h2.66Z" fill="#60b683"/> //แท่นตั้งไฟอันเล็กฝั่งขวา ด้านขวา
            <path d="M632.34,415.48a2.88,2.88,0,0,1,.53.11,3,3,0,0,1,2.52,2.94v33h-8v-36h4.91Z" fill="#5b7a97"/> //แท่นตั้งไฟอันใหญ่ฝั่งขวา ด้านขวา
            <path d="M632.16,286.88h2.41a2.5,2.5,0,0,1,2.38,2.6v1.44a2.5,2.5,0,0,1-2.38,2.6h-7.14v-6.64h4.73Z" fill="#5b7a97"/>
          </g>
          <circle class="light-bulb" cx="628.17" cy="270.39" r="41.14" fill="url(#radial-gradient-2)"/> //แสงสะท้อนจากหลอด
          <circle cx="628.17" cy="270.39" r="17.93" fill="#f8d243" opacity="0.8"/> //หลอดไฟวงกลมด้านขวา
          <path d="M619.69,260c-0.6-.79-3.16-0.05-3.93.58s-2.57,3.9-1.53,4.42,2.93-.52,3.94-0.62C619.44,264.29,620.46,261.05,619.69,260Z" fill="#eee"/> //เงาเร้กๆในหลอดไฟขวา
        </g>
        <div><img class="bont" src="https://cdn.discordapp.com/attachments/807062391375790132/810100589643563028/20210213_175016.png"/></div>
        <div><img class="jb" src="https://images-ext-2.discordapp.net/external/effkj0t9qTug9-521pW_3PMX9mgIVM-WrRRkFY1LW3k/https/media.discordapp.net/attachments/798210303846383676/809303024794992681/92_20210211125710.png" /></div>
        <div><img class="border" src="https://cdn.discordapp.com/attachments/807062391375790132/810098061023248404/Lovepik_com-610505365-Cute_cartoon_decorative_picture_frame.png" /></div>
      </svg>
        </div>
        <div id="carousel">
            <div id="horse-ride">
                <svg id="ground" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
                <g>
                    <path d="M183.77,523a16.5,16.5,0,0,1,0-33H616.23a16.5,16.5,0,0,1,0,33H183.77Z" fill="#3f000f" /> //แท่นใหญ่ล่าง
                    <rect x="151" y="451" width="499" height="40" rx="16.26" ry="16.26" transform="translate(801 942) rotate(180)" fill="#7c0a02" /> //แท่นใหญ่บน
                </g>
                <g id="carousel-2" data-name="carousel">
                    <path d="M401,191.7s0-4.82,0-14.45c2.59,0.89,6.22,2.65,8.89,2.65,3.26,0,7.15-1.83,10.34-2.65l-4.78,5.26,6,2.15c-5.38,4.92-13.47,1.32-20.23.51l0.05,6.53H401Z" fill="#1d4e89" /> //จุดยอด
                    <polygon points="401.13 187 288.44 269 325.69 269 325.85 269 363.23 269 363.39 269 400.77 269 400.92 269 401.13 269 438.79 269 438.94 269 476.32 269 476.48 269 513.73 269 401.13 187" fill="#ff9d05" /> //หลังคาซ้ายชมพู
                    <polygon points="438.79 269.05 438.94 269.05 476.32 269.05 476.48 269.05 513.73 269.05 401.13 187.06 401.13 269.05 438.79 269.05" fill="#ad1500" /> //หลังคาขวาม่วง
                    <path d="M274.71,443l9.68-13.91H402.13v22.19H279.85C275.15,451.27,272.26,446.62,274.71,443Z" fill="#ad1500" /> //ขอบแท่นชมพูซ้าย
                    <path d="M525.31,443l-9-13.91H401v22.19H520.26C524.88,451.27,527.72,446.62,525.31,443Z" fill="#ff9d05" /> //ขอบแท่นชมพูขวา
                    <polygon points="516.31 428.45 516.31 417.92 400.05 417.92 400.05 429.08 516.31 429.08 516.31 428.45" fill="#1d4e89" /> //ขอบแท่นม่วงขวา
                    <polygon points="284.39 428.45 284.39 417.92 401.13 417.92 401.13 429.08 284.39 429.08 284.39 428.45" fill="#1d4e89" /> //ขอบแท่นม่วงซ้าย
                    <path d="M476.16,269H288.44c0,10,8.41,19,18.78,19A18.9,18.9,0,0,0,326,269a18.76,18.76,0,0,0,37.52.61A18.9,18.9,0,0,0,382.25,288h0.1a18.9,18.9,0,0,0,18.77-19c0,9,6.8,19,18.79,19a18.88,18.88,0,0,0,18.73-18.21A18.89,18.89,0,0,0,457.39,288c9.61,0,18.5-9.36,18.82-18.34A18.9,18.9,0,0,0,495,288c10.37,0,18.78-9,18.78-19H476.16Z"
                        fill="#1d4e89" /> //ปลายร่ม
                </g>
                  <div>
                    <a class="credit" href="https://codepen.io/gxash/pen/rLLyvq?editors=1100">@credit</a>
                  </div>
                </svg>

</div>
            <div id="fade-black"></div>
            <div id="pole">

</div>
            <div id="cylinder">

</div>
</body>
<script>
  
  </script>
</html>