十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧!!!

Posted 王同学要努力

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧!!!相关的知识,希望对你有一定的参考价值。

十款表白小特效 用代码表白 一个比一个浪漫 赶紧收藏起来吧!!!

文章简介

最近看了一街坊视频,问路人“你眼中的程序员是怎样的?”

然后一堆关键词就出来了“直男、宅、不懂浪漫、秃头、掉发、油头、戴眼镜、瘦、没得休息、枯燥乏味、不修边幅、做事有逻辑、学霸、认真、憨厚老实、可爱 哈哈哈哈哈哈”。

说程序员是直男,不可否认,大多数程序员都挺直,因为我们没有那么多弯弯绕绕。有心思兜圈子,不如回去写几行代码。

早年雷军说“我喜欢写代码,代码的世界很简单”

程序员,格子衫,不浪漫,直男,人傻钱多……一点都不懂得浪漫! 谁说我们不懂浪漫的? 不会制造惊喜的?真的是这样么?不不不 你错了 程序员一旦浪漫起来,真没其他人啥事了!!!

程序员的大多数时间都是面对电脑,没有乱七八糟的应酬,缺乏交际的程序员对待一份感情也会非常的认真。程序员也许在生活中会比较宅,但是千万不要说程序猿不懂浪漫。当你不开心了,他可以分分钟做出一个玫瑰花、心形、烟花等告白小程序给你制造小惊喜。


特效一(动图太大了 上传不了 只录了一部分)

部分代码如下

<body>
<audio autoplay="autopaly">
  <source src="renxi.mp3" type="audio/mp3" />
</audio>
<div id="main">
  <div id="wrap">
    <div id="text">
      <div id="code"> <font color="#FF0000"> <span class="say">浮世三千 吾爱有三 日月与卿</span><br>
        <span class="say"> </span><br>
        <span class="say">日为朝  月为暮  卿为朝朝暮暮</span><br>
        <span class="say"> </span><br>
        <span class="say">在这浮浮沉沉的大千世界里 我爱的只有三样</span><br>
        <span class="say"></span><br>
        <span class="say">太阳  月亮和我爱的你</span><br>
		        <span class="say"> </span><br>
        <span class="say">太阳带给我们白昼和希望 月亮带给我们夜幕和宁静  </span><br>
				        <span class="say"> </span><br>
		<span class="say"> 你与我的朝夕相伴 于我而言即是永恒 你是我一生挚爱</span><br>
        <span class="say"></span><br>
        <span class="say">一生爱一人很难,也不丢人</span><br>
             <span class="say"> </span><br>    
				 <span class="say"> 最美的爱情愿景不就是"愿得一心人 白首不相离"嘛</span><br>
				         <span class="say"> </span><br>
						         <span class="say"> 如果可以请牢记当初的爱情承诺 记住最初的美好</span><br>
				        <span class="say"> </span><br>
		<span class="say">愿岁月静好 浅笑安然 一切美好如约而至</span><br>
        <span class="say"> </span><br>
     </font>
     
      </div>
    </div>
    <div id="clock-box"> <span class="STYLE1"></span><font color="#33CC00">愿得一心人,白首不相离</font> <span class="STYLE1">这简单的话语……</span>
      <div id="clock"></div>
    </div>
    <canvas id="canvas" width="1100" height="680"></canvas>
  </div>
</div>
<script>
    (function(){
        var canvas = $('#canvas');
		
        if (!canvas[0].getContext) {
            $("#error").show();
            return false;        }

        var width = canvas.width();
        var height = canvas.height();        
        canvas.attr("width", width);
        canvas.attr("height", height);
        var opts = {
            seed: {
                x: width / 2 - 20,
                color: "rgb(190, 26, 37)",
                scale: 2
            },
            branch: [
                [535, 680, 570, 250, 500, 200, 30, 100, [
                    [540, 500, 455, 417, 340, 400, 13, 100, [
                        [450, 435, 434, 430, 394, 395, 2, 40]
                    ]],
                    [550, 445, 600, 356, 680, 345, 12, 100, [
                        [578, 400, 648, 409, 661, 426, 3, 80]
                    ]],
                    [539, 281, 537, 248, 534, 217, 3, 40],
                    [546, 397, 413, 247, 328, 244, 9, 80, [
                        [427, 286, 383, 253, 371, 205, 2, 40],
                        [498, 345, 435, 315, 395, 330, 4, 60]
                    ]],
                    [546, 357, 608, 252, 678, 221, 6, 100, [
                        [590, 293, 646, 277, 648, 271, 2, 80]
                    ]]
                ]] 
            ],
            bloom: {
                num: 700,
                width: 1080,
                height: 650,
            },
            footer: {
                width: 1200,
                height: 5,
                speed: 10,
            }
        }

        var tree = new Tree(canvas[0], width, height, opts);
        var seed = tree.seed;
        var foot = tree.footer;
        var hold = 1;

        canvas.click(function(e) {
            var offset = canvas.offset(), x, y;
            x = e.pageX - offset.left;
            y = e.pageY - offset.top;
            if (seed.hover(x, y)) {
                hold = 0; 
                canvas.unbind("click");
                canvas.unbind("mousemove");
                canvas.removeClass('hand');
            }
        }).mousemove(function(e){
            var offset = canvas.offset(), x, y;
            x = e.pageX - offset.left;
            y = e.pageY - offset.top;
            canvas.toggleClass('hand', seed.hover(x, y));
        });

        var seedAnimate = eval(Jscex.compile("async", function () {
            seed.draw();
            while (hold) {
                $await(Jscex.Async.sleep(10));
            }
            while (seed.canScale()) {
                seed.scale(0.95);
                $await(Jscex.Async.sleep(10));
            }
            while (seed.canMove()) {
                seed.move(0, 2);
                foot.draw();
                $await(Jscex.Async.sleep(10));
            }
        }));

        var growAnimate = eval(Jscex.compile("async", function () {
            do {
    	        tree.grow();
                $await(Jscex.Async.sleep(10));
            } while (tree.canGrow());
        }));

        var flowAnimate = eval(Jscex.compile("async", function () {
            do {
    	        tree.flower(2);
                $await(Jscex.Async.sleep(10));
            } while (tree.canFlower());
        }));

        var moveAnimate = eval(Jscex.compile("async", function () {
            tree.snapshot("p1", 240, 0, 610, 680);
            while (tree.move("p1", 500, 0)) {
                foot.draw();
                $await(Jscex.Async.sleep(10));
            }
            foot.draw();
            tree.snapshot("p2", 500, 0, 610, 680);

            // 会有闪烁不得意这样做, (>﹏<)
            canvas.parent().css("background", "url(" + tree.toDataURL('image/png') + ")");
            canvas.css("background", "#ffe");
            $await(Jscex.Async.sleep(300));
            canvas.css("background", "none");
        }));

        var jumpAnimate = eval(Jscex.compile("async", function () {
            var ctx = tree.ctx;
            while (true) {
                tree.ctx.clearRect(0, 0, width, height);
                tree.jump();
                foot.draw();
                $await(Jscex.Async.sleep(25));
            }
        }));

        var textAnimate = eval(Jscex.compile("async", function () {
		    var together = new Date();
		    together.setFullYear(2010,1 , 15); 			//时间年月日
		    together.setHours(16);						//小时	
		    together.setMinutes(53);					//分钟
		    together.setSeconds(0);					//秒前一位
		    together.setMilliseconds(2);				//秒第二位

		    $("#code").show().typewriter();
            $("#clock-box").fadeIn(500);
            while (true) {
                timeElapse(together);
                $await(Jscex.Async.sleep(1000));
            }
        }));

        var runAsync = eval(Jscex.compile("async", function () {
            $await(seedAnimate());
            $await(growAnimate());
            $await(flowAnimate());
            $await(moveAnimate());

            textAnimate().start();

            $await(jumpAnimate());
        }));

        runAsync().start();
    })();
    </script>

特效二

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>zhaoyeming</title>
		<link rel="stylesheet" href="css/hovertree.css" />
	</head>
	<body>
		<div class="hovertreeinfo">
			<h2></h2>
		</div>
		<!-- 仅自动播放音乐 -->
		<audio loop src="img/qianyuqianxun.mp3" id="audio" autoplay preload="auto">该浏览器不支持audio属性</audio>
		<script type="text/javascript">
		//--创建页面监听,等待微信端页面加载完毕 触发音频播放
		document.addEventListener('DOMContentLoaded', function () {
			function audioAutoPlay() {
				var audio = document.getElementById('audio');
					audio.play();
				document.addEventListener("WeixinJSBridgeReady", function () {
					audio.play();
				}, false);
			}
			audioAutoPlay();
		});
		//--创建触摸监听,当浏览器打开页面时,触摸屏幕触发事件,进行音频播放
		document.addEventListener('touchstart', function () {
			function audioAutoPlay() {
				var audio = document.getElementById('audio');
					audio.play();
			}
			audioAutoPlay();
		});
		</script>

		<!--/*外层最大容器*/-->
		<div class="wrap">
			<!--	/*包裹所有元素的容器*/-->
			<div class="cube">
				<!--前面图片 -->
				<div class="out_front">
					<img src="img/img01.jpg " class="pic" />
				</div>
				<!--后面图片 -->
				<div class="out_back">
					<img src="img/img02.jpg" class="pic"/>
				</div>
				<!--左图片 -->
				<div class="out_left">
					<img src="img/img03.jpg" class="pic" />
				</div>
				<div class="out_right">
					<img src="img/img04.jpg" class="pic" />
				</div>
				<div class="out_top">
					<img src="img/img05.jpg" class="pic" />
				</div>
				<div class="out_bottom">
					<img src="img/img06.jpg" class="pic" />
				</div>
				<!--小正方体 -->
				<span class="in_front">
					<img src="img/img07.jpg" class="in_pic" />
				</span>
				<span class="in_back">
					<img src="img/img08.jpg" class="in_pic" />
				</span>
				<span class="in_left">
					<img src="img/img09.jpg" class="in_pic" />
				</span>
				<span class="in_right">
					<img src="img/img10.jpg" class="in_pic" />
				</span>
				<span class="in_top">
					<img src="img/img11.jpg" class="in_pic" />
				</span>
				<span class="in_bottom">
					<img src="img/img12.jpg" class="in_pic" />
				</span>
			</div>
		</div>

	</body>
</html>

特效三

代码如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery爱心表白动画代码</title>



<link href="css/default.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/garden.js"></script>
<script type="text/javascript" src="js/functions.js"></script>

</head>

<body>

<div id="mainDiv">
	<div id="content">
		<div id="code">
			
			
			<h1><span class="comments">我这一辈子走过许多地方的路</span><br /></h1>
		    <span class="comments"></span><br />
			<h1><span class="comments">行过许多地方的桥</span><br /></h1>
			<span class="comments"></span><br />
			<h1>	<span class="comments">看过许多次数的云</span><br /></h1>
			<span class="comments"></span><br />
			
		<h1>	<span class="comments">喝过许多种类的酒</span><br />
			<span class="comments"></span><br />
			
		<h1>	<span class="comments">却只爱过一个正当最好年龄的人</span><br /></h1>
			<span class="comments"></span><br />
			
		
		
		</div>
		<div id="loveHeart">
			<canvas id="garden"></canvas>
			<div id="words">
				<div id="messages">
				<h4><p class="text">I love you three thousand times </p></h4>
					<div id="elapseClock">
					
					</div>
				</div>
				
			</div>
		</div>
	</div>
	<div id="copyright">
		<a href="#">....</a><br />
		<a 程序员的 10 款代码表白特效,一个比一个浪漫

哄女朋友利器 —— 赶紧对她说我爱你,程序猿的专属浪漫(附源码)

哄女朋友利器 —— 赶紧对她说我爱你,程序猿的专属浪漫(附源码)

智能好用还免费的修图工具,赶紧收藏起来吧

智能好用还免费的修图工具,赶紧收藏起来吧

国家HW红队蓝队面试重要问题,背会就能过,赶紧收藏起来吧