定制小程序开发女朋友生气了怎么办？定制小程序开发哄她的利器来了（建议收藏）
- 定制小程序开发程序猿同胞们经常被叫做“直男”（定制小程序开发对此我们十分气愤）
- 于是，定制小程序开发我们准备制造一些浪漫，定制小程序开发给女朋友的专属惊喜
1. 文字表白 + 雪花动态效果
1.1 效果展示
1.2 html代码
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>520，我想对你说</title> </head> <body> <p class="words"> ****年**月**日，是我第一次遇见你。 天也欢喜，地也欢喜，人也欢喜，欢喜你遇见了我，我也遇见了你。 偷偷在草稿纸上写你名字的人是我，下雪时偷偷在雪地里写你名字的是我， 对反光镜哈气写你名字的是我，为了和你偶遇不惜绕路的是我，想为你瘦下来的是我，可是不知道的是你。 余生我只想和你看雪看星星看月亮，从诗词歌赋谈到人生理想。明月照回湖心，野鹤奔向闲云，而我慢慢步入你。 </p> <div class="img-con"> <img src="gf.jpg" /> </div> </body></html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
1.3 CSS部分
<style>* { margin: 0; padding: 0; list-style: none;}body { height: 100vh; background: radial-gradient(ellipse at bottom, #1b2735 0, #090a0f 100%); filter: drop-shadow(0 0 10px white); position: relative; overflow: hidden;}.snow { width: 10px; height: 10px; border-radius: 50%; background-color: #fff; position: absolute;}.words{ position: fixed; left: 50%; top:30%; transform: translate(-50%,-50%); color: #fff; font-size: 1.5em; line-height: 2em; font-weight: 500; display: flex; flex-wrap: wrap; width: 1000px; }.img-con{ width: 100%; height: 200px; text-align: center; position: fixed; top: 50%; display: none;}.img-con > img{ width: 300px;}.words span{ animation: jumpin 0.5s ease-out both; }@keyframes jumpin { from{ transform: translateY(-20%); opacity: 0; } to{ transform: translateY(0); opacity: 1; }}</style>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
1.4 JS文件
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><script> $(function () { var words=$(".words").text().split(""); // 查看文字 console.log(words); $(".words").empty(); words.forEach((w,i)=>{ // 属性定义动画于何时开始，即从动画应用在元素上到动画开始的这段时间的长度。 $(`<span>${w}</span>`).css({ "animation-delay": 0.1*i+'s' }).appendTo($(".words")); }); for(var i=0;i<200;i++) { var x=Math.random()*100; var y=Math.random()*100; // 大于0 小于1的随机数 console.log(scale) var scale=Math.random(); var opacity=Math.random(); var t1=Math.random()*20+10; var t2=Math.random()*30; var o=Math.random()*20-10; var x1=x+o; var x2=x+o/2; // 随机数产生雪花 以及大小 $(`<style> @keyframes fall${i} { ${y}%{ transform: translate(${x1}vw, ${y}vh) scale(${scale}); } to{ transform: translate(${x2}vw,100vh) scale(${scale}); } } </style>`).appendTo($("head")); $('<div class="snow"></div>') .css({ "transform": `translate(${x}vw, -10px) scale(${scale})`, "opacity": opacity, "animation": `fall${i} ${t1}s -${t2}s linear infinite` }).appendTo($("body")).end() setTimeout(()=>{ $(".img-con").fadeIn(2000); },23000) } })</script>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
2. 绘制爱心
2.1 效果展示
2.2 代码如下（直接复制即可）
- 文件中已经做了详细的注释
- 复制过去即可使用，非常方便
<!doctype html><html><head> <meta charset="utf-8"> <title>canvas 心</title> <style> html, body { height: 100%; padding: 0; margin: 0; background: #000; } canvas { position: absolute; width: 100%; height: 100%; } </style></head><body> <canvas id="pinkboard"></canvas> <script> /* * Settings */ var settings = { particles: { length: 500, // 最大颗粒量 duration: 2, // 过渡时间 velocity: 100, // 粒子速度 effect: -0.75, // 效果控制 size: 30, // 像素大小 }, }; /* * 多边形填充 */ (function () { var b = 0; var c = ["ms", "moz", "webkit", "o"]; for (var a = 0; a < c.length && !window.requestAnimationFrame; ++a) { window.requestAnimationFrame = window[c[a] + "RequestAnimationFrame"]; window.cancelAnimationFrame = window[c[a] + "CancelAnimationFrame"] || window[c[a] + "CancelRequestAnimationFrame"] } if (!window.requestAnimationFrame) { window.requestAnimationFrame = function (h, e) { var d = new Date().getTime(); var f = Math.max(0, 16 - (d - b)); var g = window.setTimeout(function () { h(d + f) }, f); b = d + f; return g } } if (!window.cancelAnimationFrame) { window.cancelAnimationFrame = function (d) { clearTimeout(d) } } }()); /* * 点的样式设置 */ var Point = (function () { function Point(x, y) { this.x = (typeof x !== 'undefined') ? x : 0; this.y = (typeof y !== 'undefined') ? y : 0; } Point.prototype.clone = function () { return new Point(this.x, this.y); }; Point.prototype.length = function (length) { if (typeof length == 'undefined') return Math.sqrt(this.x * this.x + this.y * this.y); this.normalize(); this.x *= length; this.y *= length; return this; }; Point.prototype.normalize = function () { var length = this.length(); this.x /= length; this.y /= length; return this; }; return Point; })(); /* * 粒子类 */ var Particle = (function () { function Particle() { this.position = new Point(); this.velocity = new Point(); this.acceleration = new Point(); this.age = 0; } Particle.prototype.initialize = function (x, y, dx, dy) { this.position.x = x; this.position.y = y; this.velocity.x = dx; this.velocity.y = dy; this.acceleration.x = dx * settings.particles.effect; this.acceleration.y = dy * settings.particles.effect; this.age = 0; }; Particle.prototype.update = function (deltaTime) { this.position.x += this.velocity.x * deltaTime; this.position.y += this.velocity.y * deltaTime; this.velocity.x += this.acceleration.x * deltaTime; this.velocity.y += this.acceleration.y * deltaTime; this.age += deltaTime; }; Particle.prototype.draw = function (context, image) { function ease(t) { return (--t) * t * t + 1; } var size = image.width * ease(this.age / settings.particles.duration); context.globalAlpha = 1 - this.age / settings.particles.duration; context.drawImage(image, this.position.x - size / 2, this.position.y - size / 2, size, size); }; return Particle; })(); /* * 字幕 */ var ParticlePool = (function () { var particles, firstActive = 0, firstFree = 0, duration = settings.particles.duration; function ParticlePool(length) { // 创建和填充粒子池 particles = new Array(length); for (var i = 0; i < particles.length; i++) particles[i] = new Particle(); } ParticlePool.prototype.add = function (x, y, dx, dy) { particles[firstFree].initialize(x, y, dx, dy); // 处理循环队列 firstFree++; if (firstFree == particles.length) firstFree = 0; if (firstActive == firstFree) firstActive++; if (firstActive == particles.length) firstActive = 0; }; ParticlePool.prototype.update = function (deltaTime) { var i; // 更新活动粒子 if (firstActive < firstFree) { for (i = firstActive; i < firstFree; i++) particles[i].update(deltaTime); } if (firstFree < firstActive) { for (i = firstActive; i < particles.length; i++) particles[i].update(deltaTime); for (i = 0; i < firstFree; i++) particles[i].update(deltaTime); } // 删除活动粒子 while (particles[firstActive].age >= duration && firstActive != firstFree) { firstActive++; if (firstActive == particles.length) firstActive = 0; } }; ParticlePool.prototype.draw = function (context, image) { // 画出粒子 if (firstActive < firstFree) { for (i = firstActive; i < firstFree; i++) particles[i].draw(context, image); } if (firstFree < firstActive) { for (i = firstActive; i < particles.length; i++) particles[i].draw(context, image); for (i = 0; i < firstFree; i++) particles[i].draw(context, image); } }; return ParticlePool; })(); /* * 把它们放在一起 */ (function (canvas) { var context = canvas.getContext('2d'), particles = new ParticlePool(settings.particles.length), particleRate = settings.particles.length / settings.particles.duration, // particles/sec time; // 重点放在心图案上 function pointOnHeart(t) { return new Point( 160 * Math.pow(Math.sin(t), 3), 130 * Math.cos(t) - 50 * Math.cos(2 * t) - 20 * Math.cos(3 * t) - 10 * Math.cos(4 * t) + 25 ); } // 使用虚拟画布创建粒子图像 var image = (function () { var canvas = document.createElement('canvas'), context = canvas.getContext('2d'); canvas.width = settings.particles.size; canvas.height = settings.particles.size; // 创建路径的助手函数 function to(t) { var point = pointOnHeart(t); point.x = settings.particles.size / 2 + point.x * settings.particles.size / 350; point.y = settings.particles.size / 2 - point.y * settings.particles.size / 350; return point; } // 创建开始路径 context.beginPath(); var t = -Math.PI; var point = to(t); context.moveTo(point.x, point.y); while (t < Math.PI) { t += 0.01; // 时间+1 point = to(t); context.lineTo(point.x, point.y); } context.closePath(); context.fillStyle = 'red'; context.fill(); // 创建图片 var image = new Image(); image.src = canvas.toDataURL(); return image; })(); function render() { // 执行动画 requestAnimationFrame(render); // 更新时间 var newTime = new Date().getTime() / 1000, deltaTime = newTime - (time || newTime); time = newTime; // 清除画布 context.clearRect(0, 0, canvas.width, canvas.height); // 创建新粒子 var amount = particleRate * deltaTime; for (var i = 0; i < amount; i++) { var pos = pointOnHeart(Math.PI - 2 * Math.PI * Math.random()); var dir = pos.clone().length(settings.particles.velocity); particles.add(canvas.width / 2 + pos.x, canvas.height / 2 - pos.y, dir.x, -dir.y); } // update and draw particles particles.update(deltaTime); particles.draw(context, image); } // 重新调整画布的大小 function onResize() { canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight; } window.onresize = onResize; // 定时器延时 setTimeout(function () { onResize(); render(); }, 10); })(document.getElementById('pinkboard'));</script></body></html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
- 148
- 149
- 150
- 151
- 152
- 153
- 154
- 155
- 156
- 157
- 158
- 159
- 160
- 161
- 162
- 163
- 164
- 165
- 166
- 167
- 168
- 169
- 170
- 171
- 172
- 173
- 174
- 175
- 176
- 177
- 178
- 179
- 180
- 181
- 182
- 183
- 184
- 185
- 186
- 187
- 188
- 189
- 190
- 191
- 192
- 193
- 194
- 195
- 196
- 197
- 198
- 199
- 200
- 201
- 202
- 203
- 204
- 205
- 206
- 207
- 208
- 209
- 210
- 211
- 212
- 213
- 214
- 215
- 216
- 217
- 218
- 219
- 220
- 221
- 222
- 223
- 224
- 225
- 226
- 227
- 228
- 229
- 230
- 231
- 232
- 233
- 234
- 235
- 236
- 237
- 238
- 239
- 240
- 241
- 242
- 243
- 244
- 245
- 246
- 247
- 248
- 249
- 250
- 251
- 252
- 253
- 254
- 255
- 256
- 257
- 258
- 259
- 260
- 261
- 262
- 263
- 264
3. 文字蒙版（比较简单）
3.1 效果展示（雪花会动~）
3.2 代码如下
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>文字蒙版效果实现</title> <style> *{ margin: 0; padding: 0; list-style: none; } body{ height: 100vh; position: relative; } img,h1{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; } img{ /* 最佳最完美的居中自动剪裁图片的功能 */ object-fit: cover; } h1{ font-size: 20vw; text-align: center; line-height: 100vh; /* 取值为screen时，背景色将作为源的补差色混合在一起 */ mix-blend-mode: screen; background-color: #fff; } </style></head><body> <img src="flower.gif" alt=""> <h1>我爱你</h1></body></html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
4. 文字渐显
4.1 效果展示
4.2 代码如下
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>文本效果</title> <style> * { margin: 0; padding: 0; list-style: none; } body { background-color: #0f0f0f; height: 100vh; display: flex; justify-content: center; align-items: center; } .mywords { color: #fff; font-size: 1.5em; line-height: 1.8em; margin: 0 1em; } .mywords span { animation: lightin 0.8s both; } /* from 0% */ @keyframes lightin { from { opacity: 0; } 65% { opacity: 1; text-shadow: 0 0 20px #fff; } 75% { opacity: 1; } to { opacity: 0.7; } } </style></head><body> <p class="mywords"> 喜欢一个人是藏不住的，即使嘴巴不说，也会从眼睛里跑出来。我喜欢你，认真且怂，从一而终。</br> </p> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <script> $(function() { var words=$(".mywords").text().split(""); $(".mywords").empty(); words.forEach((w,i)=>{ $(`<span>${w}</span>`) .css({ "animation-delay": 0.05*i+'s' }) .appendTo($(".mywords")); }) }) </script></body></html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
5.FAQ
- 记得引入图片！！！（这个本文就不提供了，毕竟我也没你女朋友微信）
- 文件路径记得检查
- 女朋友哄好了，或者追到妹子了，记得三连一波（重中之重！！！）
1. 希望本文能对大家有所帮助，如有错误，敬请指出
2. 原创不易，还请各位客官动动发财的小手支持一波（关注、评论、点赞、收藏）
3. 拜谢各位！后续将继续奉献优质好文