72个丰富的canvas webgl shader动画集合代码
代码语言:html
所属分类:动画
代码描述:72个丰富的canvas webgl shader动画集合代码
代码标签: 72 webgl shader 动画 集合 canvas
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: violet; border-radius: 4px; box-shadow: inset 2px 2px 2px indigo, inset -2px -2px 2px indigo; } ::-webkit-scrollbar-track { /* Big thanks to Temani Afif for the gradient */ /* https://codepen.io/t_afif/pen/KKGBKbV */ --s: 10px; /* control the size */ --_s: 0 0/var(--s) var(--s); background: radial-gradient(#0000 50%, #0002 54%, violet 57%) var(--_s), radial-gradient(circle at 40% 30%, #0000 4%, #000 90%) var(--_s), repeating-conic-gradient(violet 0 25%, white 0 50%) 0 0/calc(2*var(--s)) calc(2*var(--s)); } body { margin: 0; display: grid; align-items: center; justify-content: center; background: black; overflow-x: hidden; } canvas { position: absolute; inset: 0; width: 100vw; height: auto; object-fit: contain; } body > * { grid-column: 1/-1; grid-row: 1/-1; } body:has(.fullscreen) { cursor: cell; } #titles { display: flex; flex-wrap: wrap; justify-content: center; gap: 1em; padding: 1em 1em; } .card { position: relative; width: 150px; aspect-ratio: 1; font: 900 24px/1 system-ui; letter-spacing: .05em; text-transform: uppercase; text-shadow: 0 0 1px grey, 0 0 2px white, 0 -5px 4px violet, 2px -10px 6px indigo, -2px -10px 8px blue; } .card:not(.fullscreen) { --sign: 1; transition: scale 300ms ease-out 100ms; box-shadow: 0 calc(var(--sign) * 1px) 2px 0 grey, 0 calc(var(--sign) * 2px) 4px 0 white, 0 calc(var(--sign) * 4px) 8px 0 violet, 0 calc(var(--sign) * 8px) 16px 0 indigo, 0 calc(var(--sign) * 16px) 32px 0 blue; } .card::after { content: attr(data-title); display: grid; place-content: center; text-align: center; color: #fff; position: absolute; inset: 0; border-radius: inherit; opacity: 0; translate: 0 25%; } .card:hover:not(.fullscreen) { --sign: -1; cursor: pointer; scale: 1.05; } .card:hover:not(.fullscreen)::after { opacity: 1; translate: 0 0; } .card.fullscreen::after, .card:hover.fullscreen::after { translate: 0 0; } .card.fullscreen { position: absolute; inset: 0; width: 100vw; height: 100lvh; transition: all 200ms ease-out; } #titles:has(.fullscreen) .card:not(.fullscreen) { position: absolute; left: -100vw; } @media (min-width: 600px) { .card { width: 550px; aspect-ratio: 2; font-size: 4.5em; } .card.fullscreen { border-radius: unset; box-shadow: unset; } #titles { gap: 3em; } } @media (orientation: landscape) and (min-width: 600px) { .card::after { transition: all 400ms linear 300ms; } } </style> </head> <body> <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; out vec2 texcoord; void main(void) { texcoord = position; gl_Position = vec4(position, 0, 1); } </script> <script type="x-shader/x-fragment&q.........完整代码请登录后点击上方下载按钮下载查看
网友评论0