这是程序员表白系列中的100款网站表白之一，旨在让任何人都能使用并创建自己的表白网站给心爱的人看。 此波共有100个表白网站，可以任意修改和使用，很多人会希望向心爱的男孩女孩告白，生性腼腆的人即使那个TA站在眼前都不敢向前表白。说不出口的话就用短视频告诉TA吧~制作一个表白网页告诉TA你的心意,演示如下。
@TOC
一、网页介绍
1 网页简介：基于 HTML+CSS+JavaScript 制作七夕情人节表白网页、生日祝福、七夕告白、 求婚、浪漫爱情3D相册、炫酷代码 ,快来制作一款高端的表白网页送(他/她)浪漫的告白,制作修改简单,可自行更换背景音乐,文字和图片即可使用
2.网页编辑：任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
一、网页效果
二、代码展示
1.HTML代码
代码如下（示例）：以下仅展示部分代码供参考~
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Snowfall</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<script src="js/three.min.js"></script>
<script id="vertexShader" type="x-shader/x-vertex">
void main() {
gl_Position = vec4( position, 1.0 );
}
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
uniform sampler2D u_noise;
#define PI 3.141592653589793
#define TAU 6.
const float multiplier = 25.5;
const float zoomSpeed = 10.;
const int layers = 10;
const int octaves = 5;
vec2 hash2(vec2 p)
{
vec2 o = texture2D( u_noise, (p+0.5)/256.0, -100.0 ).xy;
return o;
}
mat2 rotate2d(float _angle){
return mat2(cos(_angle),sin(_angle),
-sin(_angle),cos(_angle));
}
vec3 hsb2rgb( in vec3 c ){
vec3 rgb = clamp(abs(mod(c.x*6.0+vec3(0.0,4.0,2.0),
6.0)-3.0)-1.0,
0.0,
1.0 );
rgb = rgb*rgb*(3.0-2.0*rgb);
return c.z * mix( vec3(1.0), rgb, c.y);
}
float hash(vec2 p)
{
float o = texture2D( u_noise, (p+0.5)/256.0, -100.0 ).x;
return o;
}
float noise(vec2 uv) {
vec2 id = floor(uv);
vec2 subuv = fract(uv);
vec2 u = subuv * subuv * (3. - 2. * subuv);
float a = hash(id);
float b = hash(id + vec2(1., 0.));
float c = hash(id + vec2(0., 1.));
float d = hash(id + vec2(1., 1.));
return mix(mix(a, b, u.x), mix(c, d, u.x), u.y);
}
float fbm(in vec2 uv) {
float s = .0;
float m = .0;
float a = .5;
for(int i = 0; i < octaves; i++) {
s += a * noise(uv);
m += a;
a *= .5;
uv *= 2.;
}
return s / m;
}
vec3 domain(vec2 z){
return vec3(hsb2rgb(vec3(atan(z.y,z.x)/TAU,1.,1.)));
}
vec3 colour(vec2 z) {
return domain(z);
}
// The render function is where we render the pattern to be added to the layer
vec3 render(vec2 uv, float scale, vec3 colour) {
vec2 id = floor(uv);
vec2 subuv = fract(uv);
vec2 rand = hash2(id);
float bokeh = abs(scale) * 1.;
float particle = 0.;
if(length(rand) > 1.3) {
vec2 pos = subuv-.5;
float field = length(pos);
particle = smoothstep(.3, 0., field);
particle += smoothstep(.4, 0.34 * bokeh, field);
}
return vec3(particle*2.);
}
vec3 renderLayer(int layer, int layers, vec2 uv, inout float opacity, vec3 colour, float n) {
vec2 _uv = uv;
// Scale
// Generating a scale value between zero and 1 based on a mod of u_time
// A frequency of 10 dixided by the layer index (10 / layers * layer)
float scale = mod((u_time + zoomSpeed / float(layers) * float(layer)) / zoomSpeed, -1.);
uv *= 20.; // The initial scale. Increasing this makes the cells smaller and the "speed" apepar faster
uv *= scale*scale; // then modifying the overall scale by the generated amount
// uv *= 1. + ( ( n*.5 ) * ( length(_uv) ) );
// uv += .5*float(layer);
uv = rotate2d(u_time / 10.) * uv; // rotarting
uv += vec2(25. + sin(u_time*.1)) * float(layer); // ofsetting the UV by an arbitrary amount to make the layer appear different
// render
vec3 pass = render(uv * multiplier, scale, colour) * .2; // render the pass
// this is the opacity of the layer fading in from the "bottom"
opacity = 1. + scale;
float _opacity = opacity;
// pass += n * .5 * mix(vec3(0., .5, 1.5), vec3(1., .5, 0.), opacity);
// This is the opacity of the layer fading out at the top (we want this minimal, hence the smoothstep)
float endOpacity = smoothstep(0., 0.4, scale * -1.);
opacity += endOpacity;
return pass * _opacity * endOpacity;
}
void main() {
vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy);
if(u_resolution.y < u_resolution.x) {
uv /= u_resolution.y;
} else {
uv /= u_resolution.x;
}
// uv.y += cos(u_time * .1) * .5;
// uv.x += sin(u_time * .1) * .5;
// float n = fbm(uv * 3. - 2.);
float n = fbm((uv + vec2(sin(u_time*.1), u_time*.1)) * 2. - 2.);
vec3 colour = vec3(0.);
// colour = n * mix(vec3(0., .5, 1.5), vec3(1., .5, -.1), n);
colour = n * mix(vec3(0., .5, 1.5), clamp(vec3(1., .5, .25)*2., 0., 1.), n);
// colour -= n*n*n*n*.4;
// colour += smoothstep(.8, 2.5, sin(n*n*n*8.))*.4;
float opacity = 1.;
float opacity_sum = 1.;
for(int i = 1; i <= layers; i++) {
colour += renderLayer(i, layers, uv, opacity, colour, n);
opacity_sum += opacity;
}
colour /= opacity_sum;
gl_FragColor = vec4(clamp(colour * 20., 0., 1.),1.0);
}
</script>
<div id="container" touch-action="none"></div>
<script src="js/script.js"></script>
</body>
</html>
2.CSS代码
body {
margin: 0;
padding: 0;
}
#container {
position: fixed;
touch-action: none;
}
三、精彩专栏
看到这里了就 【点赞，关注，收藏】 三连 支持下吧，你的支持是我创作的动力。
