CSS加载动画

下载代码

html

css

分享到微信朋友圈

html

css

html, body {
  overflow: hidden;
  background: #2a2e3a;
}

.spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  perspective: 200px;
}

i {
  display: block;
  position: absolute;
  opacity: 1;
}
i b {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 6px;
  background: white;
  box-shadow: 0px 0px 14px white;
  animation-name: spin;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

i:nth-child(1) {
  transform: rotate(3.6deg) translate3d(100px, 0, 0);
}
i:nth-child(1) b {
  animation-delay: 0.03061s;
}

i:nth-child(2) {
  transform: rotate(7.2deg) translate3d(100px, 0, 0);
}
i:nth-child(2) b {
  animation-delay: 0.06122s;
}

i:nth-child(3) {
  transform: rotate(10.8deg) translate3d(100px, 0, 0);
}
i:nth-child(3) b {
  animation-delay: 0.09184s;
}

i:nth-child(4) {
  transform: rotate(14.4deg) translate3d(100px, 0, 0);
}
i:nth-child(4) b {
  animation-delay: 0.12245s;
}

i:nth-child(5) {
  transform: rotate(18deg) translate3d(100px, 0, 0);
}
i:nth-child(5) b {
  animation-delay: 0.15306s;
}

i:nth-child(6) {
  transform: rotate(21.6deg) translate3d(100px, 0, 0);
}
i:nth-child(6) b {
  animation-delay: 0.18367s;
}

i:nth-child(7) {
  transform: rotate(25.2deg) translate3d(100px, 0, 0);
}
i:nth-child(7) b {
  animation-delay: 0.21429s;
}

i:nth-child(8) {
  transform: rotate(28.8deg) translate3d(100px, 0, 0);
}
i:nth-child(8) b {
  animation-delay: 0.2449s;
}

i:nth-child(9) {
  transform: rotate(32.4deg) translate3d(100px, 0, 0);
}
i:nth-child(9) b {
  animation-delay: 0.27551s;
}

i:nth-child(10) {
  transform: rotate(36deg) translate3d(100px, 0, 0);
}
i:nth-child(10) b {
  animation-delay: 0.30612s;
}

i:nth-child(11) {
  transform: rotate(39.6deg) translate3d(100px, 0, 0);
}
i:nth-child(11) b {
  animation-delay: 0.33673s;
}

i:nth-child(12) {
  transform: rotate(43.2deg) translate3d(100px, 0, 0);
}
i:nth-child(12) b {
  animation-delay: 0.36735s;
}

i:nth-child(13) {
  transform: rotate(46.8deg) translate3d(100px, 0, 0);
}
i:nth-child(13) b {
  animation-delay: 0.39796s;
}

i:nth-child(14) {
  transform: rotate(50.4deg) translate3d(100px, 0, 0);
}
i:nth-child(14) b {
  animation-delay: 0.42857s;
}

i:nth-child(15) {
  transform: rotate(54deg) translate3d(100px, 0, 0);
}
i:nth-child(15) b {
  animation-delay: 0.45918s;
}

i:nth-child(16) {
  transform: rotate(57.6deg) translate3d(100px, 0, 0);
}
i:nth-child(16) b {
  animation-delay: 0.4898s;
}

i:nth-child(17) {
  transform: rotate(61.2deg) translate3d(100px, 0, 0);
}
i:nth-child(17) b {
  animation-delay: 0.52041s;
}

i:nth-child(18) {
  transform: rotate(64.8deg) translate3d(100px, 0, 0);
}
i:nth-child(18) b {
  animation-delay: 0.55102s;
}

i:nth-child(19) {
  transform: rotate(68.4deg) translate3d(100px, 0, 0);
}
i:nth-child(19) b {
  animation-delay: 0.58163s;
}

i:nth-child(20) {
  transform: rotate(72deg) translate3d(100px, 0, 0);
}
i:nth-child(20) b {
  animation-delay: 0.61224s;
}

i:nth-child(21) {
  transform: rotate(75.6deg) translate3d(100px, 0, 0);
}
i:nth-child(21) b {
  animation-delay: 0.64286s;
}

i:nth-child(22) {
  transform: rotate(79.2deg) translate3d(100px, 0, 0);
}
i:nth-child(22) b {
  animation-delay: 0.67347s;
}

i:nth-child(23) {
  transform: rotate(82.8deg) translate3d(100px, 0, 0);
}
i:nth-child(23) b {
  animation-delay: 0.70408s;
}

i:nth-child(24) {
  transform: rotate(86.4deg) translate3d(100px, 0, 0);
}
i:nth-child(24) b {
  animation-delay: 0.73469s;
}

i:nth-child(25) {
  transform: rotate(90deg) translate3d(100px, 0, 0);
}
i:nth-child(25) b {
  animation-delay: 0.76531s;
}

i:nth-child(26) {
  transform: rotate(93.6deg) translate3d(100px, 0, 0);
}
i:nth-child(26) b {
  animation-delay: 0.79592s;
}

i:nth-child(27) {
  transform: rotate(97.2deg) translate3d(100px, 0, 0);
}
i:nth-child(27) b {
  animation-delay: 0.82653s;
}

i:nth-child(28) {
  transform: rotate(100.8deg) translate3d(100px, 0, 0);
}
i:nth-child(28) b {
  animation-delay: 0.85714s;
}

i:nth-child(29) {
  transform: rotate(104.4deg) translate3d(100px, 0, 0);
}
i:nth-child(29) b {
  animation-delay: 0.88776s;
}

i:nth-child(30) {
  transform: rotate(108deg) translate3d(100px, 0, 0);
}
i:nth-child(30) b {
  animation-delay: 0.91837s;
}

i:nth-child(31) {
  transform: rotate(111.6deg) translate3d(100px, 0, 0);
}
i:nth-child(31) b {
  animation-delay: 0.94898s;
}

i:nth-child(32) {
  transform: rotate(115.2deg) translate3d(100px, 0, 0);
}
i:nth-child(32) b {
  animation-delay: 0.97959s;
}

i:nth-child(33) {
  transform: rotate(118.8deg) translate3d(100px, 0, 0);
}
i:nth-child(33) b {
  animation-delay: 1.0102s;
}

i:nth-child(34) {
  transform: rotate(122.4deg) translate3d(100px, 0, 0);
}
i:nth-child(34) b {
  animation-delay: 1.04082s;
}

i:nth-child(35) {
  transform: rotate(126deg) translate3d(100px, 0, 0);
}
i:nth-child(35) b {
  animation-delay: 1.07143s;
}

i:nth-child(36) {
  transform: rotate(129.6deg) translate3d(100px, 0, 0);
}
i:nth-child(36) b {
  animation-delay: 1.10204s;
}

i:nth-child(37) {
  transform: rotate(133.2deg) translate3d(100px, 0, 0);
}
i:nth-child(37) b {
  animation-delay: 1.13265s;
}

i:nth-child(38) {
  transform: rotate(136.8deg) translate3d(100px, 0, 0);
}
i:nth-child(38) b {
  animation-delay: 1.16327s;
}

i:nth-child(39) {
  transform: rotate(140.4deg) translate3d(100px, 0, 0);
}
i:nth-child(39) b {
  animation-delay: 1.19388s;
}

i:nth-child(40) {
  transform: rotate(144deg) translate3d(100px, 0, 0);
}
i:nth-child(40) b {
  animation-delay: 1.22449s;
}

i:nth-child(41) {
  transform: rotate(147.6deg) translate3d(100px, 0, 0);
}
i:nth-child(41) b {
  animation-delay: 1.2551s;
}

i:nth-child(42) {
  transform: rotate(151.2deg) translate3d(100px, 0, 0);
}
i:nth-child(42) b {
  animation-delay: 1.28571s;
}

i:nth-child(43) {
  transform: rotate(154.8deg) translate3d(100px, 0, 0);
}
i:nth-child(43) b {
  animation-delay: 1.31633s;
}

i:nth-child(44) {
  transform: rotate(158.4deg) translate3d(100px, 0, 0);
}
i:nth-child(44) b {
  animation-delay: 1.34694s;
}

i:nth-child(45) {
  transform: rotate(162deg) translate3d(100px, 0, 0);
}
i:nth-child(45) b {
  animation-delay: 1.37755s;
}

i:nth-child(46) {
  transform: rotate(165.6deg) translate3d(100px, 0, 0);
}
i:nth-child(46) b {
  animation-delay: 1.40816s;
}

i:nth-child(47) {
  transform: rotate(169.2deg) translate3d(100px, 0, 0);
}
i:nth-child(47) b {
  animation-delay: 1.43878s;
}

i:nth-child(48) {
  transform: rotate(172.8deg) translate3d(100px, 0, 0);
}
i:nth-child(48) b {
  animation-delay: 1.46939s;
}

i:nth-child(49) {
  transform: rotate(176.4deg) translate3d(100px, 0, 0);
}
i:nth-child(49) b {
  animation-delay: 1.5s;
}

i:nth-child(50) {
  transform: rotate(180deg) translate3d(100px, 0, 0);
}
i:nth-child(50) b {
  animation-delay: 1.53061s;
}

i:nth-child(51) {
  transform: rotate(183.6deg) translate3d(100px, 0, 0);
}
i:nth-child(51) b {
  animation-delay: 1.56122s;
}

i:nth-child(52) {
  transform: rotate(187.2deg) translate3d(100px, 0, 0);
}
i:nth-child(52) b {
  animation-delay: 1.59184s;
}

i:nth-child(53) {
  transform: rotate(190.8deg) translate3d(100px, 0, 0);
}
i:nth-child(53) b {
  animation-delay: 1.62245s;
}

i:nth-child(54) {
  transform: rotate(194.4deg) translate3d(100px, 0, 0);
}
i:nth-child(54) b {
  animation-delay: 1.65306s;
}

i:nth-child(55) {
  transform: rotate(198deg) translate3d(100px, 0, 0);
}
i:nth-child(55) b {
  animation-delay: 1.68367s;
}

i:nth-child(56) {
  transform: rotate(201.6deg) translate3d(100px, 0, 0);
}
i:nth-child(56) b {
  animation-delay: 1.71429s;
}

i:nth-child(57) {
  transform: rotate(205.2deg) translate3d(100px, 0, 0);
}
i:nth-child(57) b {
  animation-delay: 1.7449s;
}

i:nth-child(58) {
  transform: rotate(208.8deg) translate3d(100px, 0, 0);
}
i:nth-child(58) b {
  animation-delay: 1.77551s;
}

i:nth-child(59) {
  transform: rotate(212.4deg) translate3d(100px, 0, 0);
}
i:nth-child(59) b {
  animation-delay: 1.80612s;
}

i:nth-child(60) {
  transform: rotate(216deg) translate3d(100px, 0, 0);
}
i:nth-child(60) b {
  animation-delay: 1.83673s;
}

i:nth-child(61) {
  transform: rotate(219.6deg) translate3d(100px, 0, 0);
}
i:nth-child(61) b {
  animation-delay: 1.86735s;
}

i:nth-child(62) {
  transform: rotate(223.2deg) translate3d(100px, 0, 0);
}
i:nth-child(62) b {
  animation-delay: 1.89796s;
}

i:nth-child(63) {
  transform: rotate(226.8deg) translate3d(100px, 0, 0);
}
i:nth-child(63) b {
  animation-delay: 1.92857s;
}

i:nth-child(64) {
  transform: rotate(230.4deg) translate3d(100px, 0, 0);
}
i:nth-child(64) b {
  animation-delay: 1.95918s;
}

i:nth-child(65) {
  transform: rotate(234deg) translate3d(100px, 0, 0);
}
i:nth-child(65) b {
  animation-delay: 1.9898s;
}

i:nth-child(66) {
  transform: rotate(237.6deg) translate3d(100px, 0, 0);
}
i:nth-child(66) b {
  animation-delay: 2.02041s;
}

i:nth-child(67) {
  transform: rotate(241.2deg) translate3d(100px, 0, 0);
}
i:nth-child(67) b {
  animation-delay: 2.05102s;
}

i:nth-child(68) {
  transform: rotate(244.8deg) translate3d(100px, 0, 0);
}
i:nth-child(68) b {
  animation-delay: 2.08163s;
}

i:nth-child(69) {
  transform: rotate(248.4deg) translate3d(100px, 0, 0);
}
i:nth-child(69) b {
  animation-delay: 2.11224s;
}

i:nth-child(70) {
  transform: rotate(252deg) translate3d(100px, 0, 0);
}
i:nth-child(70) b {
  animation-delay: 2.14286s;
}

i:nth-child(71) {
  transform: rotate(255.6deg) translate3d(100px, 0, 0);
}
i:nth-child(71) b {
  animation-delay: 2.17347s;
}

i:nth-child(72) {
  transform: rotate(259.2deg) translate3d(100px, 0, 0);
}
i:nth-child(72) b {
  animation-delay: 2.20408s;
}

i:nth-child(73) {
  transform: rotate(262.8deg) translate3d(100px, 0, 0);
}
i:nth-child(73) b {
  animation-delay: 2.23469s;
}

i:nth-child(74) {
  transform: rotate(266.4deg) translate3d(100px, 0, 0);
}
i:nth-child(74) b {
  animation-delay: 2.26531s;
}

i:nth-child(75) {
  transform: rotate(270deg) translate3d(100px, 0, 0);
}
i:nth-child(75) b {
  animation-delay: 2.29592s;
}

i:nth-child(76) {
  transform: rotate(273.6deg) translate3d(100px, 0, 0);
}
i:nth-child(76) b {
  animation-delay: 2.32653s;
}

i:nth-child(77) {
  transform: rotate(277.2deg) translate3d(100px, 0, 0);
}
i:nth-child(77) b {
  animation-delay: 2.35714s;
}

i:nth-child(78) {
  transform: rotate(280.8deg) translate3d(100px, 0, 0);
}
i:nth-child(78) b {
  animation-delay: 2.38776s;
}

i:nth-child(79) {
  transform: rotate(284.4deg) translate3d(100px, 0, 0);
}
i:nth-child(79) b {
  animation-delay: 2.41837s;
}

i:nth-child(80) {
  transform: rotate(288deg) translate3d(100px, 0, 0);
}
i:nth-child(80) b {
  animation-delay: 2.44898s;
}

i:nth-child(81) {
  transform: rotate(291.6deg) translate3d(100px, 0, 0);
}
i:nth-child(81) b {
  animation-delay: 2.47959s;
}

i:nth-child(82) {
  transform: rotate(295.2deg) translate3d(100px, 0, 0);
}
i:nth-child(82) b {
  animation-delay: 2.5102s;
}

i:nth-child(83) {
  transform: rotate(298.8deg) translate3d(100px, 0, 0);
}
i:nth-child(83) b {
  animation-delay: 2.54082s;
}

i:nth-child(84) {
  transform: rotate(302.4deg) translate3d(100px, 0, 0);
}
i:nth-child(84) b {
  animation-delay: 2.57143s;
}

i:nth-child(85) {
  transform: rotate(306deg) translate3d(100px, 0, 0);
}
i:nth-child(85) b {
  animation-delay: 2.60204s;
}

i:nth-child(86) {
  transform: rotate(309.6deg) translate3d(100px, 0, 0);
}
i:nth-child(86) b {
  animation-delay: 2.63265s;
}

i:nth-child(87) {
  transform: rotate(313.2deg) translate3d(100px, 0, 0);
}
i:nth-child(87) b {
  animation-delay: 2.66327s;
}

i:nth-child(88) {
  transform: rotate(316.8deg) translate3d(100px, 0, 0);
}
i:nth-child(88) b {
  animation-delay: 2.69388s;
}

i:nth-child(89) {
  transform: rotate(320.4deg) translate3d(100px, 0, 0);
}
i:nth-child(89) b {
  animation-delay: 2.72449s;
}

i:nth-child(90) {
  transform: rotate(324deg) translate3d(100px, 0, 0);
}
i:nth-child(90) b {
  animation-delay: 2.7551s;
}

i:nth-child(91) {
  transform: rotate(327.6deg) translate3d(100px, 0, 0);
}
i:nth-child(91) b {
  animation-delay: 2.78571s;
}

i:nth-child(92) {
  transform: rotate(331.2deg) translate3d(100px, 0, 0);
}
i:nth-child(92) b {
  animation-delay: 2.81633s;
}

i:nth-child(93) {
  transform: rotate(334.8deg) translate3d(100px, 0, 0);
}
i:nth-child(93) b {
  animation-delay: 2.84694s;
}

i:nth-child(94) {
  transform: rotate(338.4deg) translate3d(100px, 0, 0);
}
i:nth-child(94) b {
  animation-delay: 2.87755s;
}

i:nth-child(95) {
  transform: rotate(342deg) translate3d(100px, 0, 0);
}
i:nth-child(95) b {
  animation-delay: 2.90816s;
}

i:nth-child(96) {
  transform: rotate(345.6deg) translate3d(100px, 0, 0);
}
i:nth-child(96) b {
  animation-delay: 2.93878s;
}

i:nth-child(97) {
  transform: rotate(349.2deg) translate3d(100px, 0, 0);
}
i:nth-child(97) b {
  animation-delay: 2.96939s;
}

i:nth-child(98) {
  transform: rotate(352.8deg) translate3d(100px, 0, 0);
}
i:nth-child(98) b {
  animation-delay: 3s;
}

i:nth-child(99) {
  transform: rotate(356.4deg) translate3d(100px, 0, 0);
}
i:nth-child(99) b {
  animation-delay: 3.03061s;
}

i:nth-child(100) {
  transform: rotate(360deg) translate3d(100px, 0, 0);
}
i:nth-child(100) b {
  animation-delay: 3.06122s;
}

@keyframes spin {
  0% {
    transform: scale(1);
  }
  15% {
    transform: translate(-3px, -3px) scale(3);
  }
  50% {
    transform: scale(1);
  }
}

JavaScript

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