div+css实现文字流线光影动画效果代码
代码语言:html
所属分类:动画
代码描述:div+css实现文字流线光影动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Kanit:ital,wght@1,900&display=swap"); *, *::before, *::after { padding: 0; margin: 0 auto; box-sizing: border-box; transform-style: preserve-3d; } body { background-color: #000; color: #fff; min-height: 100vh; display: flex; justify-content: center; align-items: center; flex-direction: column; } .css { position: relative; filter: contrast(5); width: 68em; height: 40em; background-color: #000; margin-bottom: -9em; } .c, .s { position: absolute; top: 50%; transform: translate(-50%, -50%); } .c:nth-child(1), .s:nth-child(1) { left: calc(50% + -14em); --tos: 0s; } .c:nth-child(2), .s:nth-child(2) { left: calc(50% + 0em); --tos: 1.8s; } .c:nth-child(3), .s:nth-child(3) { left: calc(50% + 14em); --tos: 3.6s; } .c > div, .s > div { position: absolute; left: 50%; top: 50%; width: 1em; height: 3em; opacity: 0; transform: translate(-50%, -50%); border-radius: 50%; filter: blur(0.5em); } .c > div { -webkit-animation: CballOpacity 6s var(--ad) infinite cubic-bezier(0.4, 0, 0.6, 1), CballTop 6s calc(var(--ad) - 4.5s) infinite cubic-bezier(0.4, 0, 0.6, 1), CballLeft 6s var(--ad) infinite cubic-bezier(0.4, 0, 0.6, 1); animation: CballOpacity 6s var(--ad) infinite cubic-bezier(0.4, 0, 0.6, 1), CballTop 6s calc(var(--ad) - 4.5s) infinite cubic-bezier(0.4, 0, 0.6, 1), CballLeft 6s var(--ad) infinite cubic-bezier(0.4, 0, 0.6, 1); } .c > div:nth-child(1) { background-color: #e87d7d; --ad: calc(var(--tos) + 0s); } .c > div:nth-child(2) { background-color: #e8827d; --ad: calc(var(--tos) + 0.05s); } .c > div:nth-child(3) { background-color: #e8887d; --ad: calc(var(--tos) + 0.1s); } .c > div:nth-child(4) { background-color: #e88d7d; --ad: calc(var(--tos) + 0.15s); } .c > div:nth-child(5) { background-color: #e8927d; --ad: calc(var(--tos) + 0.2s); } .c > div:nth-child(6) { background-color: #e8987d; --ad: calc(var(--tos) + 0.25s); } .c > div:nth-child(7) { background-color: #e89d7d; --ad: calc(var(--tos) + 0.3s); } .c > div:nth-child(8) { background-color: #e8a27d; --ad: calc(var(--tos) + 0.35s); } .c > div:nth-child(9) { background-color: #e8a87d; --ad: calc(var(--tos) + 0.4s); } .c > div:nth-child(10) { background-color: #e8ad7d; --ad: calc(var(--tos) + 0.45s); } .c > div:nth-child(11) { background-color: #e8b37d; --ad: calc(var(--tos) + 0.5s); } .c > div:nth-child(12) { background-color: #e8b87d; --ad: calc(var(--tos) + 0.55s); } .c > div:nth-child(13) { background-color: #e8bd7d; --ad: calc(var(--tos) + 0.6s); } .c > div:nth-child(14) { background-color: #e8c37d; --ad: calc(var(--tos) + 0.65s); } .c > div:nth-child(15) { background-color: #e8c87d; --ad: calc(var(--tos) + 0.7s); } .c > div:nth-child(16) { background-color: #e8cd7d; --ad: calc(var(--tos) + 0.75s); } .c > div:nth-child(17) { background-color: #e8d37d; --ad: calc(var(--tos) + 0.8s); } .c > div:nth-child(18) { background-color: #e8d87d; --ad: calc(var(--tos) + 0.85s); } .c > div:nth-child(19) { background-color: #e8dd7d; --ad: calc(var(--tos) + 0.9s); } .c > div:nth-child(20) { background-color: #e8e37d; --ad: calc(var(--tos) + 0.95s); } .c > div:nth-child(21) { background-color: #e8e87d; --ad: calc(var(--tos) + 1s); } .c > div:nth-child(22) { background-color: #e3e87d; --ad: calc(var(--tos) + 1.05s); } .c > div:nth-child(23) { background-color: #dde87d; --ad: calc(var(--tos) + 1.1s); } .c > div:nth-child(24) { background-color: #d8e87d; --ad: calc(var(--tos) + 1.15s); } .c > div:nth-child(25) { background-color: #d3e87d; --ad: calc(var(--tos) + 1.2s); } .c > div:nth-child(26) { background-color: #cde87d; --ad: calc(var(--tos) + 1.25s); } .c > div:nth-child(27) { background-color: #c8e87d; --ad: calc(var(--tos) + 1.3s); } .c > div:nth-child(28) { background-color: #c3e87d; --ad: calc(var(--tos) + 1.35s); } .c > div:nth-child(29) { background-color: #bde87d; --ad: calc(var(--tos) + 1.4s); } .c > div:nth-child(30) { background-color: #b8e87d; --ad: calc(var(--tos) + 1.45s); } .c > div:nth-child(31) { background-color: #b3e87d; --ad: calc(var(--tos) + 1.5s); } .c > div:nth-child(32) { background-color: #ade87d; --ad: calc(var(--tos) + 1.55s); } .c > div:nth-child(33) { background-color: #a8e87d; --ad: calc(var(--tos) + 1.6s); } .c > div:nth-child(34) { background-color: #a2e87d; --ad: calc(var(--tos) + 1.65s); } .c > div:nth-child(35) { background-color: #9de87d; --ad: calc(var(--tos) + 1.7s); } .c > div:nth-child(36) { background-color: #98e87d; --ad: calc(var(--tos) + 1.75s); } .c > div:nth-child(37) { background-color: #92e87d; --ad: calc(var(--tos) + 1.8s); } .c > div:nth-child(38) { background-color: #8de87d; --ad: calc(var(--tos) + 1.85s); } .c > div:nth-child(39) { background-color: #88e87d; --ad: calc(var(--tos) + 1.9s); } .c > div:nth-child(40) { background-color: #82e87d; --ad: calc(var(--tos) + 1.95s); } .c > div:nth-child(41) { background-color: #7de87d; --ad: calc(var(--tos) + 2s); } .c > div:nth-child(42) { background-color: #7de882; --ad: calc(var(--tos) + 2.05s); } .c > div:nth-child(43) { background-color: #7de888; --ad: calc(var(--tos) + 2.1s); } .c > div:nth-child(44) { background-color: #7de88d; --ad: calc(var(--tos) + 2.15s); } .c > div:nth-child(45) { background-color: #7de892; --ad: calc(var(--tos) + 2.2s); } .c > div:nth-child(46) { background-color: #7de898; --ad: calc(var(--tos) + 2.25s); } .c > div:nth-child(47) { background-color: #7de89d; --ad: calc(var(--tos) + 2.3s); } .c > div:nth-child(48) { background-color: #7de8a2; --ad: calc(var(--tos) + 2.35s); } .c > div:nth-child(49) { ba.........完整代码请登录后点击上方下载按钮下载查看
网友评论0