单个div+css实现一个小汽车背行李效果代码-html代码-BFW代码库

单个div+css实现一个小汽车背行李效果代码

代码语言：html

代码描述：仅用一个div和少许css代码就实现一个小汽车背行李效果

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">



    <style>
        body {
          min-height: 320px;
          height: 100vh;
          position: relative;
          background-color: #ffe4e1;
        }
        div {
          position: absolute;
          left: 50%;
          top: 50%;
        }
        div:before,
        div:after {
          display: block;
          content: '';
          position: absolute;
        }
        @media (max-width: 400px) {
          div {
            transform: scale(0.8);
          }
        }
        #journey {
          box-sizing: border-box;
          font-size: 10px;
          width: 35em;
          height: 30em;
          margin-left: -17.5em;
          margin-top: -15em;
          background-repeat: no-repeat;
          background-image: radial-gradient(circle, #ffa07a 60%, rgba(255,160,122,0) 61%), radial-gradient(circle, #ffa07a 60%, rgba(255,160,122,0) 61%), linear-gradient(160deg, rgba(255,69,0,0) 40%, #ff4500 41%), linear-gradient(-160deg, rgba(255,69,0,0) 40%, #ff4500 41%), linear-gradient(#ff4500, #ff4500), linear-gradient(110deg, rgba(255,69,0,0) 40%, #ff4500 41%, #ff4500 50%, rgba(255,69,0,0) 51%), linear-gradient(-120deg, rgba(255,69,0,0) 48%, #ff4500 49%, #ff4500 56%, rgba(255,69,0,0) 57%), linear-gradient(#ff4500, #ff4500), linear-gradient(#ff4500, #ff4500);
          background-size: 6em 6em, 6em 6em, 9em 7em, 6.5em 7.5em, 18em 5.8em, 6.5em 10em, 6.5em 10em, 10em 0.8em, 0.8em 10em;
          background-position: left 6.5em bottom 0, right 6.5em bottom 0, left 1em bottom 3.5em, right 1em bottom 3.5em, left 10em bottom 3.5em, left 8.5em bottom 9em, right 6.5em bottom 9em, left 12.6em bottom 18.2em, left 17.5em bottom 8.5em;
        }
        #journey:before {
          width: 10em;
          height: 3em;
          left: 13.5em;
          top: 7.7em;
          background-color: #ff7f50;
          border-radius: 0.6em;
          .........完整代码请登录后点击上方下载按钮下载查看