daily pastebin goal
84%
SHARE
TWEET

Untitled

a guest Oct 11th, 2018 68 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <div class="lod">
  2.   <ul>
  3.     <li></li>
  4.     <li></li>
  5.     <li></li>
  6.     <li></li>
  7.     <li></li>
  8.     <li></li>
  9.     <li></li>
  10.     <li></li>
  11.     <li></li>
  12.     <li></li>
  13.     <li></li>
  14.     <li></li>
  15.     <li></li>
  16.     <li></li>
  17.     <li></li>
  18.     <li></li>
  19.     <li></li>
  20.     <li></li>
  21.     <li></li>
  22.     <li></li>
  23.     <li></li>
  24.     <li></li>
  25.     <li></li>
  26.     <li></li>
  27.     <li></li>
  28.   </ul>
  29. </div>
  30. <style>
  31.   body {
  32.     display: flex;
  33.     height: 100%;
  34.     justify-content: center;
  35.     align-items: center;
  36.     align-height: center;
  37.     background: #212121;
  38.   }
  39.  
  40.   .lod {
  41.     width: auto;
  42.     height: auto;
  43.   }
  44.  
  45.   ul {
  46.     display: grid;
  47.     grid-template-columns: repeat(5, 1fr);
  48.     -webkit-animation: rot 16s linear infinite;
  49.     animation: rot 16s linear infinite;
  50.   }
  51.  
  52.   @-webkit-keyframes rot {
  53.     100% {
  54.       -webkit-transform: rotate(360deg);
  55.       transform: rotate(360deg);
  56.     }
  57.   }
  58.  
  59.   @keyframes rot {
  60.     100% {
  61.       -webkit-transform: rotate(360deg);
  62.       transform: rotate(360deg);
  63.     }
  64.   }
  65.  
  66.   li {
  67.     width: 40px;
  68.     height: 40px;
  69.     background: #651fff;
  70.     border-radius: 4px;
  71.     box-shadow: 0 0 1px #fff, 0 0 5px #651fff, 0 0 10px #651fff, 0 0 15px #651fff, 0 0 25px #651fff, 0 0 55px #651fff;
  72.     -webkit-animation: scale 0.8s linear alternate infinite;
  73.     animation: scale 0.8s linear alternate infinite;
  74.   }
  75.  
  76.   @-webkit-keyframes scale {
  77.     100% {
  78.       -webkit-transform: scale(0.1);
  79.       transform: scale(0.1);
  80.       opacity: 0;
  81.     }
  82.   }
  83.  
  84.   @keyframes scale {
  85.     100% {
  86.       -webkit-transform: scale(0.1);
  87.       transform: scale(0.1);
  88.       opacity: 0;
  89.     }
  90.   }
  91.  
  92.   li:nth-child(1) {
  93.     z-index: 24;
  94.   }
  95.  
  96.   li:nth-child(2) {
  97.     z-index: 23;
  98.   }
  99.  
  100.   li:nth-child(3) {
  101.     z-index: 22;
  102.   }
  103.  
  104.   li:nth-child(4) {
  105.     z-index: 21;
  106.   }
  107.  
  108.   li:nth-child(5) {
  109.     z-index: 20;
  110.   }
  111.  
  112.   li:nth-child(6) {
  113.     z-index: 19;
  114.   }
  115.  
  116.   li:nth-child(7) {
  117.     z-index: 18;
  118.   }
  119.  
  120.   li:nth-child(8) {
  121.     z-index: 17;
  122.   }
  123.  
  124.   li:nth-child(9) {
  125.     z-index: 16;
  126.   }
  127.  
  128.   li:nth-child(10) {
  129.     z-index: 15;
  130.   }
  131.  
  132.   li:nth-child(11) {
  133.     z-index: 14;
  134.   }
  135.  
  136.   li:nth-child(12) {
  137.     z-index: 13;
  138.   }
  139.  
  140.   li:nth-child(13) {
  141.     z-index: 12;
  142.   }
  143.  
  144.   li:nth-child(14) {
  145.     z-index: 11;
  146.   }
  147.  
  148.   li:nth-child(15) {
  149.     z-index: 10;
  150.   }
  151.  
  152.   li:nth-child(16) {
  153.     z-index: 9;
  154.   }
  155.  
  156.   li:nth-child(17) {
  157.     z-index: 8;
  158.   }
  159.  
  160.   li:nth-child(18) {
  161.     z-index: 7;
  162.   }
  163.  
  164.   li:nth-child(19) {
  165.     z-index: 6;
  166.   }
  167.  
  168.   li:nth-child(20) {
  169.     z-index: 5;
  170.   }
  171.  
  172.   li:nth-child(21) {
  173.     z-index: 4;
  174.   }
  175.  
  176.   li:nth-child(22) {
  177.     z-index: 3;
  178.   }
  179.  
  180.   li:nth-child(23) {
  181.     z-index: 2;
  182.   }
  183.  
  184.   li:nth-child(24) {
  185.     z-index: 1;
  186.   }
  187.  
  188.   li:nth-child(25) {
  189.     z-index: 0;
  190.   }
  191.  
  192.   li:nth-child(1) {
  193.     -webkit-animation-delay: 0.1s;
  194.     animation-delay: 0.1s;
  195.   }
  196.  
  197.   li:nth-child(7) {
  198.     -webkit-animation-delay: 0.3s;
  199.     animation-delay: 0.3s;
  200.   }
  201.  
  202.   li:nth-child(13) {
  203.     -webkit-animation-delay: 0.5s;
  204.     animation-delay: 0.5s;
  205.   }
  206.  
  207.   li:nth-child(19) {
  208.     -webkit-animation-delay: 0.7s;
  209.     animation-delay: 0.7s;
  210.   }
  211.  
  212.   li:nth-child(24) {
  213.     -webkit-animation-delay: 0.9s;
  214.     animation-delay: 0.9s;
  215.   }
  216.  
  217.   li:nth-child(2) {
  218.     -webkit-animation-delay: 0.2s;
  219.     animation-delay: 0.2s;
  220.   }
  221.  
  222.   li:nth-child(8) {
  223.     -webkit-animation-delay: 0.4s;
  224.     animation-delay: 0.4s;
  225.   }
  226.  
  227.   li:nth-child(14) {
  228.     -webkit-animation-delay: 0.6s;
  229.     animation-delay: 0.6s;
  230.   }
  231.  
  232.   li:nth-child(20) {
  233.     -webkit-animation-delay: 0.8s;
  234.     animation-delay: 0.8s;
  235.   }
  236.  
  237.   li:nth-child(3) {
  238.     -webkit-animation-delay: 0.3s;
  239.     animation-delay: 0.3s;
  240.   }
  241.  
  242.   li:nth-child(9) {
  243.     -webkit-animation-delay: 0.5s;
  244.     animation-delay: 0.5s;
  245.   }
  246.  
  247.   li:nth-child(15) {
  248.     -webkit-animation-delay: 0.7s;
  249.     animation-delay: 0.7s;
  250.   }
  251.  
  252.   li:nth-child(4) {
  253.     -webkit-animation-delay: 0.4s;
  254.     animation-delay: 0.4s;
  255.   }
  256.  
  257.   li:nth-child(10) {
  258.     -webkit-animation-delay: 0.6s;
  259.     animation-delay: 0.6s;
  260.   }
  261.  
  262.   li:nth-child(5) {
  263.     -webkit-animation-delay: 0.5s;
  264.     animation-delay: 0.5s;
  265.   }
  266.  
  267.   li:nth-child(1) {
  268.     -webkit-animation-delay: 0.1s;
  269.     animation-delay: 0.1s;
  270.   }
  271.  
  272.   li:nth-child(6) {
  273.     -webkit-animation-delay: 0.2s;
  274.     animation-delay: 0.2s;
  275.   }
  276.  
  277.   li:nth-child(11) {
  278.     -webkit-animation-delay: 0.3s;
  279.     animation-delay: 0.3s;
  280.   }
  281.  
  282.   li:nth-child(16) {
  283.     -webkit-animation-delay: 0.4s;
  284.     animation-delay: 0.4s;
  285.   }
  286.  
  287.   li:nth-child(21) {
  288.     -webkit-animation-delay: 0.5s;
  289.     animation-delay: 0.5s;
  290.   }
  291.  
  292.   li:nth-child(7) {
  293.     -webkit-animation-delay: 0.3s;
  294.     animation-delay: 0.3s;
  295.   }
  296.  
  297.   li:nth-child(12) {
  298.     -webkit-animation-delay: 0.4s;
  299.     animation-delay: 0.4s;
  300.   }
  301.  
  302.   li:nth-child(17) {
  303.     -webkit-animation-delay: 0.5s;
  304.     animation-delay: 0.5s;
  305.   }
  306.  
  307.   li:nth-child(22) {
  308.     -webkit-animation-delay: 0.6s;
  309.     animation-delay: 0.6s;
  310.   }
  311.  
  312.   li:nth-child(13) {
  313.     -webkit-animation-delay: 0.5s;
  314.     animation-delay: 0.5s;
  315.   }
  316.  
  317.   li:nth-child(18) {
  318.     -webkit-animation-delay: 0.6s;
  319.     animation-delay: 0.6s;
  320.   }
  321.  
  322.   li:nth-child(23) {
  323.     -webkit-animation-delay: 0.7s;
  324.     animation-delay: 0.7s;
  325.   }
  326.  
  327.   li:nth-child(19) {
  328.     -webkit-animation-delay: 0.7s;
  329.     animation-delay: 0.7s;
  330.   }
  331.  
  332.   li:nth-child(24) {
  333.     -webkit-animation-delay: 0.8s;
  334.     animation-delay: 0.8s;
  335.   }
  336.  
  337.   li:nth-child(25) {
  338.     -webkit-animation-delay: 0.9s;
  339.     animation-delay: 0.9s;
  340.   }
  341. </style>
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