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) { background-color: #7de8a8; --ad: calc(var(--tos) + 2.4s); } .c > div:nth-child(50) { background-color: #7de8ad; --ad: calc(var(--tos) + 2.45s); } .c > div:nth-child(51) { background-color: #7de8b3; --ad: calc(var(--tos) + 2.5s); } .c > div:nth-child(52) { background-color: #7de8b8; --ad: calc(var(--tos) + 2.55s); } .c > div:nth-child(53) { background-color: #7de8bd; --ad: calc(var(--tos) + 2.6s); } .c > div:nth-child(54) { background-color: #7de8c3; --ad: calc(var(--tos) + 2.65s); } .c > div:nth-child(55) { background-color: #7de8c8; --ad: calc(var(--tos) + 2.7s); } .c > div:nth-child(56) { background-color: #7de8cd; --ad: calc(var(--tos) + 2.75s); } .c > div:nth-child(57) { background-color: #7de8d3; --ad: calc(var(--tos) + 2.8s); } .c > div:nth-child(58) { background-color: #7de8d8; --ad: calc(var(--tos) + 2.85s); } .c > div:nth-child(59) { background-color: #7de8dd; --ad: calc(var(--tos) + 2.9s); } .c > div:nth-child(60) { background-color: #7de8e3; --ad: calc(var(--tos) + 2.95s); } .c > div:nth-child(61) { background-color: #7de8e8; --ad: calc(var(--tos) + 3s); } .c > div:nth-child(62) { background-color: #7de3e8; --ad: calc(var(--tos) + 3.05s); } .c > div:nth-child(63) { background-color: #7ddde8; --ad: calc(var(--tos) + 3.1s); } .c > div:nth-child(64) { background-color: #7dd8e8; --ad: calc(var(--tos) + 3.15s); } .c > div:nth-child(65) { background-color: #7dd3e8; --ad: calc(var(--tos) + 3.2s); } .c > div:nth-child(66) { background-color: #7dcde8; --ad: calc(var(--tos) + 3.25s); } .c > div:nth-child(67) { background-color: #7dc8e8; --ad: calc(var(--tos) + 3.3s); } .c > div:nth-child(68) { background-color: #7dc3e8; --ad: calc(var(--tos) + 3.35s); } .c > div:nth-child(69) { background-color: #7dbde8; --ad: calc(var(--tos) + 3.4s); } .c > div:nth-child(70) { background-color: #7db8e8; --ad: calc(var(--tos) + 3.45s); } .c > div:nth-child(71) { background-color: #7db3e8; --ad: calc(var(--tos) + 3.5s); } .c > div:nth-child(72) { background-color: #7dade8; --ad: calc(var(--tos) + 3.55s); } .c > div:nth-child(73) { background-color: #7da8e8; --ad: calc(var(--tos) + 3.6s); } .c > div:nth-child(74) { background-color: #7da2e8; --ad: calc(var(--tos) + 3.65s); } .c > div:nth-child(75) { background-color: #7d9de8; --ad: calc(var(--tos) + 3.7s); } .c > div:nth-child(76) { background-color: #7d98e8; --ad: calc(var(--tos) + 3.75s); } .c > div:nth-child(77) { background-color: #7d92e8; --ad: calc(var(--tos) + 3.8s); } .c > div:nth-child(78) { background-color: #7d8de8; --ad: calc(var(--tos) + 3.85s); } .c > div:nth-child(79) { background-color: #7d88e8; --ad: calc(var(--tos) + 3.9s); } .c > div:nth-child(80) { background-color: #7d82e8; --ad: calc(var(--tos) + 3.95s); } .c > div:nth-child(81) { background-color: #7d7de8; --ad: calc(var(--tos) + 4s); } .c > div:nth-child(82) { background-color: #827de8; --ad: calc(var(--tos) + 4.05s); } .c > div:nth-child(83) { background-color: #887de8; --ad: calc(var(--tos) + 4.1s); } .c > div:nth-child(84) { background-color: #8d7de8; --ad: calc(var(--tos) + 4.15s); } .c > div:nth-child(85) { background-color: #927de8; --ad: calc(var(--tos) + 4.2s); } .c > div:nth-child(86) { background-color: #987de8; --ad: calc(var(--tos) + 4.25s); } .c > div:nth-child(87) { background-color: #9d7de8; --ad: calc(var(--tos) + 4.3s); } .c > div:nth-child(88) { background-color: #a27de8; --ad: calc(var(--tos) + 4.35s); } .c > div:nth-child(89) { background-color: #a87de8; --ad: calc(var(--tos) + 4.4s); } .c > div:nth-child(90) { background-color: #ad7de8; --ad: calc(var(--tos) + 4.45s); } .c > div:nth-child(91) { background-color: #b37de8; --ad: calc(var(--tos) + 4.5s); } .c > div:nth-child(92) { background-color: #b87de8; --ad: calc(var(--tos) + 4.55s); } .c > div:nth-child(93) { background-color: #bd7de8; --ad: calc(var(--tos) + 4.6s); } .c > div:nth-child(94) { background-color: #c37de8; --ad: calc(var(--tos) + 4.65s); } .c > div:nth-child(95) { background-color: #c87de8; --ad: calc(var(--tos) + 4.7s); } .c > div:nth-child(96) { background-color: #cd7de8; --ad: calc(var(--tos) + 4.75s); } .c > div:nth-child(97) { background-color: #d37de8; --ad: calc(var(--tos) + 4.8s); } .c > div:nth-child(98) { background-color: #d87de8; --ad: calc(var(--tos) + 4.85s); } .c > div:nth-child(99) { background-color: #dd7de8; --ad: calc(var(--tos) + 4.9s); } .c > div:nth-child(100) { background-color: #e37de8; --ad: calc(var(--tos) + 4.95s); } .c > div:nth-child(101) { background-color: #e87de8; --ad: calc(var(--tos) + 5s); } .c > div:nth-child(102) { background-color: #e87de3; --ad: calc(var(--tos) + 5.05s); } .c > div:nth-child(103) { background-color: #e87ddd; --ad: calc(var(--tos) + 5.1s); } .c > div:nth-child(104) { background-color: #e87dd8; --ad: calc(var(--tos) + 5.15s); } .c > div:nth-child(105) { background-color: #e87dd3; --ad: calc(var(--tos) + 5.2s); } .c > div:nth-child(106) { background-color: #e87dcd; --ad: calc(var(--tos) + 5.25s); } .c > div:nth-child(107) { background-color: #e87dc8; --ad: calc(var(--tos) + 5.3s); } .c > div:nth-child(108) { background-color: #e87dc3; --ad: calc(var(--tos) + 5.35s); } .c > div:nth-child(109) { background-color: #e87dbd; --ad: calc(var(--tos) + 5.4s); } .c > div:nth-child(110) { background-color: #e87db8; --ad: calc(var(--tos) + 5.45s); } .c > div:nth-child(111) { background-color: #e87db3; --ad: calc(var(--tos) + 5.5s); } .c > div:nth-child(112) { background-color: #e87dad; --ad: calc(var(--tos) + 5.55s); } .c > div:nth-child(113) { background-color: #e87da8; --ad: calc(var(--tos) + 5.6s); } .c > div:nth-child(114) { background-color: #e87da2; --ad: calc(var(--tos) + 5.65s); } .c > div:nth-child(115) { background-color: #e87d9d; --ad: calc(var(--tos) + 5.7s); } .c > div:nth-child(116) { background-color: #e87d98; --ad: calc(var(--tos) + 5.75s); } .c > div:nth-child(117) { background-color: #e87d92; --ad: calc(var(--tos) + 5.8s); } .c > div:nth-child(118) { background-color: #e87d8d; --ad: calc(var(--tos) + 5.85s); } .c > div:nth-child(119) { background-color: #e87d88; --ad: calc(var(--tos) + 5.9s); } .c > div:nth-child(120) { background-color: #e87d82; --ad: calc(var(--tos) + 5.95s); } @-webkit-keyframes CballOpacity { 0%, 100% { opacity: 0; } 25%, 75% { opacity: 1; } } @keyframes CballOpacity { 0%, 100% { opacity: 0; } 25%, 75% { opacity: 1; } } @-webkit-keyframes CballTop { 0%, 100% { top: -9em; } 50% { top: 9em; } } @keyframes CballTop { 0%, 100% { top: -9em; } 50% { top: 9em; } } @-webkit-keyframes CballLeft { 0%, 100% { left: 6em; } 50% { left: -6em; } } @keyframes CballLeft { 0%, 100% { left: 6em; } 50% { left: -6em; } } .s > div { -webkit-animation: SballOpacity 6s calc(var(--ad) - 0.75s) infinite cubic-bezier(0.4, 0, 0.6, 1), SballTop 6s calc(var(--ad) - 5.25s) infinite cubic-bezier(0.4, 0, 0.6, 1), SballLeft 3s var(--ad) infinite cubic-bezier(0.4, 0, 0.6, 1); animation: SballOpacity 6s calc(var(--ad) - 0.75s) infinite cubic-bezier(0.4, 0, 0.6, 1), SballTop 6s calc(var(--ad) - 5.25s) infinite cubic-bezier(0.4, 0, 0.6, 1), SballLeft 3s var(--ad) infinite cubic-bezier(0.4, 0, 0.6, 1); } .s > div:nth-child(1) { background-color: #e87d7d; --ad: calc(var(--tos) + 0s); } .s > div:nth-child(2) { background-color: #e8817d; --ad: calc(var(--tos) + 0.0375s); } .s > div:nth-child(3) { background-color: #e8857d; --ad: calc(var(--tos) + 0.075s); } .s > div:nth-child(4) { background-color: #e8897d; --ad: calc(var(--tos) + 0.1125s); } .s > div:nth-child(5) { background-color: #e88d7d; --ad: calc(var(--tos) + 0.15s); } .s > div:nth-child(6) { background-color: #e8917d; --ad: calc(var(--tos) + 0.1875s); } .s > div:nth-child(7) { background-color: #e8957d; --ad: calc(var(--tos) + 0.225s); } .s > div:nth-child(8) { background-color: #e8997d; --ad: calc(var(--tos) + 0.2625s); } .s > div:nth-child(9) { background-color: #e89d7d; --ad: calc(var(--tos) + 0.3s); } .s > div:nth-child(10) { background-color: #e8a17d; --ad: calc(var(--tos) + 0.3375s); } .s > div:nth-child(11) { background-color: #e8a57d; --ad: calc(var(--tos) + 0.375s); } .s > div:nth-child(12) { background-color: #e8a97d; --ad: calc(var(--tos) + 0.4125s); } .s > div:nth-child(13) { background-color: #e8ad7d; --ad: calc(var(--tos) + 0.45s); } .s > div:nth-child(14) { background-color: #e8b17d; --ad: calc(var(--tos) + 0.4875s); } .s > div:nth-child(15) { background-color: #e8b57d; --ad: calc(var(--tos) + 0.525s); } .s > div:nth-child(16) { background-color: #e8b97d; --ad: calc(var(--tos) + 0.5625s); } .s > div:nth-child(17) { background-color: #e8bd7d; --ad: calc(var(--tos) + 0.6s); } .s > div:nth-child(18) { background-color: #e8c17d; --ad: calc(var(--tos) + 0.6375s); } .s > div:nth-child(19) { background-color: #e8c57d; --ad: calc(var(--tos) + 0.675s); } .s > div:nth-child(20) { background-color: #e8c97d; --ad: calc(var(--tos) + 0.7125s); } .s > div:nth-child(21) { background-color: #e8cd7d; --ad: calc(var(--tos) + 0.75s); } .s > div:nth-child(22) { background-color: #e8d17d; --ad: calc(var(--tos) + 0.7875s); } .s > div:nth-child(23) { background-color: #e8d57d; --ad: calc(var(--tos) + 0.825s); } .s > div:nth-child(24) { background-color: #e8d97d; --ad: calc(var(--tos) + 0.8625s); } .s > div:nth-child(25) { background-color: #e8dd7d; --ad: calc(var(--tos) + 0.9s); } .s > div:nth-child(26) { background-color: #e8e17d; --ad: calc(var(--tos) + 0.9375s); } .s > div:nth-child(27) { background-color: #e8e57d; --ad: calc(var(--tos) + 0.975s); } .s > div:nth-child(28) { background-color: #e7e87d; --ad: calc(var(--tos) + 1.0125s); } .s > div:nth-child(29) { background-color: #e3e87d; --ad: calc(var(--tos) + 1.05s); } .s > div:nth-child(30) { background-color: #dfe87d; --ad: calc(var(--tos) + 1.0875s); } .s > div:nth-child(31) { background-color: #dbe87d; --ad: calc(var(--tos) + 1.125s); } .s > div:nth-child(32) { background-color: #d7e87d; --ad: calc(var(--tos) + 1.1625s); } .s > div:nth-child(33) { background-color: #d3e87d; --ad: calc(var(--tos) + 1.2s); } .s > div:nth-child(34) { background-color: #cfe87d; --ad: calc(var(--tos) + 1.2375s); } .s > div:nth-child(35) { background-color: #cbe87d; --ad: calc(var(--tos) + 1.275s); } .s > div:nth-child(36) { background-color: #c7e87d; --ad: calc(var(--tos) + 1.3125s); } .s > div:nth-child(37) { background-color: #c3e87d; --ad: calc(var(--tos) + 1.35s); } .s > div:nth-child(38) { background-color: #bfe87d; --ad: calc(var(--tos) + 1.3875s); } .s > div:nth-child(39) { background-color: #bbe87d; --ad: calc(var(--tos) + 1.425s); } .s > div:nth-child(40) { background-color: #b7e87d; --ad: calc(var(--tos) + 1.4625s); } .s > div:nth-child(41) { background-color: #b3e87d; --ad: calc(var(--tos) + 1.5s); } .s > div:nth-child(42) { background-color: #aee87d; --ad: calc(var(--tos) + 1.5375s); } .s > div:nth-child(43) { background-color: #aae87d; --ad: calc(var(--tos) + 1.575s); } .s > div:nth-child(44) { background-color: #a6e87d; --ad: calc(var(--tos) + 1.6125s); } .s > div:nth-child(45) { background-color: #a2e87d; --ad: calc(var(--tos) + 1.65s); } .s > div:nth-child(46) { background-color: #9ee87d; --ad: calc(var(--tos) + 1.6875s); } .s > div:nth-child(47) { background-color: #9ae87d; --ad: calc(var(--tos) + 1.725s); } .s > div:nth-child(48) { background-color: #96e87d; --ad: calc(var(--tos) + 1.7625s); } .s > d.........完整代码请登录后点击上方下载按钮下载查看
网友评论0