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: repeati.........完整代码请登录后点击上方下载按钮下载查看