• 炫酷爱心表白

    一、代码

    1. html>
    3. <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    4.     
    5.     <title>💗 Love you 💗title>
    6.     <style type="text/css">
    7.       body {
    8.         margin: 0;
    9.         overflow: hidden;
    10.         background: #000;
    11.       }
    12.       canvas {
    13.         position: absolute;
    14.         width: 100%;
    15.         height: 100%;
    16.       }
    17.       #pinkboard {
    18.         animation: anim 1.5s ease-in-out infinite;
    19.         -webkit-animation: anim 1.5s ease-in-out infinite;
    20.         -o-animation: anim 1.5s ease-in-out infinite;
    21.         -moz-animation: anim 1.5s ease-in-out infinite;
    22.       }
    23.       @keyframes anim {
    24.         0% {
    25.           transform: scale(0.8);
    26.         }
    27.         25% {
    28.           transform: scale(0.7);
    29.         }
    30.         50% {
    31.           transform: scale(1);
    32.         }
    33.         75% {
    34.           transform: scale(0.7);
    35.         }
    36.         100% {
    37.           transform: scale(0.8);
    38.         }
    39.       }
    40.       @-webkit-keyframes anim {
    41.         0% {
    42.           -webkit-transform: scale(0.8);
    43.         }
    44.         25% {
    45.           -webkit-transform: scale(0.7);
    46.         }
    47.         50% {
    48.           -webkit-transform: scale(1);
    49.         }
    50.         75% {
    51.           -webkit-transform: scale(0.7);
    52.         }
    53.         100% {
    54.           -webkit-transform: scale(0.8);
    55.         }
    56.       }
    57.       @-o-keyframes anim {
    58.         0% {
    59.           -o-transform: scale(0.8);
    60.         }
    61.         25% {
    62.           -o-transform: scale(0.7);
    63.         }
    64.         50% {
    65.           -o-transform: scale(1);
    66.         }
    67.         75% {
    68.           -o-transform: scale(0.7);
    69.         }
    70.         100% {
    71.           -o-transform: scale(0.8);
    72.         }
    73.       }
    74.       @-moz-keyframes anim {
    75.         0% {
    76.           -moz-transform: scale(0.8);
    77.         }
    78.         25% {
    79.           -moz-transform: scale(0.7);
    80.         }
    81.         50% {
    82.           -moz-transform: scale(1);
    83.         }
    84.         75% {
    85.           -moz-transform: scale(0.7);
    86.         }
    87.         100% {
    88.           -moz-transform: scale(0.8);
    89.         }
    90.       }
    91.       #name {
    92.         position: absolute;
    93.         top: 50%;
    94.         left: 50%;
    95.         transform: translate(-50%, -50%);
    96.         margin-top: -20px;
    97.         font-size: 46px;
    98.         color: #ea80b0;
    99.       }
    100. style>
    101.   <script src="./💗 Love you 💗_files/monitors.3.6.36.cn.js.下载" async="" crossorigin="anonymous">script><script src="./💗 Love you 💗_files/sentry.3.6.36.cn.js.下载" async="" crossorigin="anonymous">script>head>
    102.   <body>
    103.     <canvas id="pinkboard" width="1707" height="868">canvas>
    104.  
    105.     <canvas id="canvas" width="1707" height="868">canvas>
    106.  
    107.     <script type="text/javascript">
    108.       const colors = [
    109.         "#eec996",
    110.         "#8fb7d3",
    111.         "#b7d4c6",
    112.         "#c3bedd",
    113.         "#f1d5e4",
    114.         "#cae1d3",
    115.         "#f3c89d",
    116.         "#d0b0c3",
    117.         "#819d53",
    118.         "#c99294",
    119.         "#cec884",
    120.         "#ff8e70",
    121.         "#e0a111",
    122.         "#fffdf6",
    123.         "#cbd7ac",
    124.         "#e8c6c0",
    125.         "#dc9898",
    126.         "#ecc8ba",
    127.       ]; //用来设置的颜色
    128.       var canvas = document.getElementById("canvas");
    129.       var ctx = canvas.getContext("2d");
    130.       let count = 1;
    131.  
    132.       var ww = window.innerWidth;
    133.       var wh = window.innerHeight;
    134.  
    135.       var hearts = [];
    136.  
    137.       function init() {
    138.         requestAnimationFrame(render);
    139.         canvas.width = ww;
    140.         canvas.height = wh;
    141.         for (var i = 0; i < 100; i++) {
    142.           hearts.push(new Heart());
    143.         }
    144.       }
    145.  
    146.       function Heart() {
    147.         this.x = Math.random() * ww;
    148.         this.y = Math.random() * wh;
    149.         this.opacity = Math.random() * 0.5 + 0.5;
    150.         this.vel = {
    151.           x: (Math.random() - 0.5) * 4,
    152.           y: (Math.random() - 0.5) * 4,
    153.         };
    154.         this.targetScale = Math.random() * 0.15 + 0.02;
    155.         this.scale = this.targetScale * Math.random();
    156.       }
    157.  
    158.       Heart.prototype.update = function (i) {
    159.         this.x += this.vel.x;
    160.         this.y += this.vel.y;
    161.  
    162.         this.scale += (this.targetScale - this.scale) * 0.01;
    163.         if (this.x - this.width > ww || this.x + this.width < 0) {
    164.           this.scale = 0;
    165.           this.x = Math.random() * ww;
    166.         }
    167.         if (this.y - this.height > wh || this.y + this.height < 0) {
    168.           this.scale = 0;
    169.           this.y = Math.random() * wh;
    170.         }
    171.         this.width = 473.8;
    172.         this.height = 408.6;
    173.       };
    174.       Heart.prototype.draw = function (i) {
    175.         ctx.globalAlpha = this.opacity;
    176.         ctx.font = `${180 * this.scale}px "微软雅黑"`;
    177.         // ctx.font="20px";
    178.         ctx.fillStyle = colors[i % 18];
    179.         ctx.fillText(
    180.           "kawsar",
    181.           this.x - this.width * 0.5,
    182.           this.y - this.height * 0.5,
    183.           this.width,
    184.           this.height
    185.         );
    186.         // ctx.drawImage(
    187.         //   heartImage,
    188.         //   this.x - this.width * 0.5,
    189.         //   this.y - this.height * 0.5,
    190.         //   this.width,
    191.         //   this.height
    192.         // );
    193.       };
    194.  
    195.       function render() {
    196.         ctx.clearRect(0, 0, ww, wh);
    197.         // ctx.globalAlpha = 1;
    198.         // ctx.fillStyle = "rgba(255,255,255,0.3)";
    199.         // ctx.fillRect(0, 0, ww, wh);
    200.         for (var i = 0; i < 100; i++) {
    201.           hearts[i].update(i);
    202.           hearts[i].draw(i);
    203.         }
    204.         requestAnimationFrame(render);
    205.       }
    206.       init();
    207.  
    208.       // var heartImage = new Image();
    209.       // heartImage.onload = init();
    210.       // heartImage.src =
    211.       //   "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0NzMuOHB4IiBoZWlnaHQ9IjQwOC42cHgiIHZpZXdCb3g9IjAgMCA0NzMuOCA0MDguNiI+PHBhdGggZmlsbD0iI2QzMjkzMiIgZD0iTTQwNC42LDE2LjZDMzg1LjQsNi4xLDM2My41LDAsMzQwLDBjLTQxLjUsMC03OC41LDE4LjktMTAzLDQ4LjVDMjEyLjMsMTguOSwxNzUuMywwLDEzMy44LDAgYy0yMy4zLDAtNDUuMyw2LjEtNjQuNSwxNi42QzI3LjksMzkuNSwwLDgzLjQsMCwxMzMuOWMwLDE0LjQsMi40LDI4LjMsNi42LDQxLjJDMjkuNiwyNzguNCwyMzcsNDA4LjYsMjM3LDQwOC42IHMyMDcuMi0xMzAuMiwyMzAuMi0yMzMuNWM0LjMtMTIuOSw2LjYtMjYuOCw2LjYtNDEuMkM0NzMuOCw4My40LDQ0NS45LDM5LjYsNDA0LjYsMTYuNnoiLz48L3N2Zz4=";
    212.  
    213.       window.addEventListener("resize", function () {
    214.         ww = window.innerWidth;
    215.         wh = window.innerHeight;
    216.       });
    217. script>
    218.     <script>
    219.       /*
    220.        * Settings
    221.        */
    222.       var settings = {
    223.         particles: {
    224.           length: 500, // maximum amount of particles
    225.           duration: 2, // particle duration in sec
    226.           velocity: 100, // particle velocity in pixels/sec
    227.           effect: -0.75, // play with this for a nice effect
    228.           size: 30, // particle size in pixels
    229.         },
    230.       };
    231.  
    232.       /*
    233.        * RequestAnimationFrame polyfill by Erik M?ller
    234.        */
    235.       (function () {
    236.         var b = 0;
    237.         var c = ["ms", "moz", "webkit", "o"];
    238.         for (var a = 0; a < c.length && !window.requestAnimationFrame; ++a) {
    239.           window.requestAnimationFrame = window[c[a] + "RequestAnimationFrame"];
    240.           window.cancelAnimationFrame =
    241.             window[c[a] + "CancelAnimationFrame"] ||
    242.             window[c[a] + "CancelRequestAnimationFrame"];
    243.         }
    244.         if (!window.requestAnimationFrame) {
    245.           window.requestAnimationFrame = function (h, e) {
    246.             var d = new Date().getTime();
    247.             var f = Math.max(0, 16 - (d - b));
    248.             var g = window.setTimeout(function () {
    249.               h(d + f);
    250.             }, f);
    251.             b = d + f;
    252.             return g;
    253.           };
    254.         }
    255.         if (!window.cancelAnimationFrame) {
    256.           window.cancelAnimationFrame = function (d) {
    257.             clearTimeout(d);
    258.           };
    259.         }
    260.       })();
    261.  
    262.       /*
    263.        * Point class
    264.        */
    265.       var Point = (function () {
    266.         function Point(x, y) {
    267.           this.x = typeof x !== "undefined" ? x : 0;
    268.           this.y = typeof y !== "undefined" ? y : 0;
    269.         }
    270.         Point.prototype.clone = function () {
    271.           return new Point(this.x, this.y);
    272.         };
    273.         Point.prototype.length = function (length) {
    274.           if (typeof length == "undefined")
    275.             return Math.sqrt(this.x * this.x + this.y * this.y);
    276.           this.normalize();
    277.           this.x *= length;
    278.           this.y *= length;
    279.           return this;
    280.         };
    281.         Point.prototype.normalize = function () {
    282.           var length = this.length();
    283.           this.x /= length;
    284.           this.y /= length;
    285.           return this;
    286.         };
    287.         return Point;
    288.       })();
    289.  
    290.       /*
    291.        * Particle class
    292.        */
    293.  
    294.       var Particle = (function () {
    295.         function Particle() {
    296.           this.position = new Point();
    297.           this.velocity = new Point();
    298.           this.acceleration = new Point();
    299.           this.age = 0;
    300.         }
    301.         Particle.prototype.initialize = function (x, y, dx, dy) {
    302.           this.position.x = x;
    303.           this.position.y = y;
    304.           this.velocity.x = dx;
    305.           this.velocity.y = dy;
    306.           this.acceleration.x = dx * settings.particles.effect;
    307.           this.acceleration.y = dy * settings.particles.effect;
    308.           this.age = 0;
    309.         };
    310.         Particle.prototype.update = function (deltaTime) {
    311.           this.position.x += this.velocity.x * deltaTime;
    312.           this.position.y += this.velocity.y * deltaTime;
    313.           this.velocity.x += this.acceleration.x * deltaTime;
    314.           this.velocity.y += this.acceleration.y * deltaTime;
    315.           this.age += deltaTime;
    316.         };
    317.         Particle.prototype.draw = function (context, image) {
    318.           function ease(t) {
    319.             return --t * t * t + 1;
    320.           }
    321.           var size = image.width * ease(this.age / settings.particles.duration);
    322.           context.globalAlpha = 1 - this.age / settings.particles.duration;
    323.           context.drawImage(
    324.             image,
    325.             this.position.x - size / 2,
    326.             this.position.y - size / 2,
    327.             size,
    328.             size
    329.           );
    330.         };
    331.         return Particle;
    332.       })();
    333.  
    334.       /*
    335.        * ParticlePool class
    336.        */
    337.       var ParticlePool = (function () {
    338.         var particles,
    339.           firstActive = 0,
    340.           firstFree = 0,
    341.           duration = settings.particles.duration;
    342.  
    343.         function ParticlePool(length) {
    344.           // create and populate particle pool
    345.           particles = new Array(length);
    346.           for (var i = 0; i < particles.length; i++)
    347.             particles[i] = new Particle();
    348.         }
    349.         ParticlePool.prototype.add = function (x, y, dx, dy) {
    350.           particles[firstFree].initialize(x, y, dx, dy);
    351.  
    352.           // handle circular queue
    353.           firstFree++;
    354.           if (firstFree == particles.length) firstFree = 0;
    355.           if (firstActive == firstFree) firstActive++;
    356.           if (firstActive == particles.length) firstActive = 0;
    357.         };
    358.         ParticlePool.prototype.update = function (deltaTime) {
    359.           var i;
    360.  
    361.           // update active particles
    362.           if (firstActive < firstFree) {
    363.             for (i = firstActive; i < firstFree; i++)
    364.               particles[i].update(deltaTime);
    365.           }
    366.           if (firstFree < firstActive) {
    367.             for (i = firstActive; i < particles.length; i++)
    368.               particles[i].update(deltaTime);
    369.             for (i = 0; i < firstFree; i++) particles[i].update(deltaTime);
    370.           }
    371.  
    372.           // remove inactive particles
    373.           while (
    374.             particles[firstActive].age >= duration &&
    375.             firstActive != firstFree
    376.           ) {
    377.             firstActive++;
    378.             if (firstActive == particles.length) firstActive = 0;
    379.           }
    380.         };
    381.         ParticlePool.prototype.draw = function (context, image) {
    382.           // draw active particles
    383.           if (firstActive < firstFree) {
    384.             for (i = firstActive; i < firstFree; i++)
    385.               particles[i].draw(context, image);
    386.           }
    387.           if (firstFree < firstActive) {
    388.             for (i = firstActive; i < particles.length; i++)
    389.               particles[i].draw(context, image);
    390.             for (i = 0; i < firstFree; i++) particles[i].draw(context, image);
    391.           }
    392.         };
    393.         return ParticlePool;
    394.       })();
    395.  
    396.       /*
    397.        * Putting it all together
    398.        */
    399.       (function (canvas) {
    400.         var context = canvas.getContext("2d"),
    401.           particles = new ParticlePool(settings.particles.length),
    402.           particleRate =
    403.             settings.particles.length / settings.particles.duration, // particles/sec
    404.           time;
    405.  
    406.         // get point on heart with -PI <= t <= PI
    407.         function pointOnHeart(t) {
    408.           return new Point(
    409.             160 * Math.pow(Math.sin(t), 3),
    410.             130 * Math.cos(t) -
    411.               50 * Math.cos(2 * t) -
    412.               20 * Math.cos(3 * t) -
    413.               10 * Math.cos(4 * t) +
    414.               25
    415.           );
    416.         }
    417.  
    418.         // creating the particle image using a dummy canvas
    419.         var image = (function () {
    420.           var canvas = document.createElement("canvas"),
    421.             context = canvas.getContext("2d");
    422.           canvas.width = settings.particles.size;
    423.           canvas.height = settings.particles.size;
    424.           // helper function to create the path
    425.           function to(t) {
    426.             var point = pointOnHeart(t);
    427.             point.x =
    428.               settings.particles.size / 2 +
    429.               (point.x * settings.particles.size) / 350;
    430.             point.y =
    431.               settings.particles.size / 2 -
    432.               (point.y * settings.particles.size) / 350;
    433.             return point;
    434.           }
    435.           // create the path
    436.           context.beginPath();
    437.           var t = -Math.PI;
    438.           var point = to(t);
    439.           context.moveTo(point.x, point.y);
    440.           while (t < Math.PI) {
    441.             t += 0.01; // baby steps!
    442.             point = to(t);
    443.             context.lineTo(point.x, point.y);
    444.           }
    445.           context.closePath();
    446.           // create the fill
    447.           context.fillStyle = "#ea80b0";
    448.           context.fill();
    449.           // create the image
    450.           var image = new Image();
    451.           image.src = canvas.toDataURL();
    452.           return image;
    453.         })();
    454.  
    455.         // render that thing!
    456.         function render() {
    457.           // next animation frame
    458.           requestAnimationFrame(render);
    459.  
    460.           // update time
    461.           var newTime = new Date().getTime() / 1000,
    462.             deltaTime = newTime - (time || newTime);
    463.           time = newTime;
    464.  
    465.           // clear canvas
    466.           context.clearRect(0, 0, canvas.width, canvas.height);
    467.  
    468.           // create new particles
    469.           var amount = particleRate * deltaTime;
    470.           for (var i = 0; i < amount; i++) {
    471.             var pos = pointOnHeart(Math.PI - 2 * Math.PI * Math.random());
    472.             var dir = pos.clone().length(settings.particles.velocity);
    473.             particles.add(
    474.               canvas.width / 2 + pos.x,
    475.               canvas.height / 2 - pos.y,
    476.               dir.x,
    477.               -dir.y
    478.             );
    479.           }
    480.  
    481.           // update and draw particles
    482.           particles.update(deltaTime);
    483.           particles.draw(context, image);
    484.         }
    485.  
    486.         // handle (re-)sizing of the canvas
    487.         function onResize() {
    488.           canvas.width = canvas.clientWidth;
    489.           canvas.height = canvas.clientHeight;
    490.         }
    491.         window.onresize = onResize;
    492.  
    493.         // delay rendering bootstrap
    494.         setTimeout(function () {
    495.           onResize();
    496.           render();
    497.         }, 10);
    498.       })(document.getElementById("pinkboard"));
    499.  
    500.       // 参考：https://blog.csdn.net/weixin_57038822/article/details/121644240
    501. script>
    502.   
    503.  
    504. <div id="__FEISHU_CLIPPER__">div>body>html>

    二、实现效果展示

  • 相关阅读:
    SpringCloud Alibaba微服务实战六- 服务网关
    卷积神经网络(原理与代码实现)
    《OpenDRIVE1.6规格文档》3
    使用标准IO对bitmap打马赛克
    永安通配符和泛域名SSL证书的区别
    vscode带命令行参数进行调试Golang go-admin:正确配置如下：
    LeetCode 每日一题 2024/4/15-2024/4/21
    web前端-javascript-自增++和自减--(a++和++a，都在自身基础上+1，a--和--a都在自增基础上-1，自增和自减的练习)
    4. 微服务之Nacos配置管理
    2023山东科技大学计算机考研信息汇总
  • 原文地址：https://blog.csdn.net/qq_58546982/article/details/134429718