1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>DoKiDoKi</title> <style> *{ margin: 0; padding: 0; list-style: none; } #Code{ display: flex; align-items: center; justify-content: center; height: 100vh; background-color:#000000; } ul{ height: 200px; } li{ float: left; width: 20px; height: 20px; border-radius: 20px; margin-right: 20px; } li:nth-child(1){ animation: love1 4s infinite; background-color: #f62e2e; } li:nth-child(2){ animation: love2 4s infinite; background-color: #f4304a; animation-delay: 0.15s; } li:nth-child(3){ animation: love3 4s infinite; background-color: #f62e60; animation-delay: 0.30s; } li:nth-child(4){ animation: love4 4s infinite; background-color: #fd2f8f; animation-delay: 0.45s; } li:nth-child(5){ animation: love5 4s infinite; background-color: #ff37cd; animation-delay: 0.60s; } li:nth-child(6){ animation: love4 4s infinite; background-color: #fd2f8f; animation-delay: 0.75s; } li:nth-child(7){ animation: love3 4s infinite; background-color: #f62e60; animation-delay: 0.90s; } li:nth-child(8){ animation: love2 4s infinite; background-color: #f4304a; animation-delay: 1.05s; } li:nth-child(9){ animation: love1 4s infinite; background-color: #f62e2e; animation-delay: 1.05s; } @keyframes love1{ 30%,50%{height: 70px;transform:translateY(-30px);} 70%,100%{height: 20px;transform:translateY(0px);} } @keyframes love2{ 30%,50%{height: 130px;transform:translateY(-60px);} 70%,100%{height: 20px;transform:translateY(0px);} } @keyframes love3{ 30%,50%{height: 180px;transform:translateY(-75px);} 70%,100%{height: 20px;transform:translateY(0px);} } @keyframes love4{ 30%,50%{height: 190px;transform:translateY(-60px);} 70%,100%{height: 20px;transform:translateY(0px);} } @keyframes love5{ 30%,50%{height: 200px;transform:translateY(-45px);} 70%,100%{height: 20px;transform:translateY(0px);} } </style> </head> <body> </div> <div id="Code"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </body> </html>
|