未来属于CSS

下载代码

html

css

分享到微信朋友圈

html

<main>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div class="big"></div>
	<div></div>
	<div></div>
	<div>The</div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div class="extrabig"></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>Future</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 class="extrabig"></div>
	<div></div>
	<div></div>
	<div class="big"></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>Belongs</div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div class="extrabig"></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>to</div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div class="big"></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 class="big"></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 class="big"></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
  <div class="superbig">CSS</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 class="big"></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 class="extrabig"></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 class="big">Made with love,<br> CSS Grid,<br>A little flexbox,<br>Sass, and<br>position: sticky </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 class="bigger"></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 class="bigger"></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>
</main>

css

main div:nth-child(1) {
  background: #bb9606;
}

main div:nth-child(2) {
  background: #433cd1;
}

main div:nth-child(3) {
  background: #492439;
}

main div:nth-child(4) {
  background: #bb47fb;
}

main div:nth-child(5) {
  background: #8c85d8;
}

main div:nth-child(6) {
  background: #e3842c;
}

main div:nth-child(7) {
  background: #9a7130;
}

main div:nth-child(8) {
  background: #98c8e9;
}

main div:nth-child(9) {
  background: #d329e3;
}

main div:nth-child(10) {
  background: #ea1722;
}

main div:nth-child(11) {
  background: #8da334;
}

main div:nth-child(12) {
  background: #8209a5;
}

main div:nth-child(13) {
  background: #1b30d6;
}

main div:nth-child(14) {
  background: #0a8e26;
}

main div:nth-child(15) {
  background: #94de28;
}

main div:nth-child(16) {
  background: #a47771;
}

main div:nth-child(17) {
  background: #ca820f;
}

main div:nth-child(18) {
  background: #46afef;
}

main div:nth-child(19) {
  background: #deec55;
}

main div:nth-child(20) {
  background: #d5d764;
}

main div:nth-child(21) {
  background: #400366;
}

main div:nth-child(22) {
  background: #496571;
}

main div:nth-child(23) {
  background: #1dd9f6;
}

main div:nth-child(24) {
  background: #d2a3b5;
}

main div:nth-child(25) {
  background: #a86873;
}

main div:nth-child(26) {
  background: #cf79c5;
}

main div:nth-child(27) {
  background: #f9144e;
}

main div:nth-child(28) {
  background: #434539;
}

main div:nth-child(29) {
  background: #1f1d40;
}

main div:nth-child(30) {
  background: #32d5b3;
}

main div:nth-child(31) {
  background: #793692;
}

main div:nth-child(32) {
  background: #901a64;
}

main div:nth-child(33) {
  background: #540fcd;
}

main div:nth-child(34) {
  background: #fde54d;
}

main div:nth-child(35) {
  background: #85bd8d;
}

main div:nth-child(36) {
  background: #e5706e;
}

main div:nth-child(37) {
  background: #072a86;
}

main div:nth-child(38) {
  background: #f62a29;
}

main div:nth-child(39) {
  background: #ddf934;
}

main div:nth-child(40) {
  background: #c8030f;
}

main div:nth-child(41) {
  background: #e5e8d4;
}

main div:nth-child(42) {
  background: #a1a66a;
}

main div:nth-child(43) {
  background: #f309fc;
}

main div:nth-child(44) {
  background: #69eda1;
}

main div:nth-child(45) {
  background: #a850e3;
}

main div:nth-child(46) {
  background: #6026bf;
}

main div:nth-child(47) {
  background: #22c7af;
}

main div:nth-child(48) {
  background: #df2d5c;
}

main div:nth-child(49) {
  background: #af9015;
}

main div:nth-child(50) {
  background: #47bfb7;
}

main div:nth-child(51) {
  background: #d51733;
}

main div:nth-child(52) {
  background: #223244;
}

main div:nth-child(53) {
  background: #bb4ba2;
}

main div:nth-child(54) {
  background: #cac724;
}

main div:nth-child(55) {
  background: #e1cb0c;
}

main div:nth-child(56) {
  background: #1b2cc1;
}

main div:nth-child(57) {
  background: #220267;
}

main div:nth-child(58) {
  background: #b508ce;
}

main div:nth-child(59) {
  background: #7bf840;
}

main div:nth-child(60) {
  background: #80130b;
}

main div:nth-child(61) {
  background: #ce10d6;
}

main div:nth-child(62) {
  background: #651e10;
}

main div:nth-child(63) {
  background: #d2f2ce;
}

main div:nth-child(64) {
  background: #97ab82;
}

main div:nth-child(65) {
  background: #89e43c;
}

main div:nth-child(66) {
  background: #15f050;
}

main div:nth-child(67) {
  background: #0f6fb4;
}

main div:nth-child(68) {
  background: #734a23;
}

main div:nth-child(69) {
  background: #09fad5;
}

main div:nth-child(70) {
  background: #6e4446;
}

main div:nth-child(71) {
  background: #ba6f83;
}

main div:nth-child(72) {
  background: #31f947;
}

main div:nth-child(73) {
  background: #2e7de5;
}

main div:nth-child(74) {
  background: #917a22;
}

main div:nth-child(75) {
  background: #c39565;
}

main div:nth-child(76) {
  background: #2b9c1b;
}

main div:nth-child(77) {
  background: #25e083;
}

main div:nth-child(78) {
  background: #d57a29;
}

main div:nth-child(79) {
  background: #4bc27c;
}

main div:nth-child(80) {
  background: #13cf82;
}

main div:nth-child(81) {
  background: #c40606;
}

main div:nth-child(82) {
  background: #7dc52f;
}

main div:nth-child(83) {
  background: #787f23;
}

main div:nth-child(84) {
  background: #55c55e;
}

main div:nth-child(85) {
  background: #b7145a;
}

main div:nth-child(86) {
  background: #3182cf;
}

main div:nth-child(87) {
  background: #907a3b;
}

main div:nth-child(88) {
  background: #1c66c2;
}

main div:nth-child(89) {
  background: #de5a21;
}

main div:nth-child(90) {
  background: #c321c9;
}

main div:nth-child(91) {
  background: #866016;
}

main div:nth-child(92) {
  background: #136daf;
}

main div:nth-child(93) {
  background: #6e3b8e;
}

main div:nth-child(94) {
  background: #02d290;
}

main div:nth-child(95) {
  background: #5a12f1;
}

main div:nth-child(96) {
  background: #25981a;
}

main div:nth-child(97) {
  background: #0e94b8;
}

main div:nth-child(98) {
  background: #2f07a9;
}

main div:nth-child(99) {
  background: #f9d4c8;
}

main div:nth-child(100) {
  background: #f530e5;
}

main div:nth-child(101) {
  background: #1eb8b5;
}

main div:nth-child(102) {
  background: #6da07d;
}

main div:nth-child(103) {
  background: #183706;
}

main div:nth-child(104) {
  background: #f26007;
}

main div:nth-child(105) {
  background: #0f760e;
}

main div:nth-child(106) {
  background: #c23bd3;
}

main div:nth-child(107) {
  background: #bf8ca0;
}

main div:nth-child(108) {
  background: #ae65e1;
}

main div:nth-child(109) {
  background: #cca89c;
}

main div:nth-child(110) {
  background: #1736e9;
}

main div:nth-child(111) {
  background: #0f1e0a;
}

main div:nth-child(112) {
  background: #bec231;
}

main div:nth-child(113) {
  background: #dd1b13;
}

main div:nth-child(114) {
  background: #693a5f;
}

main div:nth-child(115) {
  background: #5b575b;
}

main div:nth-child(116) {
  background: #acd7d6;
}

main div:nth-child(117) {
  background: #7a0b57;
}

main div:nth-child(118) {
  background: #4cd203;
}

main div:nth-child(119) {
  background: #a642eb;
}

main div:nth-child(120) {
  background: #de3885;
}

main div:nth-child(121) {
  background: #c51485;
}

main div:nth-child(122) {
  background: #5c34bd;
}

main div:nth-child(123) {
  background: #07ac0f;
}

main div:nth-child(124) {
  background: #a15fc7;
}

main div:nth-child(125) {
  background: #252a25;
}

main div:nth-child(126) {
  background: #717cc1;
}

main div:nth-child(127) {
  background: #29baec;
}

main div:nth-child(128) {
  background: #636018;
}

main div:nth-child(129) {
  background: #1751c4;
}

main div:nth-child(130) {
  background: #20e807;
}

main div:nth-child(131) {
  background: #e175df;
}

main div:nth-child(132) {
  background: #a8417e;
}

main div:nth-child(133) {
  background: #0e9951;
}

main div:nth-child(134) {
  background: #bb990f;
}

main div:nth-child(135) {
  background: #462220;
}

main div:nth-child(136) {
  background: #4b1997;
}

main div:nth-child(137) {
  background: #9c9f90;
}

main div:nth-child(138) {
  background: #de5b3e;
}

main div:nth-child(139) {
  background: #3345d8;
}

main div:nth-child(140) {
  background: #a96950;
}

main div:nth-child(141) {
  background: #5c6632;
}

main div:nth-child(142) {
  background: #57d468;
}

main div:nth-child(143) {
  background: #92e8db;
}

main div:nth-child(144) {
  background: #62eb62;
}

main div:nth-child(145) {
  background: #628889;
}

main div:nth-child(146) {
  background: #29428a;
}

main div:nth-child(147) {
  background: #13924d;
}

main div:nth-child(148) {
  background: #c0e42c;
}

main div:nth-child(149) {
  background: #603a83;
}

main div:nth-child(150) {
  background: #17f5f1;
}

main div:nth-child(151) {
  background: #1a08f8;
}

main div:nth-child(152) {
  background: #8f87bf;
}

main div:nth-child(153) {
  background: #8b5842;
}

main div:nth-child(154) {
  background: #754541;
}

main div:nth-child(155) {
  background: #05eca9;
}

main div:nth-child(156) {
  background: #d1f4aa;
}

main div:nth-child(157) {
  background: #833891;
}

main div:nth-child(158) {
  background: #1a0886;
}

main div:nth-child(159) {
  background: #48d73a;
}

main div:nth-child(160) {
  background: #98be20;
}

main div:nth-child(161) {
  background: #f711b4;
}

main div:nth-child(162) {
  background: #149d1a;
}

main div:nth-child(163) {
  background: #62b9b6;
}

main div:nth-child(164) {
  background: #f98477;
}

main div:nth-child(165) {
  background: #aacec0;
}

main div:nth-child(166) {
  background: #499f5f;
}

main div:nth-child(167) {
  background: #6e908b;
}

main div:nth-child(168) {
  background: #750e6a;
}

main div:nth-child(169) {
  background: #1a3b9c;
}

main div:nth-child(170) {
  background: #c78a72;
}

main div:nth-child(171) {
  background: #a288e7;
}

main div:nth-child(172) {
  background: #36b665;
}

main div:nth-child(173) {
  background: #9915a4;
}

main div:nth-child(174) {
  background: #793cef;
}

main div:nth-child(175) {
  background: #2eae39;
}

main div:nth-child(176) {
  background: #5fcb60;
}

main div:nth-child(177) {
  background: #1a920b;
}

main div:nth-child(178) {
  background: #800155;
}

main div:nth-child(179) {
  background: #f19eed;
}

main div:nth-child(180) {
  background: #490155;
}

main div:nth-child(181) {
  background: #ca9d0e;
}

main div:nth-child(182) {
  background: #484513;
}

main div:nth-child(183) {
  background: #35860a;
}

main div:nth-child(184) {
  background: #abb675;
}

main div:nth-child(185) {
  background: #4f2ebb;
}

main div:nth-child(186) {
  background: #c8f524;
}

main div:nth-child(187) {
  background: #e5d077;
}

main div:nth-child(188) {
  background: #6fb13d;
}

main div:nth-child(189) {
  background: #51a750;
}

main div:nth-child(190) {
  background: #a351eb;
}

main div:nth-child(191) {
  background: #f684a7;
}

main div:nth-child(192) {
  background: #fec859;
}

main div:nth-child(193) {
  background: #bebc65;
}

main div:nth-child(194) {
  background: #3594f8;
}

main div:nth-child(195) {
  background: #e4a3f1;
}

main div:nth-child(196) {
  background: #a37d19;
}

main div:nth-child(197) {
  background: #c49195;
}

main div:nth-child(198) {
  background: #727663;
}

main div:nth-child(199) {
  background: #e3a161;
}

main div:nth-child(200) {
  background: #a7bbc0;
}

main div:nth-child(201) {
  background: #029bc0;
}

main div:nth-child(202) {
  background: #24bc43;
}

main div:nth-child(203) {
  background: #55a1c3;
}

main div:nth-child(204) {
  background: #9a1467;
}

main div:nth-child(205) {
  background: #e242b2;
}

main div:nth-child(206) {
  background: #742432;
}

main div:nth-child(207) {
  background: #14518b;
}

main div:nth-child(208) {
  background: #c29824;
}

main div:nth-child(209) {
  background: #72bc8a;
}

main div:nth-child(210) {
  background: #304b23;
}

main div:nth-child(211) {
  background: #d54f71;
}

main div:nth-child(212) {
  background: #8a9965;
}

main div:nth-child(213) {
  background: #c39a0b;
}

main div:nth-child(214) {
  background: #17f860;
}

main div:nth-child(215) {
  background: #e6734b;
}

main div:nth-child(216) {
  background: #8aeb0c;
}

main div:nth-child(217) {
  background: #3403d7;
}

main div:nth-child(218) {
  background: #1e7ad4;
}

main div:nth-child(219) {
  background: #e5c881;
}

main div:nth-child(220) {
  background: #7ab018;
}

main div:nth-child(221) {
  background: #629bd8;
}

main div:nth-child(222) {
  background: #b28eb4;
}

main div:nth-child(223) {
  background: #1033fa;
}

main div:nth-child(224) {
  background: #2bb568;
}

main div:nth-child(225) {
  background: #8b30db;
}

main div:nth-child(226) {
  background: #63fb2b;
}

main div:nth-child(227) {
  background: #973ddb;
}

main div:nth-child(228) {
  background: #2473bc;
}

main div:nth-child(229) {
  background: #1107f3;
}

main div:nth-child(230) {
  background: #4a107c;
}

main div:nth-child(231) {
  background: #862c86;
}

main div:nth-child(232) {
  background: #1d7ceb;
}

main div:nth-child(233) {
  background: #eb5634;
}

main div:nth-child(234) {
  background: #574029;
}

main div:nth-child(235) {
  background: #5d74e9;
}

main div:nth-child(236) {
  background: #17b35b;
}

main div:nth-child(237) {
  background: #60f159;
}

main div:nth-child(238) {
  background: #5d578b;
}

main div:nth-child(239) {
  background: #f4725a;
}

main div:nth-child(240) {
  background: #7d1e97;
}

main div:nth-child(241) {
  background: #c00403;
}

main div:nth-child(242) {
  background: #a62dbd;
}

main div:nth-child(243) {
  background: #0aff1a;
}

main div:nth-child(244) {
  background: #7ace9c;
}

main div:nth-child(245) {
  background: #ec3b1e;
}

main div:nth-child(246) {
  background: #712a6f;
}

main div:nth-child(247) {
  background: #2b8e3e;
}

main div:nth-child(248) {
  background: #d86adb;
}

main div:nth-child(249) {
  background: #4f0c75;
}

main div:nth-child(250) {
  background: #afbd61;
}

main div:nth-child(251) {
  background: #aa88e5;
}

main div:nth-child(252) {
  background: #0efdcb;
}

main div:nth-child(253) {
  background: #c723cb;
}

main div:nth-child(254) {
  background: #b2cb94;
}

main div:nth-child(255) {
  background: #7c452d;
}

main div:nth-child(256) {
  background: #027d22;
}

main div:nth-child(257) {
  background: #1bb7bc;
}

main div:nth-child(258) {
  background: #5314bf;
}

main div:nth-child(259) {
  background: #fda933;
}

main div:nth-child(260) {
  background: #4accca;
}

main div:nth-child(261) {
  background: #c00d1b;
}

main div:nth-child(262) {
  background: #7314bd;
}

main div:nth-child(263) {
  background: #966025;
}

main div:nth-child(264) {
  background: #1f1f4c;
}

main div:nth-child(265) {
  background: #eed167;
}

main div:nth-child(266) {
  background: #aee865;
}

main div:nth-child(267) {
  background: #710a58;
}

main div:nth-child(268) {
  background: #51fe3d;
}

main div:nth-child(269) {
  background: #c094b6;
}

main div:nth-child(270) {
  background: #830dec;
}

main div:nth-child(271) {
  background: #03528c;
}

main div:nth-child(272) {
  background: #4bbc73;
}

main div:nth-child(273) {
  background: #8c20a4;
}

main div:nth-child(274) {
  background: #65715f;
}

main div:nth-child(275) {
  background: #1709ab;
}

main div:nth-child(276) {
  background: #a07908;
}

main div:nth-child(277) {
  background: #54dd6d;
}

main div:nth-child(278) {
  background: #c2fe5c;
}

main div:nth-child(279) {
  background: #6f376e;
}

main div:nth-child(280) {
  background: #f18390;
}

main div:nth-child(281) {
  background: #bf2de0;
}

main div:nth-child(282) {
  background: #5b4973;
}

main div:nth-child(283) {
  background: #ab9e6f;
}

main div:nth-child(284) {
  background: #03f23a;
}

main div:nth-child(285) {
  background: #8a51d5;
}

main div:nth-child(286) {
  background: #4964c2;
}

main div:nth-child(287) {
  background: #cc6f97;
}

main div:nth-child(288) {
  background: #72055c;
}

main div:nth-child(289) {
  background: #95a08b;
}

main div:nth-child(290) {
  background: #818828;
}

main div:nth-child(291) {
  background: #82be87;
}

main div:nth-child(292) {
  background: #c8f827;
}

main div:nth-child(293) {
  background: #61f04a;
}

main div:nth-child(294) {
  background: #5576e5;
}

main div:nth-child(295) {
  background: #a688be;
}

main div:nth-child(296) {
  background: #77eba6;
}

main div:nth-child(297) {
  background: #1d5784;
}

main div:nth-child(298) {
  background: #6df4bb;
}

main div:nth-child(299) {
  background: #a85bb3;
}

main div:nth-child(300) {
  background: #710441;
}

main div:nth-child(301) {
  background: #d3ba24;
}

main div:nth-child(302) {
  background: #68d95d;
}

main div:nth-child(303) {
  background: #cf350b;
}

main div:nth-child(304) {
  background: #08259b;
}

main div:nth-child(305) {
  background: #b7e860;
}

main div:nth-child(306) {
  background: #8084a7;
}

main div:nth-child(307) {
  background: #2986b6;
}

main div:nth-child(308) {
  background: #4cd333;
}

main div:nth-child(309) {
  background: #733709;
}

main div:nth-child(310) {
  background: #6e9e4f;
}

main div:nth-child(311) {
  background: #4f8524;
}

main div:nth-child(312) {
  background: #4c706e;
}

main div:nth-child(313) {
  background: #2b5355;
}

main div:nth-child(314) {
  background: #66e98b;
}

main div:nth-child(315) {
  background: #8c55d3;
}

main div:nth-child(316) {
  background: #0828ec;
}

main div:nth-child(317) {
  background: #4a1e47;
}

main div:nth-child(318) {
  background: #b86df8;
}

main div:nth-child(319) {
  background: #aa45a6;
}

main div:nth-child(320) {
  background: #dc1c8b;
}

main div:nth-child(321) {
  background: #01480e;
}

main div:nth-child(322) {
  background: #ef1f92;
}

main div:nth-child(323) {
  background: #1a5cd2;
}

main div:nth-child(324) {
  background: #0edae2;
}

main div:nth-child(325) {
  background: #d1253a;
}

main div:nth-child(326) {
  background: #e33972;
}

main div:nth-child(327) {
  background: #73ee31;
}

main div:nth-child(328) {
  background: #84625a;
}

main div:nth-child(329) {
  background: #3b3edb;
}

main div:nth-child(330) {
  background: #a3b6cf;
}

main div:nth-child(331) {
  background: #2188b7;
}

main div:nth-child(332) {
  background: #164233;
}

main div:nth-child(333) {
  background: #dba032;
}

main div:nth-child(334) {
  background: #ca6bb5;
}

main div:nth-child(335) {
  background: #6b1c12;
}

main div:nth-child(336) {
  background: #82ea32;
}

main div:nth-child(337) {
  background: #93560b;
}

main div:nth-child(338) {
  background: #9010bc;
}

main div:nth-child(339) {
  background: #264c70;
}

main div:nth-child(340) {
  background: #e2a44f;
}

main div:nth-child(341) {
  background: #b2c9c0;
}

main div:nth-child(342) {
  background: #3a6c8f;
}

main div:nth-child(343) {
  background: #44a9b4;
}

main div:nth-child(344) {
  background: #c696c8;
}

main div:nth-child(345) {
  background: #23f055;
}

main div:nth-child(346) {
  background: #a7a454;
}

main div:nth-child(347) {
  background: #12aa21;
}

main div:nth-child(348) {
  background: #cbb796;
}

main div:nth-child(349) {
  background: #0868f2;
}

main div:nth-child(350) {
  background: #118b51;
}

main div:nth-child(351) {
  background: #73ed70;
}

main div:nth-child(352) {
  background: #5b6932;
}

main div:nth-child(353) {
  background: #e10443;
}

main div:nth-child(354) {
  background: #f706ce;
}

main div:nth-child(355) {
  background: #f85e0c;
}

main div:nth-child(356) {
  background: #48ed60;
}

main div:nth-child(357) {
  background: #fd82a7;
}

main div:nth-child(358) {
  background: #d59675;
}

main div:nth-child(359) {
  background: #5b2abe;
}

main div:nth-child(360) {
  background: #486162;
}

main div:nth-child(361) {
  background: #7ba312;
}

main div:nth-child(362) {
  background: #2270c5;
}

main div:nth-child(363) {
  background: #2db316;
}

main div:nth-child(364) {
  background: #55394d;
}

main div:nth-child(365) {
  background: #60f9fa;
}

main div:nth-child(366) {
  background: #14e1dd;
}

main div:nth-child(367) {
  background: #c1a6a2;
}

main div:nth-child(368) {
  background: #4b612e;
}

main div:nth-child(369) {
  background: #f10958;
}

main div:nth-child(370) {
  background: #29c05a;
}

main div:nth-child(371) {
  background: #b47042;
}

main div:nth-child(372) {
  background: #ee3b17;
}

main div:nth-child(373) {
  background: #99e348;
}

main div:nth-child(374) {
  background: #87a0ce;
}

main div:nth-child(375) {
  background: #423e53;
}

main div:nth-child(376) {
  background: #323ea9;
}

main div:nth-child(377) {
  background: #138e06;
}

main div:nth-child(378) {
  background: #ac594e;
}

main div:nth-child(379) {
  background: #46de61;
}

main div:nth-child(380) {
  background: #d15e70;
}

main div:nth-child(381) {
  background: #acf778;
}

main div:nth-child(382) {
  background: #27aaa7;
}

main div:nth-child(383) {
  background: #218f2e;
}

main div:nth-child(384) {
  background: #d3bd28;
}

main div:nth-child(385) {
  background: #9293c0;
}

main div:nth-child(386) {
  background: #a2b9c2;
}

main div:nth-child(387) {
  background: #26b2ed;
}

main div:nth-child(388) {
  background: #5c74a6;
}

main div:nth-child(389) {
  background: #511a7b;
}

main div:nth-child(390) {
  background: #11dbbd;
}

main div:nth-child(391) {
  background: #5316c8;
}

main div:nth-child(392) {
  background: #b50916;
}

main div:nth-child(393) {
  background: #318fe5;
}

main div:nth-child(394) {
  background: #f3558c;
}

main div:nth-child(395) {
  background: #38b8af;
}

main div:nth-child(396) {
  background: #272b20;
}

main div:nth-child(397) {
  background: #8def95;
}

main div:nth-child(398) {
  background: #0f4df6;
}

main div:nth-child(399) {
  background: #0eccb7;
}

main div:nth-child(400) {
  background: #f66d23;
}

body {
  margin: 1vw 0 0 1vw;
  color: #222;
  font-family: Bungee;
  font-size: 2vw;
  text-shadow: 1px 2px #eee;
}

main {
  width: 100%;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
}

div {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-right: 1vw solid #fff;
  border-bottom: 1vw solid #fff;
  width: 100%;
  min-height: 12.5vw;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
div:not(:empty) {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}
div:not(:empty).big {
  top: 12.5vw;
}

.big {
  grid-column-end: span 2;
  grid-row-end: span 2;
}

.extrabig {
  grid-column-end: span 3;
  grid-row-end: span 3;
}

.superbig {
  grid-column-end: span 4;
  grid-row-end: span 4;
  font-size: 2em;
}

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg