div+css背景光芒照耀转动动画效果代码
代码语言:html
所属分类:背景
代码描述:div+css背景光芒照耀转动动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> html { height: 100%; background: #ffee00; overflow: hidden; } body { height: 100%; display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; } .line { position: absolute; top: 50%; left: -50%; } .lines0 { width: 200%; height: 10px; background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: spin0 10s linear infinite; animation: spin0 10s linear infinite; -webkit-transform: rotateX(10deg) rotateZ(0deg); transform: rotateX(10deg) rotateZ(0deg); } .lines1 { width: 200%; height: 10px; background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: spin1 10s linear infinite; animation: spin1 10s linear infinite; -webkit-transform: rotateX(10deg) rotateZ(3.6deg); transform: rotateX(10deg) rotateZ(3.6deg); } .lines2 { width: 200%; height: 10px; background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: spin2 10s linear infinite; animation: spin2 10s linear infinite; -webkit-transform: rotateX(10deg) rotateZ(7.2deg); transform: rotateX(10deg) rotateZ(7.2deg); } .lines3 { width: 200%; height: 10px; background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: spin3 10s linear infinite; animation: spin3 10s linear infinite; -webkit-transform: rotateX(10deg) rotateZ(10.8deg); transform: rotateX(10deg) rotateZ(10.8deg); } .lines4 { width: 200%; height: 10px; background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: spin4 10s linear infinite; animation: spin4 10s linear infinite; -webkit-transform: rotateX(10deg) rotateZ(14.4deg); transform: rotateX(10deg) rotateZ(14.4deg); } .lines5 { width: 200%; height: 10px; background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: spin5 10s linear infinite; animation: spin5 10s linear infinite; -webkit-transform: rotateX(10deg) rotateZ(18deg); transform: rotateX(10deg) rotateZ(18deg); } .lines6 { width: 200%; height: 10px; background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: spin6 10s linear infinite; animation: spin6 10s linear infinite; -webkit-transform: rotateX(10deg) rotateZ(21.6deg); transform: rotateX(10deg) rotateZ(21.6deg); } .lines7 { width: 200%; height: 10px; background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: spin7 10s linear infinite; animation: spin7 10s linear infinite; -webkit-transform: rotateX(10deg) rotateZ(25.2deg); transform: rotateX(10deg) rotateZ(25.2deg); } .lines8 { width: 200%; height: 10px; background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: spin8 10s linear infinite; animation: spin8 10s linear infinite; -webkit-transform: rotateX(10deg) rotateZ(28.8deg); transform: rotateX(10deg) rotateZ(28.8deg); } .lines9 { width: 200%; height: 10px; background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: spin9 10s linear infinite; animation: spin9 10s linear infinite; -webkit-transform: rotateX(10deg) rotateZ(32.4deg); transform: rotateX(10deg) rotateZ(32.4deg); } .lines10 { width: 200%; height: 10px; background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: spin10 10s linear infinite; animation: spin10 10s linear infinite; -webkit-transform: rotateX(10deg) rotateZ(36deg); transform: rotateX(10deg) rotateZ(36deg); } .lines11 { width: 200%; height: 10px; background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: spin11 10s linear infinite; animation: spin11 10s linear infinite; -webkit-transform: rotateX(10deg) rotateZ(39.6deg); transform: rotateX(10deg) rotateZ(39.6deg); } .lines12 { width: 200%; height: 10px; background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: spin12 10s linear infinite; animation: spin12 10s linear infinite; -webkit-transform: rotateX(10deg) rotateZ(43.2deg); transform: rotateX(10deg) rotateZ(43.2deg); } .lines13 { width: 200%; height: 10px; background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: spin13 10s linear infinite; animation: spin13 10s linear infinite; -webkit-transform: rotateX(10deg) rotateZ(46.8deg); transform: rotateX(10deg) rotateZ(46.8deg); } .lines14 { width: 200%; height: 10px; background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: spin14 10s linear infinite; animation: spin14 10s linear infinite; -webkit-transform: rotateX(10deg) rotateZ(50.4deg); transform: rotateX(10deg) rotateZ(50.4deg); } .lines15 { width: 200%; height: 10px; background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: spin15 10s linear infinite; animation: spin15 10s linear infinite; -webkit-transform: rotateX(10deg) rotateZ(54deg); transform: rotateX(10deg) rotateZ(54deg); } .lines16 { width: 200%; height: 10px; background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: spin16 10s linear infinite; animation: spin16 10s linear infinite; -webkit-transform: rotateX(10deg) rotateZ(57.6deg); transform: rotateX(10deg) rotateZ(57.6deg); } .lines17 { width: 200%; height: 10px; background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: spin17 10s linear infinite; animation: spin17 10s linear infinite; -webkit-transform: rotateX(10deg) rotateZ(61.2deg); transform: rotateX(10deg) rotateZ(61.2deg); } .lines18 { width: 200%; height: 10px; background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: spin18 10s linear infinite; animation: spin18 10s linear infinite; -webkit-transform: rotateX(10deg) rotateZ(64.8deg); transform: rotateX(10deg) rotateZ(64.8deg); } .lines19 { width: 200%; height: 10px; background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: spin19 10s linear infinite; animation: spin19 10s linear infinite; -webkit-transform: rotateX(10deg) rotateZ(68.4deg); transform: rotateX(10deg) rotateZ(68.4deg); } .lines20 { width: 200%; height: 10px; background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: spin20 10s linear infinite; animation: spin20 10s linear infinite; -webkit-transform: rotateX(10deg) rotateZ(72deg); transform: rotateX(10deg) rotateZ(72deg); } .lines21 { width: 200%; height: 10px; background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: spin21 10s linear infinite; animation: spin21 10s linear infinite; -webkit-transform: rotateX(10deg) rotateZ(75.6deg); transform: rotateX(10deg) rotateZ(75.6deg); } .lines22 { width: 200%; height: 10px; background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: spin22 10s linear infinite; animation: spin22 10s linear infinite; -webkit-transform: rotateX(10deg) rotateZ(79.2deg); transform: rotateX(10deg) rotateZ(79.2deg); } .lines23 { width: 200%; height: 10px; background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: spin23 10s linear infinite; animation: spin23 10s linear infinite; -webkit-transform: rotateX(10deg) rotateZ(82.8deg); transform: rotateX(10deg) rotateZ(82.8deg); } .lines24 { width: 200%; height: 10px; background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: spin24 10s linear infinite; animation: spin24 10s linear infinite; -webkit-transform: rotateX(10deg) rotateZ(86.4deg); transform: rotateX(10deg) rotateZ(86.4deg); } .lines25 { width: 200%; height: 10px; background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: spin25 10s linear infinite; animation: spin25 10s linear infinite; -webkit-transform: rotateX(10deg) rotateZ(90deg); transform: rotateX(10deg) rotateZ(90deg); } .lines26 { width: 200%; height: 10px; background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: spin26 10s linear infinite; animation: spin26 10s linear infinite; -webkit-transform: rotateX(10deg) rotateZ(93.6deg); transform: rotateX(10deg) rotateZ(93.6deg); } .lines27 { width: 200%; height: 10px; background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: spin27 10s linear infinite; animation: spin27 10s linear infinite; -webkit-transform: rotateX(10deg) rotateZ(97.2deg); transform: rotateX(10deg) rotateZ(97.2deg); } .lines28 { width: 200%; height: 10px; background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: spin28 10s linear infinite; animation: spin28 10s linear infinite; -webkit-transform: rotateX(10deg) rotateZ(100.8deg); transform: rotateX(10deg) rotateZ(100.8deg); } .lines29 { width: 200%; height: 10px; background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: spin29 10s linear infinite; animation: spin29 10s linear infinite; -webkit-transform: rotateX(10deg) rotateZ(104.4deg); transform: rotateX(10deg) rotateZ(104.4deg); } .lines30 { width: 200%; height: 10px; background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: spin30 10s linear infinite; animation: spin30 10s linear infinite; -webkit-transform: rotateX(10deg) rotateZ(108deg); transform: rotateX(10deg) rotateZ(108deg); } .lines31 { width: 200%; height: 10px; background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: spin31 10s linear infinite; animation: spin31 10s linear infinite; -webkit-transform: rotateX(10deg) rotateZ(111.6deg); transform: rotateX(10deg) rotateZ(111.6deg); } .lines32 { width: 200%; height: 10px; background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: spin32 10s linear infinite; animation: spin32 10s linear infinite; -webkit-transform: rotateX(10deg) rotateZ(115.2deg); transform: rotateX(10deg) rotateZ(115.2deg); } .lines33 { width: 200%; height: 10px; background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: spin33 10s linear infinite; animation: spin33 10s linear infinite; -webkit-transform: rotateX(10deg) rotateZ(118.8deg); transform: rotateX(10deg) rotateZ(118.8deg); } .lines34 { width: 200%; height: 10px; background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: spin34 10s linear infinite; animation: spin34 10s linear infinite; -webkit-transform: rotateX(10deg) rotateZ(122.4deg); transform: rotateX(10deg) rotateZ(122.4deg); } .lines35 { width: 200%; height: 10px; background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: spin35 10s linear infinite; animation: spin35 10s linear infinite; -webkit-transform: rotateX(10deg) rotateZ(126deg); transform: rotateX(10deg) rotateZ(126deg); } .lines36 { width: 200%; height: 10px; background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: spin36 10s linear infinite; animation: spin36 10s linear infinite; -webkit-transform: rotateX(10deg) rotateZ(129.6deg); transform: rotateX(10deg) rotateZ(129.6deg); } .lines37 { width: 200%; height: 10px; background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: spin37 10s linear infinite; animation: spin37 10s linear infinite; -webkit-transform: rotateX(10deg) rotateZ(133.2deg); transform: rotateX(10deg) rotateZ(133.2deg); } .lines38 { width: 200%; height: 10px; background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: spin38 10s linear infinite; animation: spin38 10s linear infinite; -webkit-transform: rotateX(10deg) rotateZ(136.8deg); transform: rotateX(10deg) rotateZ(136.8deg); } .lines39 { width: 200%; height: 10px; background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: spin39 10s linear infinite; animation: spin39 10s linear infinite; -webkit-transform: rotateX(10deg) rotateZ(140.4deg); transform: rotateX(10deg) rotateZ(140.4deg); } .lines40 { width: 200%; height: 10px; background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: spin40 10s linear infinite; animation: spin40 10s linear infinite; -webkit-transform: rotateX(10deg) rotateZ(144deg); transform: rotateX(10deg) rotateZ(144deg); } .lines41 { width: 200%; height: 10px; background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: spin41 10s linear infinite; animation: spin41 10s linear infinite; -webkit-transform: rotateX(10deg) rotateZ(147.6deg); transform: rotateX(10deg) rotateZ(147.6deg); } .lines42 { width: 200%; height: 10px; background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: spin42 10s linear infinite; animation: spin42 10s linear infinite; -webkit-transform: rotateX(10deg) rotateZ(151.2deg); transform: rotateX(10deg) rotateZ(151.2deg); } .lines43 { width: 200%; height: 10px; background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: spin43 10s linear infinite; animation: spin43 10s linear infinite; -webkit-transform: rotateX(10deg) rotateZ(154.8deg); transform: rotateX(10deg) rotateZ(154.8deg); } .lines44 { width: 200%; height: 10px; background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: spin44 10s linear infinite; animation: spin44 10s linear infinite; -webkit-transform: rotateX(10deg) rotateZ(158.4deg); transform: rotateX(10deg) rotateZ(158.4deg); } .lines45 { width: 200%; height: 10px; background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: spin45 10s linear infinite; animation: spin45 10s linear infinite; -webkit-transform: rotateX(10deg) rotateZ(162deg); transform: rotateX(10deg) rotateZ(162deg); } .lines46 { width: 200%; height: 10px; background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: spin46 10s linear infinite; animation: spin46 10s linear infinite; -webkit-transform: rotateX(10deg) rotateZ(165.6deg); transform: rotateX(10deg) rotateZ(165.6deg); } .lines47 { width: 200%; height: 10px; background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: spin47 10s linear infinite; animation: spin47 10s linear infinite; -webkit-transform: rotateX(10deg) rotateZ(169.2deg); transform: rotateX(10deg) rotateZ(169.2deg); } .lines48 { width: 200%; height: 10px; background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: spin48 10s linear infinite; animation: spin48 10s linear infinite; -webkit-transform: rotateX(10deg) rotateZ(172.8deg); transform: rotateX(10deg) rotateZ(172.8deg); } .lines49 { width: 200%; height: 10px; background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: spin49 10s linear infinite; animation: spin49 10s linear infinite; -webkit-transform: rotateX(10deg) rotateZ(176.4deg); transform: rotateX(10deg) rotateZ(176.4deg); } .lines50 { width: 200%; height: 10px; background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: spin50 10s linear infinite; animation: spin50 10s linear infinite; -webkit-transform: rotateX(10deg) rotateZ(180deg); transform: rotateX(10deg) rotateZ(180deg); } .lines51 { width: 200%; height: 10px; background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: spin51 10s linear infinite; animation: spin51 10s linear infinite; -webkit-transform: rotateX(10deg) rotateZ(183.6deg); transform: rotateX(10deg) rotateZ(183.6deg); } .lines52 { width: 200%; height: 10px; background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: spin52 10s linear infinite; animation: spin52 10s linear infinite; -webkit-transform: rotateX(10deg) rotateZ(187.2deg); transform: rotateX(10deg) rotateZ(187.2deg); } .lines53 { width: 200%; height: 10px; background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: spin53 10s linear infinite; animation: spin53 10s linear infinite; -webkit-transform: rotateX(10deg) rotateZ(190.8deg); transform: rotateX(10deg) rotateZ(190.8deg); } .lines54 { width: 200%; height: 10px; background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: spin54 10s linear infinite; animation: spin54 10s linear infinite; -webkit-transform: rotateX(10deg) rotateZ(194.4deg); transform: rotateX(10deg) rotateZ(194.4deg); } .lines55 { width: 200%; height: 10px; background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: spin55 10s linear infinite; animation: spin55 10s linear infinite; -webkit-transform: rotateX(10deg) rotateZ(198deg); transform: rotateX(10deg) rotateZ(198deg); } .lines56 { width: 200%; height: 10px; background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: spin56 10s linear infinite; animation: spin56 10s linear infinite; -webkit-transform: rotateX(10deg) rotateZ(201.6deg); transform: rotateX(10deg) rotateZ(201.6deg); } .lines57 { width: 200%; height: 10px; background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: spin57 10s linear infinite; animation: spin57 10s linear infinite; -webkit-transform: rotateX(10deg) rotateZ(205.2deg); transform: rotateX(10deg) rotateZ(205.2deg); } .lines58 { width: 200%; height: 10px; background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: spin58 10s linear infinite; animation: spin58 10s linear infinite; -webkit-transform: rotateX(10deg) rotateZ(208.8deg); transform: rotateX(10deg) rotateZ(208.8deg); } .lines59 { width: 200%; height: 10px; background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: spin59 10s linear infinite; animation: spin59 10s linear infinite; -webkit-transform: rotateX(10deg) rotateZ(212.4deg); transform: rotateX(10deg) rotateZ(212.4deg); } .lines60 { width: 200%; height: 10px; background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: spin60 10s linear infinite; animation: spin60 10s linear infinite; -webkit-transform: rotateX(10deg) rotateZ(216deg); transform: rotateX(10deg) rotateZ(216deg); } .lines61 { width: 200%; height: 10px; background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: spin61 10s linear infinite; animation: spin61 10s linear infinite; -webkit-transform: rotateX(10deg) rotateZ(219.6deg); transform: rotateX(10deg) rotateZ(219.6deg); } .lines62 { width: 200%; height: 10px; background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: spin62 10s linear infinite; animation: spin62 10s linear infinite; -webkit-transform: rotateX(10deg) rotateZ(223.2deg); transform: rotateX(10deg) rotateZ(223.2deg); } .lines63 { width: 200%; height: 10px; background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: spin63 10s linear infinite; animation: spin63 10s linear infinite; -webkit-transform: rotateX(10deg) rotateZ(226.8deg); transform: rotateX(10deg) rotateZ(226.8deg); } .lines64 { width: 200%; height: 10px; background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: spin64 10s linear infinite; animation: spin64 10s linear infinite; -webkit-transform: rotateX(10deg) rotateZ(230.4deg); transform: rotateX(10deg) rotateZ(230.4deg); } .lines65 { width: 200%; height: 10px; background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: spin65 10s linear infinite; animation: spin65 10s linear infinite; -webkit-transform: rotateX(10deg) rotateZ(234deg); transform: rotateX(10deg) rotateZ(234deg); } .lines66 { width: 200%; height: 10px; background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: spin66 10s linear infinite; animation: spin66 10s linear infinite; -webkit-transform: rotateX(10deg) rotateZ(237.6deg); transform: rotateX(10deg) rotateZ(237.6deg); } .lines67 { width: 200%; height: 10px; background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: spin67 10s linear infinite; animation: spin67 10s linear infinite; -webkit-transform: rotateX(10deg) rotateZ(241.2deg); transform: rotateX(10deg) rotateZ(241.2deg); } .lines68 { width: 200%; height: 10px; background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: spin68 10s linear infinite; animation: spin68 10s linear infinite; -webkit-transform: rotateX(10deg) rotateZ(244.8deg); transform: rotateX(10deg) rotateZ(244.8deg); } .lines69 { width: 200%; height: 10px; background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: spin69 10s linear infinite; animation: spin69 10s linear infinite; -webkit-transform: rotateX(10deg) rotateZ(248.4deg); transform: rotateX(10deg) rotateZ(248.4deg); } .lines70 { width: 200%; height: 10px; background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: spin70 10s linear infinite; animation: spin70 10s linear infinite; -webkit-transform: rotateX(10deg) rotateZ(252deg); transform: rotateX(10deg) rotateZ(252deg); } .lines71 { width: 200%; height: 10px; background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: spin71 10s linear infinite; animation: spin71 10s linear infinite; -webkit-transform: rotateX(10deg) rotateZ(255.6deg); transform: rotateX(10deg) rotateZ(255.6deg); } .lines72 { width: 200%; height: 10px; background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: spin72 10s linear infinite; animation: spin72 10s linear infinite; -webkit-transform: rotateX(10deg) rotateZ(259.2deg); transform: rotateX(10deg) rotateZ(259.2deg); } .lines73 { width: 200%; height: 10px; background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: spin73 10s linear infinite; animation: spin73 10s linear infinite; -webkit-transform: rotateX(10deg) rotateZ(262.8deg); transform: rotateX(10deg) rotateZ(262.8deg); } .lines74 { width: 200%; height: 10px; background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: spin74 10s linear infinite; animation: spin74 10s linear infinite; -webkit-transform: rotateX(10deg) rotateZ(266.4deg); transform: rotateX(10deg) rotateZ(266.4deg); } .lines75 { width: 200%; height: 10px; background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: spin75 10s linear infinite; animation: spin75 10s linear infinite; -webkit-transform: rotateX(10deg) rotateZ(270deg); transform: rotateX(10deg) rotateZ(270deg); } .lines76 { width: 200%; height: 10px; background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: spin76 10s linear infinite; animation: spin76 10s linear infinite; -webkit-transform: rotateX(10deg) rotateZ(273.6deg); transform: rotateX(10deg) rotateZ(273.6deg); } .lines77 { width: 200%; height: 10px; background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: spin77 10s linear infinite; animation: spin77 10s linear infinite; -webkit-transform: rotateX(10deg) rotateZ(277.2deg); transform: rotateX(10deg) rotateZ(277.2deg); } .lines78 { width: 200%; height: 10px; background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: spin78 10s linear infinite; animation: spin78 10s linear infinite; -webkit-transform: rotateX(10deg) rotateZ(280.8deg); transform: rotateX(10deg) rotateZ(280.8deg); } .lines79 { width: 200%; height: 10px; background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: spin79 10s linear infinite; animation: spin79 10s linear infinite; -webkit-transform: rotateX(10deg) rotateZ(284.4deg); transform: rotateX(10deg) rotateZ(284.4deg); } .lines80 { width: 200%; height: 10px; background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: spin80 10s linear infinite; animation: spin80 10s linear infinite; -webkit-transform: rotateX(10deg) rotateZ(288deg); transform: rotateX(10deg) rotateZ(288deg); } .lines81 { width: 200%; height: 10px; background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: spin81 10s linear infinite; animation: spin81 10s linear infinite; -webkit-transform: rotateX(10deg) rotateZ(291.6deg); transform: rotateX(10deg) rotateZ(291.6deg); } .lines82 { width: 200%; height: 10px; background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: spin82 10s linear infinite; animation: spin82 10s linear infinite; -webkit-transform: rotateX(10deg) rotateZ(295.2deg); transform: rotateX(10deg) rotateZ(295.2deg); } .lines83 { width: 200%; height: 10px; background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: spin83 10s linear infinite; animation: spin83 10s linear infinite; -webkit-transform: rotateX(10deg) rotateZ(298.8deg); transform: rotateX(10deg) rotateZ(298.8deg); } .lines84 { width: 200%; height: 10px; background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: spin84 10s linear infinite; animation: spin84 10s linear infinite; -webkit-transform: rotateX(10deg) rotateZ(302.4deg); transform: rotateX(10deg) rotateZ(302.4deg); } .lines85 { width: 200%; height: 10px; background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: spin85 10s linear infinite; animation: spin85 10s linear infinite; -webkit-transform: rotateX(10deg) rotateZ(306deg); transform: rotateX(10deg) rotateZ(306deg); } .lines86 { width: 200%; height: 10px; background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: spin86 10s linear infinite; animation: spin86 10s linear infinite; -webkit-transform: rotateX(10deg) rotateZ(309.6deg); transform: rotateX(10deg) rotateZ(309.6deg); } .lines87 { width: 200%; height: 10px; background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: spin87 10s linear infinite; animation: spin87 10s linear infinite; -webkit-transform: rotateX(10deg) rotateZ(313.2deg); transform: rotateX(10deg) rotateZ(313.2deg); } .lines88 { width: 200%; height: 10px; background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: spin88 10s linear infinite; animation: spin88 10s linear infinite; -webkit-transform: rotateX(10deg) rotateZ(316.8deg); transform: rotateX(10deg) rotateZ(316.8deg); } .lines89 { width: 200%; height: 10px; background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: spin89 10s linear infinite; animation: spin89 10s linear infinite; -webkit-transform: rotateX(10deg) rotateZ(320.4deg); transform: rotateX(10deg) rotateZ(320.4deg); } .lines90 { width: 200%; height: 10px; background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: spin90 10s linear infinite; animation: spin90 10s linear infinite; -webkit-transform: rotateX(10deg) rotateZ(324deg); transform: rotateX(10deg) rotateZ(324deg); } .lines91 { width: 200%; height: 10px; background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: spin91 10s linear infinite; animation: spin91 10s linear infinite; -webkit-transform: rotateX(10deg) rotateZ(327.6deg); transform: rotateX(10deg) rotateZ(327.6deg); } .lines92 { width: 200%; height: 10px; background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: spin92 10s linear infinite; animation: spin92 10s linear infinite; -webkit-transform: rotateX(10deg) rotateZ(331.2deg); transform: rotateX(10deg) rotateZ(331.2deg); } .lines93 { width: 200%; height: 10px; background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: spin93 10s linear infinite; animation: spin93 10s linear infinite; -webkit-transform: rotateX(10deg) rotateZ(334.8deg); transform: rotateX(10deg) rotateZ(334.8deg); } .lines94 { width: 200%; height: 10px; background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: spin94 10s linear infinite; animation: spin94 10s linear infinite; -webkit-transform: rotateX(10deg) rotateZ(338.4deg); transform: rotateX(10deg) rotateZ(338.4deg); } .lines95 { width: 200%; height: 10px; background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: spin95 10s linear infinite; animation: spin95 10s linear infinite; -webkit-transform: rotateX(10deg) rotateZ(342deg); transform: rotateX(10deg) rotateZ(342deg); } .lines96 { width: 200%; height: 10px; background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: spin96 10s linear infinite; animation: spin96 10s linear infinite; -webkit-transform: rotateX(10deg) rotateZ(345.6deg); transform: rotateX(10deg) rotateZ(345.6deg); } .lines97 { width: 200%; height: 10px; background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: spin97 10s linear infinite; animation: spin97 10s linear infinite; -webkit-transform: rotateX(10deg) rotateZ(349.2deg); transform: rotateX(10deg) rotateZ(349.2deg); } .lines98 { width: 200%; height: 10px; background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: spin98 10s linear infinite; animation: spin98 10s linear infinite; -webkit-transform: rotateX(10deg) rotateZ(352.8deg); transform: rotateX(10deg) rotateZ(352.8deg); } .lines99 { width: 200%; height: 10px; background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: spin99 10s linear infinite; animation: spin99 10s linear infinite; -webkit-transform: rotateX(10deg) rotateZ(356.4deg); transform: rotateX(10deg) rotateZ(356.4deg); } .lines100 { width: 200%; height: 10px; background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: spin100 10s linear infinite; animation: spin100 10s linear infinite; -webkit-transform: rotateX(10deg) rotateZ(360deg); transform: rotateX(10deg) rotateZ(360deg); } @-webkit-keyframes spin0 { 0% { -webkit-transform: rotateZ(0deg); transform: rotateZ(0deg); } 100% { -webkit-transform: rotateZ(360deg); transform: rotateZ(360deg); } } @keyframes spin0 { 0% { -webkit-transform: rotateZ(0deg); transform: rotateZ(0deg); } 100% { -webkit-transform: rotateZ(360deg); transform: rotateZ(360deg); } } @-webkit-keyframes spin1 { 0% { -webkit-transform: rotateZ(3.6deg); transform: rotateZ(3.6deg); } 100% { -webkit-transform: rotateZ(363.6deg); transform: rotateZ(363.6deg); } } @keyframes spin1 { 0% { -webkit-transform: rotateZ(3.6deg); transform: rotateZ(3.6deg); } 100% { -webkit-transform: rotateZ(363.6deg); transform: rotateZ(363.6deg); } } @-webkit-keyframes spin2 { 0% { -webkit-transform: rotateZ(7.2deg); transform: rotateZ(7.2deg); } 100% { -webkit-transform: rotateZ(367.2deg); transform: rotateZ(367.2deg); } } @keyframes spin2 { 0% { -webkit-transform: rotateZ(7.2deg); transform: rotateZ(7.2deg); } 100% { -webkit-transform: rotateZ(367.2deg); transform: rotateZ(367.2deg); } } @-webkit-keyframes spin3 { 0% { -webkit-transform: rotateZ(10.8deg); transform: rotateZ(10.8deg); } 100% { -webkit-transform: rotateZ(370.8deg); transform: rotateZ(370.8deg); } } @keyframes spin3 { 0% { -webkit-transform: rotateZ(10.8deg); transform: rotateZ(10.8deg); } 100% { -webkit-transform: rotateZ(370.8deg); transform: rotateZ(370.8deg); } } @-webkit-keyframes spin4 { 0% { -webkit-transform: rotateZ(14.4deg); transform: rotateZ(14.4deg); } 100% { -webkit-transform: rotateZ(374.4deg); transform: rotateZ(374.4deg); } } @keyframes spin4 { 0% { -webkit-transform: rotateZ(14.4deg); transform: rotateZ(14.4deg); } 100% { -webkit-transform: rotateZ(374.4deg); transform: rotateZ(374.4deg); } } @-webkit-keyframes spin5 { 0% { -webkit-transform: rotateZ(18deg); transform: rotateZ(18deg); } 100% { -webkit-transform: rotateZ(378deg); transform: rotateZ(378deg); } } @keyframes spin5 { 0% { -webkit-transform: rotateZ(18deg); transform: ro.........完整代码请登录后点击上方下载按钮下载查看
网友评论0