tailwindcss布局实现航空飞机票电子票效果代码-html代码-BFW代码库

代码语言：html

代码描述：tailwindcss布局实现航空飞机票电子票效果代码

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

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

<head>
  <meta charset="UTF-8">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tailwindcss.3.4.3.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
  
  
  
<style>
body::before{
    /* create a movie effect with the background image by moving it around "randomly" */
    animation: movie 120s linear infinite;
}

@keyframes movie {
    0%,100%{
        scale: 2;
        transform: translateX(0);
    }
    30%{
       transform: translate(100px,100px);
    }
     60%{
       transform: translate(40px,150px);
    }
    80%{
        transform: translateX(-100px,-50px);
    }
}

.animate-in {
    --speed: 500ms;
    opacity: 0;
    transform-origin: center;
    animation: bounceIn var(--speed,300ms) forwards;
    animation-delay: var(--d, 0ms);
}
@keyframes bounceIn {
   0% { opacity: 0;}
   100% {  opacity: 1;}
}

#plane-1{
    translate: -180px 0;
    opacity: 0;
    animation: fly-in 1000ms  ease-out forwards;
    animation-delay: var(--d, 0ms);

}
@keyframes fly-in {
    0%{ translate: -180px 0; opacity:1;}
    100%{ translate: 0; opacity:1;}
}

main{
    --r: 10px;
    --bg: #ECFEFF;
}

/* cutouts between boarding pass and stub */
main>div:first-child {
    background:
        radial-gradient(circle var(--r) at bottom left, #0000 98%, var(--bg)) bottom left,
        radial-gradient(circle var(--r) at bottom right, #0000 98%, var(--bg)) bottom right;
    background-size: 51% 100%;
    background-repeat: no-repeat;
    
}

main>div:last-child {
    background:
        radial-gradient(circle var(--r) at top left, #0000 98%, var(--bg)) top left,
        radial-gradient(circle var(--r) at top right, #0000 98%, var(--bg)) top right;
    background-size: 51% 100%;
    background-repeat: no-repeat;
}

main>div:first-child::before {
    content: '';
    position: absolute;
    border: 2px dashed #DDD;
    bottom: -1px;
    left: calc( var(--r) * 3) ;
    width: calc(100% - var(--r) * 6);
    height: 0;
}

/* 640px is the Tailwind breakpoint for "sm" */
@media (min-width: 640px) {
    main>div:first-child {
        background:
            radial-gradient(circle var(--r) at top right, #0000 98%, var(--bg)) top right,
            radial-gradient(circle var(--r) at bottom right, #0000 98%, var(--bg)) bottom right;
        background-size: 100% 51%;
        background-repeat: no-repeat;
    }

    main>div:last-child {
        background:
            radial-gradient(circle var(--r) at top left, #0000 98%, var(--bg)) top left,
            radial-gradient(circle var(--r) at bottom left, #0000 98%, var(--bg)) bottom left;
        background-size: 100% 51%;
        background-repeat: no-repeat;
    }

    main>div:first-child::before{
        top: calc(var(--r) * 3);
        right: -1px;
        bottom: auto;
        left: auto;
        height: calc(100% - var(--r) * 6);
        width:0;
    }
}
</style>



  
  
</head>

  <body class="bg-white flex justify-center items-center min-h-screen px-4
        before:bg-[url('//repo.bfw.wiki/bfwrepo/image/5edc742622ed4.png')]
        before:inset-0
        before:m-auto
        before:fixed
        before:opacity-30
        before:bg-cover
        before:bg-center
        before:-z-10
    ">
        
        <main class=" text-gray-400 font-thin  w-full max-w-sm sm:max-w-4xl grid sm:grid-cols-[4fr_1fr] ">
            
            <!-- boarding pass -->
            <div class="py-6 px-6 sm:px-10 space-y-6 sm:space-y-12  relative ">
               <section class="w-full grid grid-cols-3 gap-x-4 sm:px-8 isolate overflow-hidden
                    [&>*]:grid
                    [&>*]:place-content-center
                    [&_h2]:text-4xl
                    [&_h2]:bg-cyan-50
                    sm:[&_h2]:text-6xl
                    [&_h2]:font-bold
                    [&_h2]:z-10
                    [&_h2]:text-cyan-400
                    [&_h2]:uppercase
                    [&_div]:relative
                    [&_div]:flex
                    [&_div]:items-center
                    [&_div]:gap-2
                    before:[&_div]:absolute
                    before:[&_div]:w-full
                    before:[&_div]:h-px
                    before:[&_div]:-z-20
                    before:[&_div]:bg-gray-300                  
                    [&_span]:text-4xl
                    [&_span]:rotate-90
                    [&>p]:text-gray-400
                    [&>p]:font-thin
                ">
                    <h2 class="animate-in" style="--d:500ms">BUD</h2>
                    <div><span id="plane-1" style="--d:2000ms" class="material-symbols-outlined bg-cyan-50 px-4 -z-10">flight</span></div>
                    <h2 class="animate-in" style="--d:1000ms">HEL</h2>
                    <p class="animate-in" style="--d:500ms">Budapest</p>
                    <span></span>
                   <p class="animate-in" style="--d:1000ms">Helsinku</p>

                </section>

                <section class="grid grid-cols-2 sm:grid-cols-4 gap-4 py-3 px-6 bg-cyan-100 font-thin whitespace-nowrap text-sm sm:text-base 
                    [&>*]:border-X
                    [&_time]:font-bold
                    [&_time]:text-cyan-400
                ">
                    <div class="animate-in-X" style="--d:1200ms">
                        <h3>Departure</h3>
                        <time>16:25</time>
                    </div>
                    <div class="animate-in-X" style="--d:1500ms">
                        <h3>Arrival</h3>
                        <time>21:40</time>
                    </div>
                    <div class="animate-in-X" style="--d:1800ms">
                        <h3>Seat</h3>
                        <time>54B</time>
                    </div>
                    <div class="animate-in-X" style="--d:2100ms">
                        <h3>Ticket No.</h3>
                        <time>FF346Y</time>
                    </div>
                </section>

                <p class="text-xs">Lorem ipsum dolor sit amet consectetur <strong>adipisicing elit</strong>. Expedita libero mollitia ipsam corrupti <strong>consequuntur</strong> cum magnam eius officia pariatur esse distinctio deleniti eveniet numquam adipisci quasi natus <strong>neque quos</strong>.</p>
            </div>
        
            <!-- stub -->
            <div class="grid place-content-center p-0">
                <div class="py-6 sm:py-0 sm:-rotate-90 w-full grid place-content-center gap-4 ">
                    <section class="w-full grid grid-cols-3 gap-x-2 px-4 
                        [&>*]:grid
                        [&>*]:place-content-center
                        [&_h2]:text-3xl
                        [&_h2]:font-bold
                        [&_h2]:text-cyan-400
                        [&_h2]:uppercase
                        [&_div]:relative
                        [&_div]:flex
                        [&_div]:items-center
                        [&_div]:gap-2
                        before:[&_div]:block
                        before:[&_div]:w-full
                        before:[&_div]:h-px
                        before:[&_div]:bg-gray-300
                        after:[&_div]:block
                        after:[&_.........完整代码请登录后点击上方下载按钮下载查看