我正在参加「兔了个兔」创意投稿大赛，详情请看：「兔了个兔」创意投稿大赛
引言
兔年到了，我们一起欢庆的时候千万别忘记了兔年的幸福时刻，今天我们一起庆祝兔年的时候千万记得下面的这个时候啊，接下来我将为大我的作品兔年心动啊。
作品介绍
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>[WebGL] Heart Beats 💓</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<img src="./../1.png" alt="">
<!-- partial:index.partial.html -->
<script id="shader-vert-standard" type="x-shader/x-vertex">
varying vec2 vUv;
void main()
{
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}
</script>
<script id="shader-vert-feedback" type="x-shader/x-vertex">
uniform float time;
varying vec2 vUv;
varying vec3 vColor;
#define TAU 6.28318530717
// cf. http://www.iquilezles.org/www/articles/palettes/palettes.htm
vec3 cosPal(float t) {
return clamp(vec3(0.5)+vec3(0.5)*cos(TAU*(vec3(1.0)*t+vec3(0.00,0.33,0.67))),0.,1.);
}
void main()
{
vUv = uv;
vColor = cosPal(time/2.);
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}
</script>
<script id="shader-frag-feedback" type="x-shader/x-fragment">
uniform sampler2D feedbackTexture;
uniform sampler2D foregroundTexture;
varying vec2 vUv;
varying vec3 vColor;
void main( void ) {
vec3 txFeedback = texture2D(feedbackTexture, 0.86 * vUv + 0.07).rgb - vec3(0.001);
vec4 txForeground = texture2D(foregroundTexture, vUv);
float k = (txForeground.r + txForeground.g + txForeground.b) / 3.;
gl_FragColor = vec4(mix(txFeedback, k * vColor, txForeground.a), 1.0);
}
</script>
<script id="shader-vert-pulse" type="x-shader/x-vertex">
uniform float time;
uniform vec3 uColor;
varying float displacement;
varying vec2 vUv;
#define PI 3.14159265359
#define T (2.8333*time)
void main() {
vUv = uv;
displacement = clamp(1. - pow(5.*abs(0.2*(3.*uv.x-2.*uv.y)-fract(T)+0.25), 0.75), 0., 1.);
gl_Position = projectionMatrix*modelViewMatrix*vec4(position+normal*10.*displacement,1.);
}
</script>
<script id="shader-frag-heart" type="x-shader/x-fragment">
uniform float time;
varying float displacement;
varying vec2 vUv;
#define TAU 6.28318530717
// cf. http://www.iquilezles.org/www/articles/palettes/palettes.htm
vec3 cosPal(float t) {
return clamp(vec3(0.5)+vec3(0.5)*cos(TAU*(vec3(1.0)*t+vec3(0.00,0.33,0.67))),0.,1.);
}
void main( void ) {
gl_FragColor = vec4(mix(
vec3(displacement),
cosPal(0.), //cosPal(time), // baseColor,
0.5), 1.0);
}
</script>
<div id="container"></div>
</div>
<div id="controls">
<label for="resolution">resolution: </label>
<select id="resolution" name="resolution" value="2">
<option value="0.5">0.5x</option>
<option value="1">1x</option>
<option value="2" selected>2x</option>
<option value="4">4x</option>
<option value="8">8x</option>
</select>
<label for="behavior">behavior: </label>
<select id="behavior" name="behavior" value="autorotate">
<option value="static">static</option>
<option value="autorotate" selected>auto-rotate</option>
<option value="lookatmouse">look at mouse</option>
</select>
</div>
代码解析
首先我们通过动画的定义过程，配合了被进图的样式设置额兔子心跳在上下位置的跳动过程，然后通过css的配合完成了定位的需要，灵活的设置和调整了背景的搭配，完美的呈现出每秒的表现形式，最后我们看看js的核心设置过程还添加了对象的配置属性，最后的解雇就是界面呈现的兔子心动过程了
总结
通过上面的兔年作品希望大家可以收获到我的祝福，希望大家可以在兔年收获事业，爱情，金钱等等等，最后真切的祝福大家新年快乐，兔年吉祥。
