Hadi1989

Untitled

Aug 17th, 2022
775
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 2.70 KB | None | 0 0
  1. body {
  2.     font-family: 'Teko';
  3.     display: flex;
  4.     align-items: center;
  5.     justify-content: center;
  6.     flex-direction: column;
  7.     height: 100%;
  8.     padding: 0;
  9.     margin: 0;
  10.     font-size: 2em;
  11.     box-sizing: border-box;
  12.     background: linear-gradient(90deg, #1D976C 0%, #93F9B9 100%);
  13.     color: #fff;
  14.   }
  15.    
  16.   html {
  17.     box-sizing: border-box;
  18.     height: 100%;
  19.   }
  20.    
  21.   small {
  22.     opacity: .4;
  23.   }
  24.    
  25.   h1 {
  26.     color: #fff;
  27.     text-shadow: 2px 2px 2px rgb(0, 0, 0, 0.6);
  28.     text-align: center;
  29.     margin-bottom: 0;
  30.   }
  31.    
  32.   .pacman {
  33.     position: relative;
  34.     margin-bottom: 15px;
  35.   }
  36.   .pacman > div:nth-child(2) {
  37.     animation: balls 1s -0.99s infinite linear;
  38.   }
  39.   .pacman > div:nth-child(3) {
  40.     animation: balls 1s -0.66s infinite linear;
  41.   }
  42.   .pacman > div:nth-child(4) {
  43.     animation: balls 1s -0.33s infinite linear;
  44.   }
  45.   .pacman > div:nth-child(5) {
  46.     animation: balls 1s 0s infinite linear;
  47.   }
  48.   .pacman > div:nth-child(1) {
  49.     width: 0px;
  50.     height: 0px;
  51.     border: 80px solid #fff;
  52.     border-right: 80px solid transparent;
  53.     border-radius: 80px;
  54.     animation: rotate_pacman_half_up 0.5s 0s infinite;
  55.     position: relative;
  56.     left: -60px;
  57.   }
  58.   .pacman > div:nth-child(2) {
  59.     width: 0px;
  60.     height: 0px;
  61.     border: 80px solid #fff;
  62.     border-right: 80px solid transparent;
  63.     border-radius: 80px;
  64.     animation: rotate_pacman_half_down 0.5s 0s infinite;
  65.     margin-top: -160px;
  66.     position: relative;
  67.     left: -60px;
  68.   }
  69.   .pacman > div:nth-child(3),
  70.   .pacman > div:nth-child(4),
  71.   .pacman > div:nth-child(5),
  72.   .pacman > div:nth-child(6) {
  73.     background-color: #fff;
  74.     border-radius: 100%;
  75.     margin: 2px;
  76.     width: 20px;
  77.     height: 20px;
  78.     position: absolute;
  79.     top: 70px;
  80.     left: 200px;
  81.   }
  82.    
  83.   @keyframes rotate_pacman_half_up {
  84.     0% { transform: rotate(270deg); }
  85.     50% { transform: rotate(360deg); }
  86.     100% { transform: rotate(270deg); }
  87.   }
  88.    
  89.   @keyframes rotate_pacman_half_down {
  90.     0% { transform: rotate(90deg); }
  91.     50% { transform: rotate(0deg); }
  92.     100% { transform: rotate(90deg); }
  93.   }
  94.    
  95.   @keyframes balls {
  96.     75% { opacity: 0.7; }
  97.     100% { transform: translate(-150px, 0); }
  98.   }
Advertisement
Add Comment
Please, Sign In to add comment