div+css实现彩色炫酷六边形卷动动画效果代码
代码语言:html
所属分类:动画
代码描述:div+css实现彩色炫酷六边形卷动动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> html, body { width: 100%; height: 100%; } body { background-color: #140032; overflow: hidden; margin: 0; } body *, body *:after, body *:before { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } .hexagon { width: 150px; height: 75px; } .hexagon, .hexagon span { border-top-left-radius: 150px; border-bottom-right-radius: 150px; } .hexagon span { -webkit-animation: hexagon 3s linear infinite; animation: hexagon 3s linear infinite; } .hexagon span:after, .hexagon span:before { content: ""; background-color: currentColor; width: 10px; height: 10px; border-radius: 50%; } .hexagon span:before { transform: translate(75px, -37.5px); } .hexagon span:after { transform: translate(-75px, 37.5px); } .hexagon:nth-child(1) { transform: rotate(-7.2deg) translate(250px); color: #ff1f00; } .hexagon:nth-child(1) span { -webkit-animation-delay: -0.18s; animation-delay: -0.18s; background-color: rgba(255, 31, 0, 0.5); } .hexagon:nth-child(2) { transform: rotate(-14.4deg) translate(250px); color: #ff3d00; } .hexagon:nth-child(2) span { -webkit-animation-delay: -0.36s; animation-delay: -0.36s; background-color: rgba(255, 61, 0, 0.5); } .hexagon:nth-child(3) { transform: rotate(-21.6deg) translate(250px); color: #ff5c00; } .hexagon:nth-child(3) span { -webkit-animation-delay: -0.54s; animation-delay: -0.54s; background-color: rgba(255, 92, 0, 0.5); } .hexagon:nth-child(4) { transform: rotate(-28.8deg) translate(250px); color: #ff7a00; } .hexagon:nth-child(4) span { -webkit-animation-delay: -0.72s; animation-delay: -0.72s; background-color: rgba(255, 122, 0, 0.5); } .hexagon:nth-child(5) { transform: rotate(-36deg) translate(250px); color: #ff9900; } .hexagon:nth-child(5) span { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; background-color: rgba(255, 153, 0, 0.5); } .hexagon:nth-child(6) { transform: rotate(-43.2deg) translate(250px); color: #ffb800; } .hexagon:nth-child(6) span { -webkit-animation-delay: -1.08s; animation-delay: -1.08s; background-color: rgba(255, 184, 0, 0.5); } .hexagon:nth-child(7) { transform: rotate(-50.4deg) translate(250px); color: #ffd600; } .hexagon:nth-child(7) span { -webkit-animation-delay: -1.26s; animation-delay: -1.26s; background-color: rgba(255, 214, 0, 0.5); } .hexagon:nth-child(8) { transform: rotate(-57.6deg) translate(250px); color: #fff500; } .hexagon:nth-child(8) span { -webkit-animation-delay: -1.44s; animation-delay: -1.44s; background-color: rgba(255, 245, 0, 0.5); } .hexagon:nth-child(9) { transform: rotate(-64.8deg) translate(250px); color: #ebff00; } .hexagon:nth-child(9) span { -webkit-animation-delay: -1.62s; animation-delay: -1.62s; background-color: rgba(235, 255, 0, 0.5); } .hexagon:nth-child(10) { transform: rotate(-72deg) translate(250px); color: #ccff00; } .hexagon:nth-child(10) span { -webkit-animation-delay: -1.8s; animation-delay: -1.8s; background-color: rgba(204, 255, 0, 0.5); } .hexagon:nth-child(11) { transform: rotate(-79.2deg) translate(250px); color: #adff00; } .hexagon:nth-child(11) span { -webkit-animation-delay: -1.98s; animation-delay: -1.98s; background-color: rgba(173, 255, 0, 0.5); } .hexagon:nth-child(12) { transform: rotate(-86.4deg) translate(250px); color: #8fff00; } .hexagon:nth-child(12) span { -webkit-animation-delay: -2.16s; animation-delay: -2.16s; background-color: rgba(143, 255, 0, 0.5); } .hexagon:nth-child(13) { transform: rotate(-93.6deg) translate(250px); color: #70ff00; } .hexagon:nth-child(13) span { -webkit-animation-delay: -2.34s; animation-delay: -2.34s; background-color: rgba(112, 255, 0, 0.5); } .hexagon:nth-child(14) { transform: rotate(-100.8deg) translate(250px); color: #52ff00; } .hexagon:nth-child(14) span { -webkit-animation-delay: -2.52s; animation-delay: -2.52s; background-color: rgba(82, 255, 0, 0.5); } .hexagon:nth-child(15) { transform: rotate(-108deg) translate(250px); color: #33ff00; } .hexagon:nth-child(15) span { -webkit-animation-delay: -2.7s; animation-delay: -2.7s; background-color: rgba(51, 255, 0, 0.5); } .hexagon:nth-child(16) { transform: rotate(-115.2deg) translate(250px); color: #14ff00; } .hexagon:nth-child(16) span { -webkit-animation-delay: -2.88s; animation-delay: -2.88s; background-color: rgba(20, 255, 0, 0.5); } .hexagon:nth-child(17) { transform: rotate(-122.4deg) translate(250px); color: #00ff0a; } .hexagon:nth-child(17) span { -webkit-animation-delay: -3.06s; animation-delay: -3.06s; background-color: rgba(0, 255, 10, 0.5); } .hexagon:nth-child(18) { transform: rotate(-129.6deg) translate(250px); color: #00ff29; } .hexagon:nth-child(18) span { -webkit-animation-delay: -3.24s; animation-delay: -3.24s; background-color: rgba(0, 255, 41, 0.5); } .hexagon:nth-child(19) { transform: rotate(-136.8deg) translate(250px); color: #00ff47; } .hexagon:nth-child(19) span { -webkit-animation-delay: -3.42s; animation-delay: -3.42s; background-color: rgba(0, 255, 71, 0.5); } .hexagon:nth-child(20) { transform: rotate(-144deg) translate(250px); color: #00ff66; } .hexagon:nth-child(20) span { -webkit-animation-delay: -3.6s; animation-delay: -3.6s; background-color: rgba(0, 255, 102, 0.5); } .hexagon:nth-child(21) { transform: rotate(-151.2deg) translate(250px); color: #00ff85; } .hexagon:nth-child(21) span { -webkit-animation-delay: -3.78s; animation-delay: -3.78s; background-color: rgba(0, 255, 133, 0.5); } .hexagon:nth-child(22) { transform: rotate(-158.4deg) translate(250px); color: #00ffa3; } .hexagon:nth-child(22) span { -webkit-animation-delay: -3.96s; animation-delay: -3.96s; background-color: rgba(0, 255, 163, 0.5); } .hexagon:nth-child(23) { transform: rotate(-165.6deg) translate(250px); color: #00ffc2; } .hexagon:nth-child(23) span { -webkit-animation-delay: -4.14s; animation-delay: -4.14s; background-color: rgba(0, 255, 194, 0.5); } .hexagon:nth-child(24) { transform: rotate(-172.8deg) translate(250px); color: #00ffe0; } .hexagon:nth-child(24) span { -webkit-animation-delay: -4.32s; animation-delay: -4.32s; background-color: rgba(0, 255, 224, 0.5); } .hexagon:nth-child(25) { transform: rotate(-180deg) translate(250px); color: aqua; } .hexagon:nth-child(25) span { -webkit-animation-delay: -4.5s; animation-delay: -4.5s; background-color: rgba(0, 255, 255, 0.5); } .hexagon:nth-child(26) { transform: rotate(-187.2deg) translate(250px); color: #00e0ff; } .hexagon:nth-child(26) span { -webkit-animation-delay: -4.68s; animation-delay: -4.68s; background-color: rgba(0, 224, 255, 0.5); } .hexagon:nth-child(27) { transform: rotate(-194.4deg) translate(250px); color: #00c2ff; } .hexagon:nth-child(27) span { -webkit-animation-delay: -4.86s; animation-delay: -4.86s; background-color: rgba(0, 194, 255, 0.5); } .hexagon:nth-child(28) { transform: rotate(-201.6deg) translate(250px); color: #00a3ff; } .hexagon:nth-child(28) span { -webkit-animation-delay: -5.04s; animation-delay: -5.04s; background-color: rgba(0, 163, 255, 0.5); } .hexagon:nth-child(29) { transform: rotate(-208.8deg) translate(250px); color: #0085ff; } .hexagon:nth-child(29) span { -webkit-animation-delay: -5.22s; animation-delay: -5.22s; background-color: rgba(0, 133, 255, 0.5); } .hexagon:nth-child(30) { transform: rotate(-216deg) translate(250px); color: #0066ff; } .hexagon:nth-child(30) span { -webkit-animation-delay: -5.4s; animation-delay: -5.4s; background-color: rgba(0, 102, 255, 0.5); } .hexagon:nth-child(31) { transform: rotate(-223.2deg) translate(250px); color: #0047ff; } .hexagon:nth-child(31) span { -webkit-animation-delay: -5.58s; animation-delay: -5.58s; background-color: rgba(0, 71, 255, 0.5); } .hexagon:nth-child(32) { transform: rotate(-230.4deg) translate(250px); color: #0029ff; } .hexagon:nth-child(32) span { -webkit-animation-delay: -5.76s; animation-delay: -5.76s; background-color: rgba(0, 4.........完整代码请登录后点击上方下载按钮下载查看
网友评论0