Advertisement
Gilpow

Untitled

Nov 28th, 2021
1,405
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 3.07 KB | None | 0 0
  1. body {
  2.    height:100vh;
  3.    width:100vw;
  4.    margin:0;
  5.    padding:0; background-image:url("https://t3.ftcdn.net/jpg/01/95/18/22/360_F_195182233_zED77MP68mpLr2424niMl92e4qEuKxF9.jpg.");
  6.     background-size:100% 100%;
  7.     background-repeat:no-repeat;
  8.     display:flex;
  9.     align-items:center;
  10.     justify-content:center;
  11.     background-color:#000;
  12.     flex-direction:column;
  13. }
  14. .container{
  15.     font-weight:bold;
  16.     font-size:larger;
  17.     height:150px;
  18.     width:100vw;
  19.     display:flex;
  20.     align-items:center;
  21.     justify-content:center;
  22.     text-shadow:2px 2px 4px #757575;
  23.     color:#fff;
  24. }
  25. div span:nth-child(1){
  26.     font-size:xx-large;
  27.     animation:one 3.2s linear 3;
  28. }
  29. @keyframes one{
  30.     0%{
  31.         margin-top:0px;
  32.     }
  33.     20%{
  34.         margin-bottom:50px;
  35.     }
  36.     40%{
  37.         margin-top:0px;
  38.     }
  39.     60%{
  40.         margin-top:50px;
  41.     }
  42. }
  43. div span:nth-child(2){
  44.     font-size:xx-large;
  45.     animation:two 3s linear 2;
  46. }
  47. div span:nth-child(3){
  48.     font-size:xx-large;
  49.     animation:one 5s linear 2;
  50. }
  51. div span:nth-child(4){
  52.     font-size:xx-large;
  53.     animation:two 3s linear 2;
  54. }
  55. div span:nth-child(5){
  56.     font-size:xx-large;
  57.     animation:one 4.5s linear 2;
  58. }
  59. div span:nth-child(6){
  60.     font-size:xx-large;
  61.     padding-right:4%;
  62.     animation:two 3s linear 2;
  63. }
  64. div span:nth-child(7){
  65.     font-size:xx-large;
  66.     animation:two 3.5s linear 2;
  67. }
  68. div span:nth-child(8){
  69.     font-size:xx-large;
  70.     animation:one 4.2s linear 2;
  71. }
  72. div span:nth-child(9){
  73.     font-size:xx-large;
  74.     animation:two 2.3s linear 2;
  75. }
  76. div span:nth-child(10){
  77.     font-size:xx-large;
  78.     animation:one 3s linear 2;
  79. }
  80. div span:nth-child(11){
  81.     font-size:xx-large;
  82.     animation:one 3.8s linear 2;
  83. }
  84. div span:nth-child(12){
  85.     font-size:xx-large;
  86.     animation:two 4.3s linear 2;
  87. }
  88. div span:nth-child(13){
  89.     font-size:xx-large;
  90.     animation:one 4.5s linear 2;
  91. }
  92. div span:nth-child(14){
  93.     font-size:xx-large;
  94.     animation:two 3s linear 2;
  95. }
  96. div span:nth-child(15){
  97.     font-size:xx-large;
  98.     animation:one 3s linear 2;
  99. }
  100. div span:nth-child(16){
  101.     padding-left: 3%;
  102.     font-size:xx-large;
  103.     animation:one 3.5s linear 2;
  104. }
  105. div span:nth-child(17){
  106.     font-size:xx-large;
  107.     animation:one 4s linear 2;
  108. }
  109. div span:nth-child(18){
  110.     font-size:xx-large;
  111.     animation:one 3s linear 2;
  112. }
  113. @keyframes two{
  114.     0%{
  115.         margin-top:0px;
  116.     }
  117.     20%{
  118.         margin-top:50px;
  119.     }
  120.     40%{
  121.         margin-top:0px;
  122.     }
  123.     60%{
  124.         margin-bottom:50px;
  125.     }
  126. }
  127. span{
  128.     font-family:"Cairo";
  129. }
  130. .balloon{
  131.     position:fixed;
  132.     bottom:0px;
  133. }
  134. .balloon img:nth-child(1){
  135.     position:fixed;
  136.     animation:bal 8s linear infinite;
  137.     left:10px;
  138. }
  139. .balloon img:nth-child(2){
  140.     position:fixed;
  141.     left:45vw;
  142.     animation:bal 8s linear infinite;
  143.     animation-delay:6s;
  144. }
  145. .balloon img:nth-child(3){
  146.     position:fixed;
  147.     animation:bal 7s linear infinite;
  148.     right:5vw;
  149.     animation-delay:3s;
  150. }
  151. @keyframes bal{
  152.     from{
  153.         bottom:-30px;
  154.     }
  155.     to{
  156.         bottom:100vh;
  157.     }
  158. }
  159.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement