Grid技术+动画技术 示范:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Grid Animate Demo</title> <style type="text/css"> html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } body { margin: 0; padding: 0 10vmin; } @supports (display: grid) { h1 { color: red !important; } } .grid { display: grid; grid-template-columns: repeat(191, 2.72251px); grid-template-rows: repeat(250, 2.72251px); width: 100%; max-width: 520px; margin: 0 auto; } @media (max-width: 640px) { .grid { grid-template-columns: repeat(191, 0.41885vmin); grid-template-rows: repeat(250, 0.4vmin); } } .grid:before, .grid:after { content: ''; display: table; } .grid:before { float: left; padding-bottom: 100%; } .grid:after { clear: both; } .grid > div { -webkit-animation: animate .5s forwards; animation: animate .5s forwards; opacity: 0; -webkit-transform: scale(0.1) rotate(-180deg); transform: scale(0.1) rotate(-180deg); cursor: pointer; -webkit-transition: all .3s; transition: all .3s; counter-increment: cellcount; position: relative; } .grid > div:not(:last-of-type) { background-color: #666; } .grid > div:hover { z-index: 1; background-color: #282828; background-color: #b90000; } .grid > div:hover:before { content: counter(cellcount); font-size: 9px; font-family: sans-serif; padding: 4px; position: absolute; display: block; background-color: #b90000; color: #fff; font-weight: 700; } .grid > div:last-of-type { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44.4 53'%3E %3Cpath fill='%23666' d='M33.5 27.9c-.6-3.4 10.3-24.8 10.8-25.7.5-.9-.7-2-.7-2s-1.3-.6-2 .2-16.1 19.2-19.5 19.9C10.2 23 1.3 16.5.2 18.1c-1.4 2.1 3.7 9.1 6.8 12.1 2.4 3.8 1.7 8.1 1.2 10.1-3 9.9.7 12.1.7 12.1s3.5 2.5 11.5-4c1.7-1.2 5.4-3.4 9.8-2.7 4 1.7 12.4 3.7 13.8 1.6 1.1-1.7-8.4-7.4-10.5-19.4z'/%3E %3C/svg%3E"); background-repeat: no-repeat; } @-webkit-keyframes animate { to { opacity: 1; -webkit-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); } } @keyframes animate { to { opacity: 1; -webkit-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); } } .grid > div:nth-of-type(1) { grid-area: 10 / 15 / 28 / 18; -webkit-animation-delay: 1.05s; animation-delay: 1.05s; } .grid > div:nth-of-type(2) { grid-area: 10 / 23 / 28 / 26; -webkit-animation-delay: 1.1s; animation-delay: 1.1s; } .grid > div:nth-of-type(3) { grid-area: 10 / 27 / 13 / 40; -webkit-animation-delay: 1.15s; animation-delay: 1.15s; } .grid > div:nth-of-type(4) { grid-area: 14 / 37 / 28 / 40; -webkit-animation-delay: 1.2s; animation-delay: 1.2s; } .grid > div:nth-of-type(5) { grid-area: 10 / 45 / 24 / 48; -webkit-animation-delay: 1.25s; animation-delay: 1.25s; } .grid > div:nth-of-type(6) { grid-area: 10 / 49 / 13 / 62; -webkit-animation-delay: 1.3s; animation-delay: 1.3s; } .grid > div:nth-of-type(7) { grid-area: 25 / 45 / 28 / 62; -webkit-animation-delay: 1.35s; animation-delay: 1.35s; } .grid > div:nth-of-type(8) { grid-area: 10 / 67 / 13 / 84; -webkit-animation-delay: 1.4s; animation-delay: 1.4s; } .grid > div:nth-of-type(9) { grid-area: 14 / 67 / 28 / 70; -webkit-animation-delay: 1.45s; animation-delay: 1.45s; } .grid > div:nth-of-type(10) { grid-area: 18 / 71 / 21 / 79; -webkit-animation-delay: 1.5s; animation-delay: 1.5s; } .grid > div:nth-of-type(11) { grid-area: 25 / 71 / 28 / 84; -webkit-animation-delay: 1.55s; animation-delay: 1.55s; } .grid > div:nth-of-type(12) { grid-area: 10 / 89 / 13 / 106; -webkit-animation-delay: 1.6s; animation-delay: 1.6s; } .grid > div:nth-of-type(13) { grid-area: 14 / 89 / 28 / 92; -webkit-animation-delay: 1.65s; animation-delay: 1.65s; } .grid > div:nth-of-type(14) { grid-area: 18 / 93 / 21 / 106; -webkit-animation-delay: 1.7s; animation-delay: 1.7s; } .grid > div:nth-of-type(15) { grid-area: 14 / 103 / 17 / 106; -webkit-animation-delay: 1.75s; animation-delay: 1.75s; } .grid > div:nth-of-type(16) { grid-area: 10 / 110 / 13 / 128; -webkit-animation-delay: 1.8s; animation-delay: 1.8s; } .grid > div:nth-of-type(17) { grid-area: 14 / 118 / 28 / 121; -webkit-animation-delay: 1.85s; animation-delay: 1.85s; } .grid > div:nth-of-type(18) { grid-area: 10 / 133 / 28 / 136; -webkit-animation-delay: 1.9s; animation-delay: 1.9s; } .grid > div:nth-of-type(19) { grid-area: 10 / 141 / 13 / 158; -webkit-animation-delay: 1.95s; animation-delay: 1.95s; } .grid > div:nth-of-type(20) { grid-area: 14 / 141 / 28 / 144; -webkit-animation-delay: 2s; animation-delay: 2s; } .grid > div:nth-of-type(21) { grid-area: 25 / 145 / 28 / 158; -webkit-animation-delay: 2.05s; animation-delay: 2.05s; } .grid > div:nth-of-type(22) { grid-area: 14 / 155 / 24 / 158; -webkit-animation-delay: 2.1s; animation-delay: 2.1s; } .grid > div:nth-of-type(23) { grid-area: 10 / 163 / 28 / 166; -webkit-animation-delay: 2.15s; animation-delay: 2.15s; } .grid > div:nth-of-type(24) { grid-area: 10 / 167 / 13 / 180; -webkit-animation-delay: 2.2s; animation-delay: 2.2s; } .grid > div:nth-of-type(25) { grid-area: 14 / 177 / 28 / 180; -webkit-animation-delay: 2.25s; animation-delay: 2.25s; } .grid > div:nth-of-type(26) { grid-area: 41 / 1 / 78 / 84; -webkit-animation-delay: 2.3s; animation-delay: 2.3s; } .grid > div:nth-of-type(27) { grid-area: 41 / 86 / 118 / 98; -webkit-animation-delay: 2.35s; animation-delay: 2.35s; } .grid > div:nth-of-type(28) { grid-area: 119 / 86 / 122 / 98; -webkit-animation-delay: 2.4s; animation-delay: 2.4s; } .grid > div:nth-of-type(29) { grid-area: 122 / 86 / 145 / 126; -webkit-animation-delay: 2.45s; animation-delay: 2.45s; } .grid > div:nth-of-type(30) { grid-area: 41 / 102 / 120 / 126; -webkit-animation-delay: 2.5s; animation-delay: 2.5s; } .grid > div:nth-of-type(31) { grid-area: 41 / 131 / 73 / 193; -webkit-animation-delay: 2.55s; animation-delay: 2.55s; } .grid > div:nth-of-type(32) { grid-area: 79 / 1 / 84 / 15; -webkit-animation-delay: 2.6s; animation-delay: 2.6s; } .grid > div:nth-of-type(33) { grid-area: 79 / 16 / 84 / 26; -webkit-animation-delay: 2.65s; animation-delay: 2.65s; } .grid > div:nth-of-type(34) { grid-area: 79 / 27 / 84 / 41; -webkit-animation-delay: 2.7s; animation-delay: 2.7s; } .grid > div:nth-of-type(35) { grid-area: 86 / 1 / 123 / 41; -webkit-animation-delay: 2.75s; animation-delay: 2.75s; } .grid > div:nth-of-type(36) { grid-area: 79 / 43 / 110 / 57; -webkit-animation-delay: 2.8s; animation-delay: 2.8s; } .grid > div:nth-of-type(37) { grid-area: 79 / 58 / 110 / 61; -webkit-animation-delay: 2.85s; animation-delay: 2.85s; } .grid > div:nth-of-type(38) { grid-area: 79 / 62 / 110 / 64; -webkit-animation-delay: 2.9s; animation-delay: 2.9s; } .grid > div:nth-of-type(39) { grid-area: 79 / 65 / 110 / 68; -webkit-animation-delay: 2.95s; animation-delay: 2.95s; } .grid > div:nth-of-type(40) { grid-area: 79 / 69 / 110 / 71; -webkit-animation-delay: 3s; animation-delay: 3s; } .grid > div:nth-of-type(41) { grid-area: 86 / 72 / 110 / 84; -webkit-animation-delay: 3.05s; animation-delay: 3.05s; } .grid > div:nth-of-type(42) { grid-area: 125 / 1 / 204 / 28; -webkit-animation-delay: 3.1s; animation-delay: 3.1s; } .grid > div:nth-of-type(43) { grid-area: 207 / 1 / 251 / 28; -webkit-animation-delay: 3.15s; animation-delay: 3.15s; } .grid > div:nth-of-type(44) { grid-area: 226 / 28 / 251 / 62; -webkit-animation-delay: 3.2s; animation-delay: 3.2s; } .grid > div:nth-of-type(45) { grid-area: 124 / 31 / 139 / 57; -webkit-animation-delay: 3.25s; animation-delay: 3.25s; } .grid > div:nth-of-type(46) { grid-area: 141 / 31 / 145 / 69; -webkit-animation-delay: 3.3s; animation-delay: 3.3s; } .grid > div:nth-of-type(47) { grid-area: 147 / 31 / 195 / 69; -webkit-animation-delay: 3.35s; animation-delay: 3.35s; } .grid > div:nth-of-type(48) { grid-area: 76 / 131 / 108 / 193; -webkit-animation-delay: 3.4s; animation-delay: 3.4s; } .grid > div:nth-of-type(49) { grid-area: 110 / 131 / 128 / 133; -webkit-animation-delay: 3.45s; animation-delay: 3.45s; } .grid > div:nth-of-type(50) { grid-area: 110 / 134 / 128 / 136; -webkit-animation-delay: 3.5s; animation-delay: 3.5s; } .grid > div:nth-of-type(51) { grid-area: 108 / 138 / 140 / 160; -webkit-animation-delay: 3.55s; animation-delay: 3.55s; } .grid > div:nth-of-type(52) { grid-area: 110 / 161 / 114 / 192; -webkit-animation-delay: 3.6s; animation-delay: 3.6s; } .grid > div:nth-of-type(53) { grid-area: 121 / 161 / 123 / 192; -webkit-animation-delay: 3.65s; animation-delay: 3.65s; } .grid > div:nth-of-type(54) { grid-area: 125 / 168 / 205 / 192; -webkit-animation-delay: 3.7s; animation-delay: 3.7s; } .grid > div:nth-of-type(55) { grid-area: 143 / 138 / 148 / 165; -webkit-animation-delay: 3.75s; animation-delay: 3.75s; } .grid > div:nth-of-type(56) { grid-area: 149 / 138 / 158 / 165; -webkit-animation-delay: 3.8s; animation-delay: 3.8s; } .grid > div:nth-of-type(57) { grid-area: 160 / 138 / 164 / 165; -webkit-animation-delay: 3.85s; animation-delay: 3.85s; } .grid > div:nth-of-type(58) { grid-area: 166 / 138 / 170 / 165; -webkit-animation-delay: 3.9s; animation-delay: 3.9s; } .grid > div:nth-of-type(59) { grid-area: 172 / 138 / 176 / 165; -webkit-animation-delay: 3.95s; animation-delay: 3.95s; } .grid > div:nth-of-type(60) { grid-area: 178 / 138 / 187 / 165; -webkit-animation-delay: 4s; animation-delay: 4s; } .grid > div:nth-of-type(61) { grid-area: 188 / 138 / 205 / 165; -webkit-animation-delay: 4.05s; animation-delay: 4.05s; } .grid > div:nth-of-type(62) { grid-area: 208 / 149 / 251 / 192; -webkit-animation-delay: 4.1s; animation-delay: 4.1s; } .grid > div:nth-of-type(63) { grid-area: 208 / 131 / 251 / 145; -webkit-animation-delay: 4.15s; animation-delay: 4.15s; } .grid > div:nth-of-type(64) { grid-area: 223 / 92 / 251 / 129; -webkit-animation-delay: 4.2s; animation-delay: 4.2s; } .grid > div:nth-of-type(65) { grid-area: 214 / 92 / 223 / 121; -webkit-animation-delay: 4.25s; animation-delay: 4.25s; } .grid > div:nth-of-type(66) { grid-area: 198 / 92 / 214 / 107; -webkit-animation-delay: 4.3s; animation-delay: 4.3s; } .grid > div:nth-of-type(67) { grid-area: 180 / 71 / 189 / 97; -webkit-animation-delay: 4.35s; animation-delay: 4.35s; } .grid > div:nth-of-type(68) { grid-area: 190 / 71 / 195 / 97; -webkit-animation-delay: 4.4s; animation-delay: 4.4s; } .grid > div:nth-of-type(69) { grid-area: 198 / 83 / 251 / 89; -webkit-animation-delay: 4.45s; animation-delay: 4.45s; } .grid > div:nth-of-type(70) { grid-area: 198 / 76 / 251 / 81; -webkit-animation-delay: 4.5s; animation-delay: 4.5s; } .grid > div:nth-of-type(71) { grid-area: 198 / 73 / 251 / 75; -webkit-animation-delay: 4.55s; animation-delay: 4.55s; } .grid > div:nth-of-type(72) { grid-area: 198 / 66 / 251 / 70; -webkit-animation-delay: 4.6s; animation-delay: 4.6s; } .grid > div:nth-of-type(73) { grid-area: 198 / 60 / 223 / 64; -webkit-animation-delay: 4.65s; animation-delay: 4.65s; } .grid > div:nth-of-type(74) { grid-area: 198 / 54 / 223 / 58; -webkit-animation-delay: 4.7s; animation-delay: 4.7s; } .grid > div:nth-of-type(75) { grid-area: 198 / 49 / 223 / 53; -webkit-animation-delay: 4.75s; animation-delay: 4.75s; } .grid > div:nth-of-type(76) { grid-area: 198 / 32 / 223 / 36; -webkit-animation-delay: 4.8s; animation-delay: 4.8s; } .grid > div:nth-of-type(77) { grid-area: 193 / 115 / 206 / 127; -webkit-animation-delay: 4.85s; animation-delay: 4.85s; } header { border-bottom: 1px solid silver; text-align: center; } footer { border-top: 1px solid silver; } footer, header { display: block; margin: 40px auto; max-width: 640px; } h1, p, a { font-family: sans-serif; font-size: 12px; text-transform: uppercase; color: #666; text-decoration: none; } a { font-weight: 700; border-bottom: 1px dashed silver; } img { width: 10vmin; float: left; } footer p:last-of-type { text-align: right; } h1 { font-family: monospace; font-size: 24px; line-height: 1.4; font-weight: 400; margin: 20px 0; text-align: center; border-bottom: 1px solid silver; } p { font-size: 11px; line-height: 1.7; } a[href*=chrome], a[href*="//www.mozilla"] { font-size: 11px; font-weight: 400; text-transform: none; } p strong { color: #b90000; } h1 strong { font-weight: 400; } </style> </head> <body> <h1>cs</h1> <div class="grid"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </body> </html>
