当前位置 博文首页 > 涛涛之海:表单神器

    涛涛之海:表单神器

    作者:[db:作者] 时间:2021-06-02 18:32

    表单神器

    动态效果图

    在这里插入图片描述

    介绍

    ?目前还是单身狗,做的这个表单神器,就是为了有一天可以拿这个表白神器向我的那个她来表白。印象中每年的情人节,总是和春节的时间很接近,所以背景图中有红灯笼,绚烂的礼花,有可爱的雪人,显示的很喜庆,还有祝福的语句。这个表单神器的主要亮点就是旋转的桃心图片墙,可以放一些她美丽的图片,或者是属于你们俩的美好的瞬间,再放一个浪漫的背景音乐,这就很有氛围了。哈哈哈。我最喜欢的就是《告白气球》。放一下这首歌的歌词吧。

    塞纳河畔 左岸的咖啡
    
    我手一杯 品尝你的美
    
    留下唇印的嘴
    
    花店玫瑰 名字写错谁
    
    告白气球 风吹到对街
    
    微笑在天上飞
    
    你说你有点难追
    
    想让我知难而退
    
    礼物不需挑最贵
    
    只要香榭的落叶
    
    喔~营造浪漫的约会
    
    不害怕搞砸一切
    
    拥有你就拥有 全世界
    
    亲爱的 爱上你 从那天起
    
    甜蜜的很轻易
    
    亲爱的 别任性 你的眼睛
    
    在说我愿意
    
    塞纳河畔 左岸的咖啡
    
    我手一杯 品尝你的美
    
    留下唇印的嘴
    
    花店玫瑰 名字写错谁
    
    告白气球 风吹到对街
    
    微笑在天上飞
    
    你说你有点难追
    
    想让我知难而退
    
    礼物不需挑最贵
    
    只要香榭的落叶
    
    喔~营造浪漫的约会
    
    不害怕搞砸一切
    
    拥有你就拥有 全世界
    
    亲爱的 爱上你 从那天起
    
    甜蜜的很轻易
    
    亲爱的 别任性 你的眼睛
    
    在说我愿意
    
    亲爱的 爱上你 恋爱日记
    
    飘香水的回忆
    
    一整瓶 的梦境 全都有你
    
    搅拌在一起
    
    亲爱的别任性 你的眼睛
    
    在说我愿意
    

    写给未来女朋友的一份信

    ?虽然,目前还没有女朋友,但还是想给你写一份信。
    ?未来的女朋友,抱歉,我都不知道你的名字,就叫你,小傻瓜吧。不知道你是怎么看待“傻”这个字的含义的,我一直觉得它是一个幸福的字,一个比较乐观的字,人们常说傻人有傻福。你看我就是那个傻人,在傻傻的等你这个小傻瓜,这辈子能遇到你,就是我的傻福吧。
    ?很抱歉,这么晚才给你写这篇文章,或者是一封给你的信吧,总觉得信很有诗意,给自己爱的人写,是一件浪漫的事。信里写些什么呢?自己真没出息,一时之间不知道该说些什么。在没有写之前,有很多很多想对你说的话,此时此刻,正呆呆的想着你的模样,你一定很好看吧。其实,我的审美一直不错,能让我喜欢的女孩,肯定是非常漂亮的。哈哈。
    ?你肯定会问有多么漂亮,我不知道怎么形容你的漂亮,反正在我眼中,你是最美的。在人山人海中,你的美让我刚好遇见你,刚好喜欢你,刚好想和你过一辈子,一切都是那么美好。
    ?书上说不想结婚的谈恋爱,是耍流氓。放心了,我不会耍流氓的,我是抱着想娶你的目的来的。从一个人独自生活,到两个人一起生活,或多或少肯定会有不习惯的地方,需要彼此谦让,相互理解,两个人才能更好的在一起。我很想对你说,你不需要改,改了就不是你了,我会一直谦让你的,我来习惯你,但你忍心这么对我嘛,你那么善解人意,肯定不会的,对吧。所以彼此相互忍让一些,我肯定会忍让的多一些的,谁让我是男孩子呢。女孩子撒娇的时候应该是最可爱的样子,你如果想买什么东西的时候,对我撒娇,我肯定会投降的,尽量去满足你嘛,我挣下的钱,当然是给你花,让你开心的呀。但在一些原则性的问题上,希望你也能理解我,不要去触碰它,我会不开心的。
    ?我喜欢自己做饭,虽然现在还没有什么可以拿的手的菜,但我正在学习,就是为了在遇见你的时候,可以让你尝尝我的手艺,我们可以一起做饭,聊一些家长里短的琐事,普普通通的就是幸福。当我们吵架的时候,你生气的不想给我做饭时,我可以自己做饭给自己吃,不用饿肚子,当然啦,我也会给你准备的。其实,这是我老妈经常教育我的,让我学做饭的时候常说的理由。你别担心啦,我老妈也是和我一样善良,很好相处的人,我相信你的妈妈也和你一样通情达理。我很看重亲情的,会对我们的家人一样好的。
    ?两个人在一起的时候,肯定会吵架的,但我希望我们不要冷战,因为它是最伤感情的,有什么说什么嘛,我可能有时候听不进去。因为当我心烦的时候,身边还有人一直在叨叨,我会更不想听。当很激烈的时候,你稍微冷静一下,喝口水,润润嗓子哈,让我自己想想,我就会明白你说的有道理,会听取你的意见的。同样,我也会这样对你。如果我把你气哭了,你不要自己躲在房间里哭,一定要当着我的面哭,因为你的眼泪就是一把无形的小刀在刺痛我的心,我也会很难受的,我会想尽一切办法,让你出气,我舍不得让你哭,想把快乐带给你。
    ?生活是平凡的,也是无味的,我想让我们的生活过的精彩丰富一些,当我们不想自己做饭时,会请你到浪漫的餐厅去吃一顿美味的大餐,周末也可以到公园里散散步,一年中也会留一些时间陪你去旅游,陪你做一些你想做的事情,有些事情你自己觉得都会幼稚,但是只要你开心就好。闲暇的时候,躺在阳光下,紧紧的靠着你,静静的看着你发呆。想和你一起看韩剧,以前是觉得里面的女主人公很漂亮,但现在你就是全天下最美的女人,陪你一起看韩剧里的帅气的男主人公。哈哈。
    ?哇,真是想迫不及待的去见你,但你也别着急,好好照顾自己,我也会努力的让自己变得更加优秀,以自己最好的样子去见你,到时候,我们手牵手,永远不分开,好吗?
    ?执子之手,与子偕老。

    代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
     <meta charset="UTF-8">
     <title>img_3D</title>
    </head>
    
    <script type="text/javascript" src="jquery-3.3.1.min.js"></script>
    <!--烟花特效-->
    <script>
        var screeWidth;
        var screeHeight;
        var img;
        var my_canvas;
        var context;
    
        var size = 3;
        //弧度常量
        var  radis = Math.PI /180;
        //精灵粒子,全局的
        var spriteArray = new Array();
        //创建烟花队列
        var gloablYanhuaArray = new  Array();
        gloablYanhuaArray.push( YANHUAOBJ(800,400,50,size,0));
        gloablYanhuaArray.push( YANHUAOBJ(200,400,50,size,1));
        //gloablYanhuaArray.push( YANHUAOBJ(400,400,50,size));
    
        $(function() {
    //        img = document.getElementById("tulip");
            my_canvas=$("#myCanvas");
            screeWidth = 1600;
            screeHeight = 300;
            $("#myCanvas").attr("width",screeWidth);
            $("#myCanvas").attr("height",screeHeight);
            my_canvas=my_canvas[0];
            context=my_canvas.getContext("2d");
            setInterval("draw()",80);
            setInterval("explod()",500);
            window.addEventListener( 'resize', onWindowResize, false );
        });
        function onWindowResize(){
    
        }
        function clearg(){
            for(var i = 0; i< gloablYanhuaArray.length;i++){
                if(gloablYanhuaArray[i].dead){
                    gloablYanhuaArray.splice(i,1);
                }
            }
        }
        function draw(){
            //console.log("精灵总数:"+spriteArray.length+",大烟花:"+gloablYanhuaArray.length);
            clearg();
            context.clearRect(0,0,my_canvas.width,my_canvas.height);
            context.fillStyle   = "#fff";;
    //        context.fillText("当前烟花数:"+gloablYanhuaArray.length+",当前粒子数:"+spriteArray.length,100,100);
            context.drawImage(getCatcheCanvas(),0,0,screeWidth,screeHeight);
    
        }
        //缓存绘图
        function getCatcheCanvas(){
            var canvas = document.createElement( 'canvas' );
            canvas.width = screeWidth;
            canvas.height = screeHeight;
            var context = canvas.getContext( '2d' );
            context.clearRect(0,0,canvas.width,canvas.height)
            //绘制粒子
            for(var j=0;j<spriteArray.length;j++){
    
                var bb = spriteArray[j].color;
                var color = bb.substring(0,bb.lastIndexOf(","))+","+spriteArray[j].alpha+")";
                //var color = "rgba(255,255,255,"+spriteArray[j].alpha+")";
                //color=spriteArray[j].color;
                context.fillStyle   = color
                var csize = spriteArray[j].size;
                context.beginPath();
                context.fillRect(spriteArray[j].x-csize/2,spriteArray[j].y-csize/2,spriteArray[j].size,spriteArray[j].size);
                //context.arc(spriteArray[j].x,spriteArray[j].y,spriteArray[j].size,0,Math.PI*2,true);
                //context.drawImage(generateSprite(color,spriteArray[j].alpha),spriteArray[j].x,spriteArray[j].y,spriteArray[j].size,spriteArray[j].size)
                //context.drawImage(document.getElementById("tulip"),spriteArray[j].x,spriteArray[j].y,25,25);
                context.closePath();
                context.fill();;
                if(spriteArray[j].deaded){
                    spriteArray.splice(j,1);;
                }
            }
    
            //绘制烟花
            for(var j=0;j<gloablYanhuaArray.length;j++)//烟花队列
            {
                for(var i=0;i<gloablYanhuaArray[j].yanhuaArray.length;i++)//每个烟花
                {
                    var bb = gloablYanhuaArray[j].yanhuaArray[i].color;
                    var color = bb.substring(0,bb.lastIndexOf(","))+","+gloablYanhuaArray[j].yanhuaArray[i].alpha+")";
    
                    context.fillStyle   = "rgba(255,255,255,1)";
                    context.beginPath();
                    //context.arc(gloablYanhuaArray[j].yanhuaArray[i].x,gloablYanhuaArray[j].yanhuaArray[i].y,gloablYanhuaArray[j].yanhuaArray[i].size,0,Math.PI*2,true);
                    var csize = gloablYanhuaArray[j].yanhuaArray[i].size*5;
                    //context.fillRect(gloablYanhuaArray[j].yanhuaArray[i].x-csize/2,gloablYanhuaArray[j].yanhuaArray[i].y - csize/2,gloablYanhuaArray[j].yanhuaArray[i].size,gloablYanhuaArray[j].yanhuaArray[i].size);
                    //context.drawImage(img,gloablYanhuaArray[j].yanhuaArray[i].x,gloablYanhuaArray[j].yanhuaArray[i].y,25,25);
    
                    context.drawImage(generateSprite(color,1),gloablYanhuaArray[j].yanhuaArray[i].x-csize/2