Web网页动态爱心代码绘制附有源码

本文链接：https://blog.csdn.net/Sea_yk/article/details/142466242

效果展示：

相信很多小伙伴希望可以给心爱的TA绘制一个超甜并且无限绽放的爱心，把网页发给对方对方用浏览器就能感受到你满满的心意，现在它来啦：
在这里插入图片描述

使用指南：

将源代码拷贝，保存成：你的文件名.html。推荐使用专业的前端编写器，如果追求方便的友友可以直接新建一个文本.txt，将代码复制粘贴后把文本后缀名改为.html即可。

废话不多说，上代码！

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>属于程序员佳羽.<div class=""></div></title>

<style>
html, body {
     
height: 100%;
padding: 0;
margin: 0;
background: hsl(300, 100%, 98%);
}
canvas {
     
width: 100%;
height: 100%;
}
</style>

</head>
<body>

<div style="text-align:center;clear:both;">
<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
<script src="/follow.js" type="text/javascript"></script>
</div>

<canvas id="pinkboard"></canvas>

<script>
/*
* Settings
*/
var settings = {
     
particles: {
     
length: 500, // maximum amount of particles
duration: 2, // particle duration in sec
velocity: 100, // particle velocity in pixels/sec
effect: -0.75, // play with this for a nice effect
size: 30, // particle size in pixels
},
};

/*
* RequestAnimationFrame polyfill by Erik M?ller
*/
(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