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