动态笔芯

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>xinxin</title>
    <style>
        *{margin: 0;padding: 0;}
        html{width: 100%;height: 100%;}
        body{
            background-image: url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1574351196580&di=f7b859f31101f650326cd8d6c5fc6266&imgtype=0&src=http%3A%2F%2Ft-1.tuzhan.com%2F30ee7f4faeb0%2Fc-2%2Fl%2F2014%2F10%2F16%2F03%2Fe60de60115644bdaa83f75c7a0770483.jpg");
            background-size: cover;
            background-repeat: no-repeat;
        }
        div{
            position: fixed;
            margin: auto;
            top: 0;left: 0;right: 0;bottom: 0;
            padding: 16px;
            background-color: rgba(255,255,255,.3);
        }
        p{
            text-indent: 2em;
            font-size: 26px;
            text-align: justify;
            color: deepskyblue;
            line-height: 48px;
        }
    </style>
</head>

<body>
    <div>
        <p>我是个俗气至顶的人，见山是山，见海是海，见花便是花。唯独见了你，云海开始翻涌，江潮开始澎湃，昆虫的小触须挠着全世界的痒，你无需开口，我和天地万物便通通奔向你。</p>
    </div>
</body>
<script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-color/2.1.2/jquery.color.min.js"></script>
<script>
    //随机获取min-max的随机整数
    function getRand(min,max){
        return parseInt(Math.random()*(max-min+1)+min);
    }
    //获取十六进制随机颜色值
    function getColor(){
        var color = "#";
        var str = "0123456789abcdef";
        var rand;
        for (var i = 0; i < 6; i++) {
            rand = getRand(0,15);
            color += str.charAt(rand);
        }
        return color;
    }
    // 每过2秒变色
    $(function(){
        $("p").css("color",getColor());
        setInterval(()=>{
            $("p").animate({color: getColor()},2000);
        },2000);
    });


    var i=0;
    setInterval(autoPlay, 500);

    function autoPlay() {
        i++;
        var img = document.createElement("img");
        img.src = "http://pic.90sjimg.com/design/00/05/78/29/5a4a5754a6900.png%21/fwfh/804x804/quality/90/unsharp/true/compress/true";
        document.body.appendChild(img);
        var w = getRand(10, 30);
        img.style.width = w + "px";
        img.style.position = "absolute";
        var l = getRand(0, window.innerWidth - w); //距离左边
        var t = getRand(0, window.innerHeight - w); //距离上面
        img.style.left = l + "px";
        img.style.top = t + "px";

        // 限制小心心的个数为100个
        if(i>100){
            $($("img")[0]).remove();
        }
    }
</script>
</html>
 