div+css实现三角形线条光线动画效果代码
代码语言:html
所属分类:动画
代码描述:div+css实现三角形线条光线动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> :root { --wh: 5%; --cp: 10%; --ln: 0.45vmin; --sp: 3.75s; } body { margin: 0; padding: 0; width: 100vw; height: 100vh; overflow: hidden; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 50%, #010101, #030303); perspective: 100vmin; } body * { transform-style: preserve-3d; } .content { width: 60vmin; height: 60vmin; position: relative; display: flex; align-items: center; justify-content: center; } .content div { width: var(--wh); height: var(--wh); position: absolute; animation: loading var(--sp) ease 0s infinite; clip-path: polygon(50% var(--cp), 0% 100%, 100% 100%); } .content div:before, .content div:after { content: ""; position: absolute; width: var(--ln); height: 100%; bottom: 0.1vmin; transform-origin: 100% 100%; transform: rotate(29.85deg); border-radius: 1vmin; background: linear-gradient(0deg, #1fa5ff, #0b8cdf); } .content div:after { background: linear-gradient(180deg, #0b8cdf, #196291); transform: rotate(-29.85deg); transform-origin: 0% 100%; right: 0; } .content div span { background: linear-gradient(90deg, #fff0 25%, #0d4e78); width: 100%; height: var(--ln); position: absolute; bottom: 0; border-radius: 1vmin; z-index: 1; } .content div:nth-child(1) { animation-delay: calc(1 * calc(var(--sp) / 80)); --wh: calc(1 * 5%); margin-bottom: calc(1 * 1vmin); } .content div:nth-child(2) { animation-delay: calc(2 * calc(var(--sp) / 80)); --wh: calc(2 * 5%); margin-bottom: calc(2 * 1vmin); } .content div:nth-child(3) { animation-delay: calc(3 * calc(var(--sp) / 80)); --wh: calc(3 * 5%); margin-bottom: calc(3 * 1vmin); } .content div:nth-child(4) { animation-delay: calc(4 * calc(var(--sp) / 80)); --wh: calc(4 * 5%); margin-bottom: calc(4 * 1vmin); } .content div:nth-child(5) { animation-delay: calc(5 * calc(var(--sp) / 80)); --wh: calc(5 * 5%); margin-bottom: calc(5 * 1vmin); } .content div:nth-child(6) { animation-delay: calc(6 * calc(var(--sp) / 80)); --wh: calc(6 * 5%); margin-bottom: calc(6 * 1vmin); } .content div:nth-child(7) { animation-delay: calc(7 * calc(var(--sp) / 80)); --wh: calc(7 * 5%); margin-bottom: calc(7 * 1vmin); } .content div:nth-child(8) { animation-delay: calc(8 * calc(var(--sp) / 80)); --wh: calc(8 * 5%); margin-bottom: calc(8 * 1vmin); } .content div:nth-child(9) { animation-delay: calc(9 * calc(var(--sp) / 80)); --wh: calc(9 * 5%); margin-bottom: calc(9 * 1vmin); } .content div:nth-child(10) { animation-delay: calc(10 * calc(var(--sp) / 80)); --wh: calc(10 * 5%); margin-bottom: calc(10 * 1vmin); } .content div:nth-child(11) { animation-delay: calc(11 * calc(var(--sp) / 80)); --wh: calc(11 * 5%); margin-bottom: ca.........完整代码请登录后点击上方下载按钮下载查看
网友评论0