webgl+canvas实现动态科技背景文字放大动画效果代码
代码语言:html
所属分类:动画
代码描述:webgl+canvas实现动态科技背景文字放大动画效果代码,有点像一个视频或ppt展示。
代码标签: webgl canvas 动态 科技 背景 文字 放大 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Orbitron:wght@900&display=swap"); body { margin: 0; display: grid; align-items: center; justify-content: center; overflow: hidden; } canvas { width: 100%; height: auto; object-fit: contain; } body > * { grid-column: 1/-1; grid-row: 1/-1; } div { display: grid; place-content: center; height: 100dvh; overflow: hidden; } div > * { grid-row: 1/-1; grid-column: 1/-1; display: block; text-align: center; font: 900 10vmin/1.2 "Orbitron", system-ui; color: white; letter-spacing: 5; text-transform: uppercase; translate: 0; scale: 1; opacity: 0; animation: grow 4s cubic-bezier(1, 0, .8, 1); animation-delay: 500ms; } span.zoom { font-size: 100vmin; } span.slide { position: relative; isolation: isolate; animation: glow 3.5s linear; animation-delay: 250ms; } span.slide::after { content: attr(data-text); position: absolute; inset: 0; -webkit-text-stroke: 0.2em #000; z-index: -1; } span.paper { --color: #000; --tr-start: 0 800px; color: var(--color); translate: 0; scale: 2; opacity: 0; filter: drop-shadow(2px 2px 2px var(--color)) invert(0.2); animation: appear 1.5s cubic-bezier(0.9, 0, 0.77, 1.18); animation-delay: 300ms; } span.paper:nth-of-type(even) { --tr-start: -1400px 0; --color: #f33; } @keyframes appear { 0% { translate: var(--tr-start); opacity: 0; } 5% { opacity: 0; } 15% { opacity: 1; } 20% { translate: 0; opacity: 1; } 50% { opacity: 1; } 80% { translate: 0; opacity: 0.1; } 85% { translate: 400px 0; } 90% { opacity: 0; } 95% { translate: 400px 0; opacity: 0; } 100% { translate: 400px 0; } } @keyframes glow { 0% { scale: 0.125; translate: 800px 0; opacity: 0; } 5% { opacity: 1; } 10% { translate: 0; opacity: 1; } 95% { scale: 4; opacity: 0; } 100% { scale: 4; opacity: 0; } } @keyframes grow { 0% { scale: .0125; opacity: 0; } 36% { opacity: 1; } 95% { opacity: 0; } 100% { scale: 3; opacity: 0; letter-spacing: 2em; } } </style> </head> <body translate="no"> <canvas id="canvas"></canvas> <div id="titles"></div> <script type="x-shader/x-vertex">#version 300 es #ifdef GL_FRAGMENT_PRECISION_HIGH precision highp float; #else precision mediump float; #endif in vec2 position; void main(void) { gl_Position = vec4(position, 0, 1); } </script> <script type="x-shader/x-fragment">#version 300 es /********* * made by Matthias Hurrle (@atzedent) */ #ifdef GL_FRAGMENT_PRECISION_HIGH precision highp float; #else precision mediump float; #endif out vec4 fragColor; uniform vec2 resolution; uniform float time; uniform float fade; #define T time #define S smoothstep #define TAU 6.2831853 float rnd(vec2 p) { return fract(sin(dot(p, p.yx + vec2(1234, 2345))) * 345678.); } vec3 grid(vec2 uv) { vec3 col = vec3(0); float n = 1.2; vec2 g = abs(mod(uv, n) - .5 * n); col = mix(vec3(1), vec3(0), S(.08, .0, min(g.x, g.y))); col = min(col, mix(vec3(1), vec3(0), .125)); return col; } void main(void) { vec2 uv = ( gl_FragCoord.xy - .5 * resolution ) / min(resolution.x, resolution.y); uv *= 48.7; vec3 col = grid(uv); float d = length(vec2(log(length(uv)) - T * .5, atan(abs(uv.y), abs(uv.y)) / TAU)); d = sin(d * dot(col, col)) - .05; d = abs(d); d = pow(.3 / d, .75); d = max(.0, d * mix(.75, 1., rnd(uv))); col *= mix(d, 1., 1. - min(1., S(.7, .8, T * .4))); col = mix(col, vec3(.01, .05, .052), .75); col = mix(col, vec3(1), S(.9, 1., fade * fade)); col = mix(col, vec3(0), 1. - min(1., S(.5, .8, T * .4))); fragColor = vec4(col, 1); } </script> <script type="x-shader/x-fragment">#version 300 es /********* * made by Matthias Hurrle (@atzedent) */ #ifdef GL_FRAGMENT_PRECISION_HIGH precision highp float; #else precision mediump float; #endif out vec4 fragColor; uniform vec2 resolution; uniform float time; uniform float fade; #define T time #define S smoothstep float rnd(vec2 p) { return fract(sin(dot(p, p.yx + vec2(1234, 2345))) * 345678.); } vec3 hue(float a) { return vec3(0) + step(a, .5); } vec3 grid(vec2 uv) { vec3 col = vec3(0); uv *= 98.7; float n = 1.2; vec2 g = abs(mod(uv, n) - .5 * n), id = floor(uv / n + .5); col = mix(vec3(1), vec3(0), S(.08, .0, min(g.x, g.y))); col = min( col, mix( vec3(1), hue( rnd( vec2( log(length(id * 100.)) - floor(10. * fract(T * 2.5)), atan(id.y, id.x) ) ) ), .65 ) ); return col * mix(.5, 1., rnd(id)); } void main(void) { vec2 uv = ( gl_FragCoord.xy - .5 * resolution ) / min(resolution.x, resolution.y); vec3 col = grid(uv); col = mix(col, vec3(.01, .05, .052) * 4., .125); col = mix(col, vec3(1), S(.9, 1., fade * fade)); col = mix(col, vec3(1), 1. - min(1., S(.0, 1., T * .8))); .........完整代码请登录后点击上方下载按钮下载查看
网友评论0