angular折叠式邮寄快递信息卡片效果代码-html代码-BFW代码库

代码语言：html
代码描述：angular折叠式邮寄快递信息卡片效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">

    <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Open+Sans'>

    <style>
        *, *:before, *:after {
          box-sizing: border-box;
          margin: 0;
          padding: 0;
        }
        
        body {
          background: #222;
          font-family: "Open Sans", Helvetica, Arial, sans-serif;
        }
        
        .card__sender__heading, .card__text__heading {
          font-size: 10px;
          text-transform: uppercase;
          color: #B5B5B5;
        }
        
        .phone {
          position: relative;
          width: 423px;
          height: 879px;
          margin: 2rem auto 2rem;
          padding: 106px 24px;
          background-color: #f8f8f8;
          border-radius: 56px;
        }
        @media (max-width: 480px) {
          .phone {
            width: 100%;
            height: 100vh;
            margin: 0;
            padding: 0;
            background: transparent;
            border-radius: 0;
          }
        }
        .phone__screen {
          overflow: hidden;
          position: relative;
          width: 100%;
          height: 100%;
          background-color: #525A75;
        }
        .phone__scroll-cont {
          overflow-y: auto;
          position: absolute;
          left: 0;
          top: -21px;
          width: calc(100% + 15px);
          height: calc(100% + 42px);
          padding: 21px 0;
        }
        @media (max-width: 480px) {
          .phone__scroll-cont {
            width: 100%;
            height: 100%;
          }
        }
        .phone__content {
          position: relative;
          padding-top: 30px;
        }
        
        .card {
          z-index: 1;
          position: relative;
          width: 90%;
          height: 160px;
          margin-left: 18px;
          margin-bottom: 15px;
          perspective: 2000px;
          transition: margin 0.4s 0.1s;
        }
        .card.active {
          transition: margin 0.4s;
        }
        .card.flip-step1 {
          margin-bottom: 175px;
        }
        .card.flip-step2 {
          margin-bottom: 245px;
        }
        .card.flip-step3 {
          margin-bottom: 330px;
        }
        .card.req-active1 {
          transition: margin 0.6s cubic-bezier(0.77, 0.03, 0.83, 0.67);
          margin-bottom: 55px;
        }
        .card.req-active2 {
          transition: margin 0.6s cubic-bezier(0.31, 0.14, 0.48, 1.52);
          margin-bottom: 477px;
        }
        .card.req-closing1 {
          transition: margin 0.5s;
          margin-bottom: 175px;
        }
        .card.req-closing2 {
          transition: margin 0.5s;
          margin-bottom: 15px;
        }
        .card.hidden-hack .card__part-2 > .m--front {
          display: none;
        }
        .card.no-transition {
          transition: all 0s 0s !important;
        }
        .card.no-transition * {
          transition: all 0s 0s !important;
        }
        .card.theme-purple .card__face__colored-side {
          background: #BA68C8;
        }
        .card.theme-purple .card__face__path {
          background: repeating-linear-gradient(#BA68C8, #BA68C8 3px, transparent 3px, transparent 6px);
          border-color: #BA68C8;
        }
        .card.theme-purple .card__header {
          background: #BA68C8;
        }
        .card.theme-purple .card__sender__rating__star {
          color: #BA68C8;
        }
        .card.theme-purple .card__path-big {
          background: repeating-linear-gradient(#BA68C8, #BA68C8 3px, transparent 3px, transparent 6px);
          border-color: #BA68C8;
        }
        .card.theme-green .card__face__colored-side {
          background: #52A43A;
        }
        .card.theme-green .card__face__path {
          background: repeating-linear-gradient(#52A43A, #52A43A 3px, transparent 3px, transparent 6px);
          border-color: #52A43A;
        }
        .card.theme-green .card__header {
          background: #52A43A;
        }
        .card.theme-green .card__sender__rating__star {
          color: #52A43A;
        }
        .card.theme-green .card__path-big {
          background: repeating-linear-gradient(#52A43A, #52A43A 3px, transparent 3px, transparent 6px);
          border-color: #52A43A;
        }
        .card.theme-orange .card__face__colored-side {
          background: #F7AA17;
        }
        .card.theme-orange .card__face__path {
          background: repeating-linear-gradient(#F7AA17, #F7AA17 3px, transparent 3px, transparent 6px);
          border-color: #F7AA17;
        }
        .card.theme-orange .card__header {
          background: #F7AA17;
        }
        .card.theme-orange .card__sender__rating__star {
          color: #F7AA17;
        }
        .card.theme-orange .card__path-big {
          background: repeating-linear-gradient(#F7AA17, #F7AA17 3px, transparent 3px, transparent 6px);
          border-color: #F7AA17;
        }
        .card.theme-red .card__face__colored-side {
          background: #EF5350;
        }
        .card.theme-red .card__face__path {
          background: repeating-linear-gradient(#EF5350, #EF5350 3px, transparent 3px, transparent 6px);
          border-color: #EF5350;
        }
        .card.theme-red .card__header {
          background: #EF5350;
        }
        .card.theme-red .card__sender__rating__star {
          color: #EF5350;
        }
        .card.theme-red .card__path-big {
          background: repeating-linear-gradient(#EF5350, #EF5350 3px, transparent 3px, transparent 6px);
          border-color: #EF5350;
        }
        .card__part {
          z-index: 1;
          position: absolute;
          left: 0;
          width: 100%;
          border-radius: 11px;
          transform-origin: 50% 0;
          transform-style: preserve-3d;
        }
        .card__part__side {
          z-index: 1;
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          border-radius: inherit;
          background: #fff;
          -webkit-backface-visibility: hidden;
                  backface-visibility: hidden;
          transform-style: preserve-3d;
        }
        .card__part__side.m--back {
          transform: rotateX(180deg);
        }
        .card__part__side.m--front {
          background: #fff;
        }
        .card__part-1 {
          top: 0;
          height: 100%;
          transition: all 0.25s;
          transform: translateZ(-3px);
        }
        .card.flip-step1 .card__part-1 {
          border-bottom-right-radius: 0;
          border-bottom-left-radius: 0;
          transform: translateZ(0);
        }
        .card.req-closing2 .card__part-1 {
          border-radius: 11px;
        }
        .card__part-2 {
          z-index: 6;
          top: 100%;
          height: 100%;
          transform: rotateX(179deg) translateZ(3px);
          transition: transform 0.5s ease-out, border-radius 0.25s;
        }
        .card__part-2 > .m--back {
          overflow: hidden;
          cursor: pointer;
        }
        .card.flip-step1 .card__part-2 {
          transform: translateZ(0);
          border-radius: 0;
        }
        .card.req-active1 .card__part-2 {
          transition: transform 0.6s;
          transform: translate3d(0, -120px, 0);
        }
        .card.req-active2 .card__part-2 {
          transition: transform 0.6s cubic-bezier(0.61, 0.14, 0.18, 1.52);
          transform: translate3d(0, 140px, 0);
        }
        .card.req-closing1 .card__part-2 {
          transition: transform 0.5s;
          transform: translate3d(0, 0, 0);
        }
        .card.req-closing2 .card__part-2 {
          transition: transform, border-radius;
          transition-duration: 0.5s;
          transform: rotateX(179deg) translateZ(3px);
          border-radius: 11px;
        }
        .card__part-3 {
          top: 100%;
          height: 70px;
          transform: rotateX(179deg) translateZ(-3px);
          transition: transform 0.5s, border-radius 0s 0.5s;
        }
        .card__part-3 > .m--back {
          background: #F7EFF7;
        }
        .card.flip-step2 .card__part-3 {
          transition: transform 0.5s, border-radius 0s 0s;
          border-radius: 0;
          transform: translateZ(0);
        }
        .card.req-active1 .card__part-3 {
          transition: transform, height;
          transition-duration: 0.6s;
          transform: translate3d(0, -70px, 0);
          height: 0;
        }
        .card.req-active2 .card__part-3 {
          transition: transform, height;
          transition-duration: 0.6s;
          transform: translate3d(0, 0, 0);
          height: 75px;
.........完整代码请登录后点击上方下载按钮下载查看