div+css实现彩色线条汇聚圆圈动画效果代码
代码语言:html
所属分类:动画
代码描述:div+css实现彩色线条汇聚圆圈动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> .container { position: fixed; top: 50%; left: 50%; width: 20vw; height: 20vw; transform: translate(-50%, -50%); } .element { position: absolute; mix-blend-mode: multiply; width: 20vw; height: 20vw; } .element::after { content: ""; display: inline-block; width: 100%; aspect-ratio: 1/1; border: 15px solid rgba(0, 0, 0, 0); border-bottom-color: magenta; border-right-color: magenta; border-radius: 50%; box-sizing: border-box; } .element:nth-child(0n+1) { animation: bounce0 6.5s linear infinite; } .element:nth-child(0n+1)::after { border-bottom-color: fuchsia; border-right-color: fuchsia; animation: rotate 6.5s linear infinite; } @keyframes bounce0 { 0% { transform: rotate(0deg) translateX(0) translateY(0); } 25% { transform: rotate(0deg) translateX(33%) translateY(33%); } 50% { transform: rotate(0deg) translateX(0) translateY(0); } 75% { transform: rotate(0deg) translateX(-33%) translateY(-33%); } 100% { transform: rotate(0deg) translateX(0) translateY(0); } } .element:nth-child(1n+2) { animation: bounce1 6.5s linear infinite; } .element:nth-child(1n+2)::after { border-bottom-color: yellow; border-right-color: yellow; animation: rotate 6.5s linear infinite; } @keyframes bounce1 { 0% { transform: rotate(40deg) translateX(0) translateY(0); } 25% { transform: rotate(40deg) translateX(33%) translateY(33%); } 50% { transform: rotate(40deg) translateX(0) translateY(0); } 75% { transform: rotate(40deg) translateX(-33%) translateY(-33%); } 100% { transform: rotate(40deg) translateX(0) translateY(0); } } .element:nth-child(2n+3) { animation: bounce2 6.5s linear infinite; } .element:nth-child(2n+3)::after { border-bottom-color: aqua; border-right-color: aqua; animation: rotate 6.5s linear infinite; } @keyframes bounce2 { 0% { transform: rotate(80deg) translateX(0) translateY(0); } 25% { transform: rotate(80deg) translateX(33%) translateY(33%); } 50% { transform: rotate(80deg) translateX(0) translateY(0); } 75% { transform: rotate(80deg) translateX(-33%) translateY(-33%); } 100% { transform: rotate(80deg) translateX(0) translateY(0); } } .element:nth-child(3n+4) { animation: bounce3 6.5s linear infinite; } .element:nth-child(3n+4)::after { border-bottom-color: fuchsia; border-right-color: fuchsia; animation: rotate 6.5s linear infinite; } @keyframes bounce3 { 0% { transform: rotate(120deg) translateX(0) translateY(0); } 25% { transform: rotate(120deg) translateX(33%) translateY(33%); } 50% { transform: rotate(120deg) translateX(0) translateY(0); } 75% { transform: rotate(120deg) translateX(-33%) translateY(-33%); } 100% { transform: rotate(120deg) translateX(0) translateY(0); } } .element:nth-child(4n+5) { animation: bounce4 6.5s linear infinite; } .element:nth-child(4n+5)::after { border-bottom-color: yellow; border-right-color: yellow; animation: rotate 6.5s linear infinite; } @keyframes bounce4 { 0% { transform: rotate(160deg) translateX(0) translateY(0); } 25% { transform: rotate(160deg) translateX(33%) translateY(33%); } 50% { transform: rotate(160deg) translateX(0) translateY(0); } 75% { transform: rotate(160deg) translateX(-3.........完整代码请登录后点击上方下载按钮下载查看
网友评论0