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

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

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