动态爱心表白代码

子非鱼呀

已于 2022-11-15 20:59:21 修改

阅读量2.1k

点赞数 3

分类专栏：前端趣玩文章标签： css javascript css3

于 2022-11-08 23:42:41 首次发布

本文链接：https://blog.csdn.net/weixin_56028042/article/details/127760975

版权

效果图：

可以直接复制，新建文本文档(txt文件)，复制保存后将后缀名改为html


<!doctype html>
<html>
 
<head>
    <meta charset="utf-8">
    <title>love++</title>
 
    <style>
        html,
        body {
 
            width: 500px;
            height: 300px;
            left: 50px;
            top: 30px;
            margin: 100px 289px;
 
            background: #f6d8e2;
        }
 
        pp1 {
            position: absolute;
            top: 20px;
            left: 20px;
        }
 
        canvas {
            position: absolute;
            width: 1000px;
            height: 500px;
            left: 135px;
            top: 50px;
        }
    </style>
    <link href="css/default.css" type="text/css" rel="stylesheet">
    <script type="text/javascript" src="d.js"></script>
 
   
</head>
 
<div id="myContent"></div>
<div id="contentToWrite" class="comments" 
 style="margin-left: 39px;color: red;">此处</div>
<div id="contentToWrite" class="comments" 
 style="margin-left: 39px;color:#f6d8e2;">00</div>
<div id="contentToWrite" class="comments"
 style="margin-left: 30px;color: red;">添加文字</div>
<script type="text/javascript"> writeContent(true); </script>
</body>
 
<body>
 
    <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