Ticket Making Animation

<!DOCtype html>
<html>
<style>
  * {
    box-sizing: border-box;
  }
  
  body,
  html {
    height: 100%;
    display: grid;
    background-color: #aaa;
  }
  
  .ticket-machine {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translatex(-50%);
    width: 600px;
    height: 90px;
    background-color: #0af;
    border: 2px solid #000;
    border-top: 0;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    box-shadow: 5px 4px 0 3.5px #00c, 6px 5px 0 4.5px #000;
  }
  
  .slot-wrapper {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translatex(-60%);
    width: 360px;
    height: 40px;
    margin: auto;
    background-color: #ffe;
    border: 2px solid #000;
    border-radius: 20px;
    box-shadow: 2px 2px #ffa, 3px 3px #000;
  }
  
  #printer-slot {
    position: absolute;
    top: 18px;
    left: 50%;
    transform: translatex(-46%);
    width: 260px;
    height: 2px;
    background-color: #000;
  }
  
  .wrapper {
    position: relative;
    top: -730px;
    left: 50%;
    transform: translatex(-60%);
    width: 250px;
    display: none;
    transition-duration: 5s;
  }
  
  .ticket {
    display: grid;
    grid: auto;
    grid-gap: 1em;
    width: 250px;
    margin: auto;
    padding: 1em;
    background-color: #fff;
    border: 1px solid black;
    border-radius: 10px;
  }
  
  .ticket>.basic {
    width: 100%;
    border-radius: 5px;
    background-color: #f00;
    color: #fff;
  }
  
  .ticket>.destination {
    width: 100%;
    line-height: 0.1;
    background-color: #fa0;
    border-radius: 5px;
  }
  
  .ticket>.airline {
    width: 100%;
    line-height: 0.1;
    background-color: #0f0;
    border-radius: 5px;
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    text-align: center;
  }
  
  .row {
    width: 100%;
  }
  
  .column {
    float: left;
    width: 50%;
  }
  
  h1 {
    color: #fff;
    text-align: center;
    -webkit-text-stroke: 1px #f00;
  }
  
  h2 {
    -webkit-text-stroke: 1px #fa0;
    text-align: center;
  }
  
  h3 {
    text-align: center;
  }
  
  span {
    color: #0a0;
    font-size: 16px;
    -webkit-text-stroke: 1px #fff;
  }
  
  .dest {
    color: #fa0;
    font-size: 22px;
    -webkit-text-stroke: 1px #fff;
  }
  
  .ticket-cover {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translatex(-60%);
    width: 260px;
    height: 20px;
    background-color: #ffe;
    border-top: 2px solid #000;
    border-bottom: 2px solid #000;
  }
  
  #btn {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 130px;
    padding: 5px 10px;
    background: linear-gradient(#0c0, #0a0);
    border: 5px outset #070;
    border-radius: 18px;
    color: #fff;
    font-weight: 700;
    animation-name: flash;
    animation-duration: 0.3s;
    animation-iteration-count: infinite;
  }
  
  @keyframes flash {
    from {
      background: linear-gradient(#0c0, #0a0);
      border-color: #070;
    }
    to {
      background: linear-gradient(#0e0, #0c0);
      border-color: #0c0;
    }
  }
  
  #btn:active {
    border-width: 3px;
    transform: translate(-1px, -1px);
  }
</style>

<body>
  <div class="ticket-machine">
    <button id="btn">PRINT TICKET</button>
  </div>
  <div class="slot-wrapper">
    <div id="printer-slot"></div>
  </div>
  <div class="wrapper">
    <div class="ticket">
      <div class="ticket basic">
        <h2>Devansh Mishra</h2>
      </div>

      <div class="ticket destination">
        <h1>Kashi Exp.<span>➤</span> <span> </span> <span class="dest"> </span></h1>
      </div>
      <div class="ticket railways">
        <div class="row">
          <div class="column">
            
            <hr>
            <p>From Phulpur Jn to Gorakhpur</p>
            <p>Time:10:25 a.m.</p>
            <hr>
            <p>Seat: </p>
            <p>S14 33 LB </p>
          </div>
          <div class="column">
            <p>Train</p>
            <p>6 Dec 2022</p>
            <hr>
            
            
            <p>PNR No. </p>
            <p>1234567890
Price: 220 Rs Only </p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="ticket-cover">

  </div>
  <script>
    const tick = document.querySelector(".wrapper");

    btn.onclick = function()
    {
      if (tick.style.top == "10px")
      {
        tick.style.display = "none";
        tick.style.top = "-730px";
        btn.style.animationPlayState = "running";
        btn.innerHTML = "PRINT TICKET";
      }
      else
      {
        tick.style.display = "block";
        setTimeout(continueFunction, 100);
      }
    };

    function continueFunction()
    {
      tick.style.top = "10px";
      btn.style.animationPlayState = "paused";
      btn.innerHTML = "TAKE TICKET";
      setTimeout(restartAnimation, 5000);
    }

    function restartAnimation()
    {
      btn.style.animationPlayState = "running";
    }
  </script>

</body>

</html>

Comments

Post a Comment

Popular posts from this blog

SWAG ANIMATION WITH SOUND

<!DOCtype html> <html> <style>   /*********************/      *,   *::after,   *::before {     margin: 0;     padding: 0;     box-sizing: border-box;     user-select: none;     outline: none;     appearance: none;     transform-style: preserve-3d;     -webkit-tap-highlight-color: transparent;   }   /***********************/   /***********************/      body {     display: flex;     justify-content: center;     align-items: center;     height: 100vh;     width: 100%;     overflow: hidden;     font-family: "Molle", cursive;     background-color: #7e8181;     color: #ffffff;   }   /**/      .svgs {     position: absolute;     left: 50%;     bottom: 6vmin;     transform: translat...
Read more

Chandrayan 3 Mission Special :Animation

<!--   Creator : Devansh Mishra          --> <!doctype html> <html>    <head>      <style> .full {     animation: full 2s linear 40s 1;     animation-fill-mode: forwards; } @keyframes full {     100% {         opacity: 0     } } h2 {     font-size: 30px;     color: mediumseagreen;     font-family: tahoma;     opacity: 0;     animation: ro 2s linear 50s 1;     animation-fill-mode: forwards;     text-align: center;     z-index: 10; } .rover {     width: 400px;     height: 480px;     position: absolute;     background-image: linear-gradient(to top, #eee2e2 0, #e3c09d 15%, #2f2f3a 90%);     margin: auto;     top: -500px;     left: 0;     bottom: 0;     right: 0;     ...
Read more

Python Basic Programs By Devansh Mishra.

Basic programs are given of python which is very useful for Python Beginner's.  1.Hello World print("Hello World") 2.Square Root  number = int(input("enter a number: ")) sqrt = number ** 0.5 print("square root:", sqrt) 3. cube Root def cube_root(x):         return x**(1/3) print(cube_root(27)) 4. Fahrenheit to Celsius temp = float(input("Enter temperature in Fahrenheit: ")) celsius = (temp - 32) * 5/9 print(f"{temp} in Fahrenheit is equal to {celsius} in Celsius")   5. Area of Triangle Height = float(input("Enter Height: ")) Base = float(input("Enter Base: ")) ans = (0.5) * Height * Base print("Area Of Triangle", ans) 6. Area of Circle rad = float(input("Enter Radius Of Circle :")) area = 3.14 * rad * rad print("Area of Circle", area) 7. Armstrong Number in Python from math import * number = int(input("Enter the number : ")) result = 0 n = 0 temp = number; while (temp != 0)...
Read more