SHARE
TWEET

Untitled

a guest Oct 21st, 2019 69 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4.   box-sizing: border-box;
  5.   -webkit-font-smoothing: antialiased;
  6.   -moz-osx-font-smoothing: grayscale;
  7. }
  8.  
  9. @font-face {
  10.   font-family: 'pricedown';
  11.   src: url('pricedown.ttf');
  12. }
  13.  
  14. html,
  15. body {
  16.   width: 100%;
  17.   height: 100%;
  18. }
  19.  
  20. .tempBackground {
  21.   position: fixed;
  22.   width: 100%;
  23.   height: 100%;
  24.   background-image: url('bg.png');
  25.   background-repeat: no-repeat;
  26.   background-size: cover;
  27. }
  28.  
  29. .Alert {
  30.   position: relative;
  31.   z-index: 10;
  32.   width: 100%;
  33.   height: 400px;
  34.   color: #ffffff;
  35.   font-family: 'pricedown';
  36. }
  37.  
  38. .Name,
  39. .Number,
  40. .Text {
  41.   position: absolute;
  42.   text-shadow: 0 5px 10px rgba(0, 0, 0, 0.7);
  43. }
  44.  
  45. .Text {
  46.   opacity: 0;
  47. max-width: 174.83px;
  48.   min-width: 174.83px;
  49.   width: 174.83px;
  50.   max-height: 172.52px;
  51.   min-height: 172.52px;
  52.   height: 172.52px;
  53.   left: 10%;
  54.   top: 30%;
  55.   font-size: 100px;
  56.   transform: rotate(-35deg);
  57.   animation: dropIn1 200ms ease forwards, fadeOut 5000ms ease forwards;
  58.   animation-delay: 1000ms;
  59. }
  60.  
  61. .Name {
  62.   font-size: 70px;
  63.   transform: scale(0) translateX(-50%);
  64.   left: 50%;
  65.   top: 20%;
  66.   z-index: 10;
  67.   transform-origin: 0 50%;
  68.   animation: dropIn6 200ms ease forwards;
  69.   animation-delay: 12700ms;
  70. }
  71.  
  72. .Number {
  73.   font-size: 150px;
  74.   transform: scale(0) translateX(-50%);
  75.   left: 50%;
  76.   top: 30%;
  77.   transform-origin: 0 50%;
  78.   animation: slide-in-bck-center 7000ms ease forwards;
  79.   animation-delay: 14000ms;
  80. }
  81.  
  82. .slide-in-bck-center {
  83.     -webkit-animation: slide-in-bck-center 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  84.             animation: slide-in-bck-center 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  85. }
  86.  
  87. @-webkit-keyframes slide-in-bck-center {
  88.   0% {
  89.     -webkit-transform: translateZ(600px) translateX(-50%);
  90.             transform: translateZ(600px) translateX(-50%);
  91.     opacity: 0;
  92.   }
  93.   100% {
  94.     -webkit-transform: translateZ(0) translateX(-50%);
  95.             transform: translateZ(0) translateX(-50%);
  96.     opacity: 1;
  97.   }
  98. }
  99. @keyframes slide-in-bck-center {
  100.   0% {
  101.     -webkit-transform: translateZ(600px) translateX(-50%);
  102.             transform: translateZ(600px) translateX(-50%);
  103.     opacity: 0;
  104.   }
  105.   100% {
  106.     -webkit-transform: translateZ(0) translateX(-50%);
  107.             transform: translateZ(0) translateX(-50%);
  108.     opacity: 1;
  109.   }
  110. }
  111.  
  112.  
  113.  
  114. @keyframes scale-in-center {
  115.   0% {
  116.     -webkit-transform: scale(0) translateX(-50%);
  117.             transform: scale(0) translateX(-50%);
  118.     opacity: 1;
  119.   }
  120.   100% {
  121.     -webkit-transform: scale(1) translateX(-50%);
  122.             transform: scale(1) translateX(-50%);
  123.     opacity: 1;
  124.   }
  125. }
  126.  
  127.  
  128. @keyframes fadeOut {
  129.     0% { opacity: 1;}
  130.     99% { opacity: 0.01;width: 100%; height: 100%;}
  131.     100% { opacity: 0;width: 0; height: 0;}
  132. }
  133.  
  134. @keyframes dropIn1 {
  135.   0% {
  136.     opacity: 0;
  137.     transform: scale(5) rotate(-35deg);
  138.   }
  139.   100% {
  140.     opacity: 1;
  141.     transform: scale(1) rotate(-35deg);
  142.   }
  143. }
  144.  
  145.  
  146. @keyframes scaleUp {
  147.   0% {
  148.     opacity: 0;
  149.     transform: scale(0) translateX(-50%);
  150.   }
  151.   100% {
  152.     opacity: 1;
  153.     transform: scale(1) translateX(-50%);
  154.   }
  155. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top