html5+css3實現三款好看的告白愛心特效，趕緊去給女朋友演示吧

言：每當過節的時候，女朋友就抱怨我總是忘記給她買花，說程序不懂浪漫，這不我準備了幾款愛心動畫特效，打算當面向她表達一下。

第一款：html5通過canvas實現浪漫告白愛心動畫特效

寓意：告白無須多么華麗的語言，一顆顆小的愛心匯聚成一顆真心，讓你的另一半感受到濃濃的愛意。

代碼難度系數★★★

新建index.html，復制以下代碼保存在瀏覽器中打開即可。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>canvas 心</title>

<style>
html, body {
  height: 100%;
  padding: 0;
  margin: 0;
  background: #000;
}
canvas {
  position: absolute;
  width: 100%;
  height: 100%;
}</style>
</head>
<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 f=Math.max(0,16-(d-b));var g=window.setTimeout(function(){h(d+f)},f);b=d+f;return g}}if(!window.cancelAnimationFrame){window.cancelAnimationFrame=function(d){clearTimeout(d)}}}());

/*
 * Point class
 */
var Point = (function() {
  function Point(x, y) {
    this.x = (typeof x !== 'undefined') ? x : 0;
    this.y = (typeof y !== 'undefined') ? y : 0;
  }
  Point.prototype.clone = function() {
    return new Point(this.x, this.y);
  };
  Point.prototype.length = function(length) {
    if (typeof length == 'undefined')
      return Math.sqrt(this.x * this.x + this.y * this.y);
    this.normalize();
    this.x *= length;
    this.y *= length;
    return this;
  };
  Point.prototype.normalize = function() {
    var length = this.length();
    this.x /= length;
    this.y /= length;
    return this;
  };
  return Point;
})();

/*
 * Particle class
 */
var Particle = (function() {
  function Particle() {
    this.position = new Point();
    this.velocity = new Point();
    this.acceleration = new Point();
    this.age = 0;
  }
  Particle.prototype.initialize = function(x, y, dx, dy) {
    this.position.x = x;
    this.position.y = y;
    this.velocity.x = dx;
    this.velocity.y = dy;
    this.acceleration.x = dx * settings.particles.effect;
    this.acceleration.y = dy * settings.particles.effect;
    this.age = 0;
  };
  Particle.prototype.update = function(deltaTime) {
    this.position.x += this.velocity.x * deltaTime;
    this.position.y += this.velocity.y * deltaTime;
    this.velocity.x += this.acceleration.x * deltaTime;
    this.velocity.y += this.acceleration.y * deltaTime;
    this.age += deltaTime;
  };
  Particle.prototype.draw = function(context, image) {
    function ease(t) {
      return (--t) * t * t + 1;
    }
    var size = image.width * ease(this.age / settings.particles.duration);
    context.globalAlpha = 1 - this.age / settings.particles.duration;
    context.drawImage(image, this.position.x - size / 2, this.position.y - size / 2, size, size);
  };
  return Particle;
})();

/*
 * ParticlePool class
 */
var ParticlePool = (function() {
  var particles,
      firstActive = 0,
      firstFree   = 0,
      duration    = settings.particles.duration;
  
  function ParticlePool(length) {
    // create and populate particle pool
    particles = new Array(length);
    for (var i = 0; i < particles.length; i++)
      particles[i] = new Particle();
  }
  ParticlePool.prototype.add = function(x, y, dx, dy) {
    particles[firstFree].initialize(x, y, dx, dy);
    
    // handle circular queue
    firstFree++;
    if (firstFree   == particles.length) firstFree   = 0;
    if (firstActive == firstFree       ) firstActive++;
    if (firstActive == particles.length) firstActive = 0;
  };
  ParticlePool.prototype.update = function(deltaTime) {
    var i;
    
    // update active particles
    if (firstActive < firstFree) {
      for (i = firstActive; i < firstFree; i++)
        particles[i].update(deltaTime);
    }
    if (firstFree < firstActive) {
      for (i = firstActive; i < particles.length; i++)
        particles[i].update(deltaTime);
      for (i = 0; i < firstFree; i++)
        particles[i].update(deltaTime);
    }
    
    // remove inactive particles
    while (particles[firstActive].age >= duration && firstActive != firstFree) {
      firstActive++;
      if (firstActive == particles.length) firstActive = 0;
    }
    
    
  };
  ParticlePool.prototype.draw = function(context, image) {
    // draw active particles
    if (firstActive < firstFree) {
      for (i = firstActive; i < firstFree; i++)
        particles[i].draw(context, image);
    }
    if (firstFree < firstActive) {
      for (i = firstActive; i < particles.length; i++)
        particles[i].draw(context, image);
      for (i = 0; i < firstFree; i++)
        particles[i].draw(context, image);
    }
  };
  return ParticlePool;
})();

/*
 * Putting it all together
 */
(function(canvas) {
  var context = canvas.getContext('2d'),
      particles = new ParticlePool(settings.particles.length),
      particleRate = settings.particles.length / settings.particles.duration, // particles/sec
      time;
  
  // get point on heart with -PI <= t <= PI
  function pointOnHeart(t) {
    return new Point(
      160 * Math.pow(Math.sin(t), 3),
      130 * Math.cos(t) - 50 * Math.cos(2 * t) - 20 * Math.cos(3 * t) - 10 * Math.cos(4 * t) + 25
    );
  }
  
  // creating the particle image using a dummy canvas
  var image = (function() {
    var canvas  = document.createElement('canvas'),
        context = canvas.getContext('2d');
    canvas.width  = settings.particles.size;
    canvas.height = settings.particles.size;
    // helper function to create the path
    function to(t) {
      var point = pointOnHeart(t);
      point.x = settings.particles.size / 2 + point.x * settings.particles.size / 350;
      point.y = settings.particles.size / 2 - point.y * settings.particles.size / 350;
      return point;
    }
    // create the path
    context.beginPath();
    var t = -Math.PI;
    var point = to(t);
    context.moveTo(point.x, point.y);
    while (t < Math.PI) {
      t += 0.01; // baby steps!
      point = to(t);
      context.lineTo(point.x, point.y);
    }
    context.closePath();
    // create the fill
    context.fillStyle = '#ea80b0';
    context.fill();
    // create the image
    var image = new Image();
    image.src = canvas.toDataURL();
    return image;
  })();
  
  // render that thing!
  function render() {
    // next animation frame
    requestAnimationFrame(render);
    
    // update time
    var newTime   = new Date().getTime() / 1000,
        deltaTime = newTime - (time || newTime);
    time = newTime;
    
    // clear canvas
    context.clearRect(0, 0, canvas.width, canvas.height);
    
    // create new particles
    var amount = particleRate * deltaTime;
    for (var i = 0; i < amount; i++) {
      var pos = pointOnHeart(Math.PI - 2 * Math.PI * Math.random());
      var dir = pos.clone().length(settings.particles.velocity);
      particles.add(canvas.width / 2 + pos.x, canvas.height / 2 - pos.y, dir.x, -dir.y);
    }
    
    // update and draw particles
    particles.update(deltaTime);
    particles.draw(context, image);
  }
  
  // handle (re-)sizing of the canvas
  function onResize() {
    canvas.width  = canvas.clientWidth;
    canvas.height = canvas.clientHeight;
  }
  window.onresize = onResize;
  
  // delay rendering bootstrap
  setTimeout(function() {
    onResize();
    render();
  }, 10);
})(document.getElementById('pinkboard'));</script>

</body>
</html>

第二款：html5通過canvas實現愛心氣球上升動畫特效

寓意：將想說的話打開一顆顆的愛心氣球上，隨著氣球不斷的升空，讓整個氛圍可更加地纏綿，看到此處可以有感動的淚水。

代碼難度系數★★★

新建index.html，復制以下代碼保存在瀏覽器中打開即可。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>情人節快樂:)</title>

<style>
canvas {
	position: absolute;
	top: 0;
	left: 0;
}</style>
</head>
<body>
<canvas id=c></canvas>

<script>
var w = c.width = window.innerWidth,
		h = c.height = window.innerHeight,
		ctx = c.getContext( '2d' ),
		
		opts = {
			phrases: [ "Don't die\nit's not hard", "You're the Best", "Every day,\nYou're beautiful", "Every occasion,\nYou're clever", "A world without You?\nNah", "Keep kicking ass", "You're better than them,\nwhoever they are", "You're just amazing", "You are,\ntherefore I am", "Nothing better than You \ncould have happened to the world" ],
			balloons: 10,
			baseVelY: -1,
			addedVelY: -1,
			baseVelX: -.25,
			addedVelX: .5,
			baseSize: 20,
			addedSize: 10,
			baseSizeAdder: 2,
			addedSizeAdder: 2,
			baseIncrementer: .01,
			addedIncrementer: .03,
			baseHue: -10,
			addedHue: 30,
			font: '15px Verdana'
		},
		
		cycle = 0,
		balloons = [];

ctx.font = opts.font;

function Balloon(){
	this.reset();
}
Balloon.prototype.reset = function(){
	
	this.size = opts.baseSize + opts.addedSize * Math.random();
	this.sizeAdder = opts.baseSizeAdder + opts.addedSizeAdder * Math.random();
	this.incrementer = opts.baseIncrementer + opts.addedIncrementer * Math.random();
	
	this.tick = 0;
	
	this.x = Math.random() * w;
	this.y = h + this.size;
	
	this.vx = opts.baseVelX + opts.addedVelX * Math.random();
	this.vy = opts.baseVelY + opts.addedVelY * Math.random();
	
	this.color = 'hsla(hue,70%,60%,.8)'.replace( 'hue', opts.baseHue + opts.addedHue * Math.random() );
	this.phrase = opts.phrases[ ++cycle % opts.phrases.length ].split( '\n' );
	this.lengths = [];
	
	for( var i = 0; i < this.phrase.length; ++i )
		this.lengths.push( -ctx.measureText( this.phrase[ i ] ).width / 2 );
}
Balloon.prototype.step = function(){
	
	this.tick += this.incrementer;
	this.x += this.vx;
	this.y += this.vy;
	
	var size = this.size + this.sizeAdder * Math.sin( this.tick );
	
	ctx.lineWidth = size / 40;
	ctx.strokeStyle = '#eee';
	ctx.beginPath();
	ctx.moveTo( this.x, this.y - 2 );
	ctx.lineTo( this.x, this.y + size );
	ctx.stroke();
	ctx.fillStyle = this.color;
	
	ctx.translate( this.x, this.y );
	ctx.rotate( Math.PI / 4 );
	//ctx.fillRect( -size / 2, -size / 2, size / 2, size / 2 );
	ctx.beginPath();
	ctx.moveTo( 0, 0 );
	ctx.arc( -size / 2, -size / 2 + size / 4, size / 4, Math.PI / 2, Math.PI * 3 / 2 );
	ctx.arc( -size / 2 + size / 4, -size / 2, size / 4, Math.PI, Math.PI * 2 );
	ctx.lineTo( 0, 0 );
	ctx.fill();
	ctx.rotate( -Math.PI / 4 );
	ctx.translate( -this.x, -this.y );
	
	ctx.translate( this.x, this.y + size + 15 );
	ctx.scale( size / this.size, size / this.size );
	ctx.fillStyle = '#eee';
	for( var i = 0; i < this.phrase.length; ++i )
		ctx.fillText( this.phrase[ i ], this.lengths[ i ], i * 15 );
	ctx.scale( this.size / size, this.size / size );
	ctx.translate( -this.x, -( this.y + size + 15 ) );
	
	if( this.y < -size * 3 )
		this.reset();
	
}

function anim(){
	
	window.requestAnimationFrame( anim );
	
	ctx.fillStyle = '#222';
	ctx.fillRect( 0, 0, w, h );
	
	if( balloons.length < opts.balloons && Math.random() < .01 )
		balloons.push( new Balloon );
	
	for( var i = 0; i < balloons.length; ++i )
		balloons[ i ].step();
}
anim();</script>

</body>
</html>

第三款：jQuery+css3實現愛心雨動畫特效

寓意：天空中下起了愛心雨，襯托的房間變得溫暖，也讓整個場景都變得溫馨無比，想必此時可以有一個大大的擁抱。

代碼難度系數★★★

代碼有image、js和html，所以不好貼出來，有需要的朋友直接問我要吧。

總結：程序員的工作本身就很枯燥，特定找了幾個好看的特效拿出來和大家分享，希望大家能夠快樂每一天，上述代碼親測可用，歡迎點贊收藏。

《完》

大家如果喜歡的話麻煩點贊、關注、轉發，謝謝大家。

人節送禮是一件堪比掃雷還要驚險的燒腦游戲，一步錯就會步步錯。我們總結了一份區塊鏈版情人節好評率高的禮物清單，區塊鏈具有永久保存、不可篡改的特點，真的是像極了愛情。這是一份大數據檢驗過的清單，別猶豫，送就完事了。

方式一：技術告白朋友圈里秀恩愛

NO 1 ：2019年1月29日下午，美籍韓裔男孩Adolphus與中國女孩Serena在丘比特DAPP上親手操作，Adolphus輸入“My heart is full of love,because of you”，向Serena表達愛意，兩人共同喊出“上鏈的愛是真愛”，丘比特方宣稱完成了人類的首次愛情上鏈。

NO 2：福州三坊七巷出現了一棵區塊鏈愛情樹，情侶們可以將照片和甜言蜜語通過小程序上傳到區塊鏈。情侶們只需要用支付寶掃描樹上的二維碼，進入區塊鏈愛情樹小程序，就可以將照片和愛情宣言上傳到區塊鏈上獲得“區塊鏈愛情證書”，用數字來紀錄生活和愛情。

方式二：花錢秀恩愛

NO 3：2016年6月14日，一位名叫孫春雨的區塊鏈愛好者把他向心愛女子的求婚請求記錄在了比特幣區塊鏈高度為 416236 的區塊鏈上，之后女孩又把回答答復在了區塊鏈上。

NO 4：2014年，美國的大衛蒙德魯斯和喬伊斯把約在佛羅里達州奧蘭多迪士尼世界的私人比特幣會議上舉行了第一個區塊鏈婚禮，省略了宗教和政府官員的角色。這對新婚夫婦還把婚禮誓言記錄在區塊鏈上：生命不是永恒的，死亡可以分開我們，但是Blockchain是永遠的。

區塊鏈技術為愛情帶來了更好更巧妙的表達方式。區塊鏈+愛情的應用場景，也已經逐步出現在大眾的視野里。區塊鏈的各種場景也在加速落地，不光是在愛情上，也包括其他的領域。

趣鏈科技作為行業內應用落地場景最為豐富的企業之一，涉及生活的方方面面，在十多個領域中都有相關解決方案。

社會公共領域里，趣鏈與某銀行共同開發公積金數據共享平臺，覆蓋全國數百家公積金中心，日上鏈超過千萬條數據；聯合杭州互聯網公證處基于區塊鏈技術共同研發的公證搖號平臺，支持3萬余人參與。

趣鏈一直在不斷的探索區塊鏈應用的邊界，希望把體系建立在線上之外，繼續擴展到醫療、扶貧、租賃等多個場景，實現區塊鏈技術回歸真實的價值。

和趣鏈一起做有趣的鏈。由趣鏈發起的“趣開發，贏未來”的區塊鏈開發者大賽正在火熱報名ing ! 想要花錢秀恩愛的朋友們注意了，趣鏈將送出百萬獎金，不要再讓女朋友羨慕別人家的男朋友了！

參賽團隊需將參賽作品（概念PPT、產品原型、程序、演示視頻等）發送至大賽的官方郵箱pioneer@hyperchain.cn，大賽組委會將從“應用場景、技術價值、商業價值、產品設計”四個維度評審出30組優秀項目于8月23日公布并送出價值8000元的開發者福袋。

報名方式

報名網址：https://filoop.com/activity.html，或添加大賽小助手微信18458407117進行報名。

ava程序員的情書

我能抽象出整個世界，

但是我不能抽象出你，

因為你在我心中是那么的具體，

所以我的世界并不完整。

我可以重載甚至覆蓋這個世界里的任何一種方法，

但是我卻不能重載對你的思念。

也許命中注定了你在我的世界里永遠的烙上了靜態的屬性，

而我不慎調用了愛你這個方法。

當我義無返顧的把自己作為參數傳進這個方法時，

我才發現愛上你是一個死循環，

它不停的返回對你的思念壓入我心里的堆棧。

在這無盡的黑夜中，

我的內存里已經再也裝不下別人，

我不停的向系統申請空間，

但卻捕獲一個異常－－－我愛的人不愛我。

為了解決這個異常，

我愿意虛擬出最后一點內存，

把所有我能實現的方法地址壓入堆棧，

并且在棧尾壓入最后一個方法－－－將字符串＂我愛你，你愛我嗎？＂傳遞給你。

如果返回值為真－－我將用盡一生去愛你，

否則－－我將釋放掉所有系資源！

C++程序員的情書

茫茫內存里，你我不曾相見；

寥寥代碼中，命運注定良緣；

當編譯開始，我們齊手共建；

—— 中國軟件的春天

雖然我們是不同的對象，都有隱私的一面，

但我相信你會找到我的接口，把我的最真給你看！

以為我是你的指針，在茫茫內存的堆棧中，

永遠指向你那片天空，不孜不倦！

我愿做你的內聯，供你無限次的調用，直到海枯石爛！

我愿做你的引用，和你同進退共生死，一起經受考驗！

只是我不愿苦苦地調試你的心情，最終淪為你的友元！

而我更不愿始亂終棄，刪不清借你用的空間，

最后一拍兩散，搞的內存混亂。

如今我們已被 MFC 封裝——事事變遷！

如今我們已向 COM 走去——可想當年！

不知你可曾記得那已經褪色卻仍然綻放光芒的三個字：

std::cout<<”我”<<”愛”<<”你”<

前端程序員的情書

窗外，雨敲殘枝

窗內，熒光燈和電腦屏幕交匯映影

某一刻

當鍵盤的清脆聲音戛然而止

是因為我突然想起了你

我幼稚的想用 new 這個關鍵字把你定義成我的對象

但我壓縮了自己的愛

因為我沒有這個勇氣去并肩你的 z-index

我沒有 php 的穩定強大，也沒有 photoshop 的光鮮亮麗

于是我努力重構自己，希望能夠與你匹配

也許用 javascript 可以抽象出整個世界

但是始終我不能抽象出你

也許用 canvas 可以構建出絢爛極致的畫面

但是構建不出你的一絲美麗

因為你在我心中是那么的具體

所以我的世界并不完整

我可以繼承甚至覆蓋這個 ECMAScript 里的任何一種方法

但是我卻不能覆蓋對你的思念

我可以 cltr+c 克隆任何一份代碼

但這個世界再也找不到另一個你

也許命中注定了你在我的世界里永遠的烙上了靜態的屬性

而我不慎在 love 這個 dom 上調用了 you( ) 這個方法

當我義無返顧的把 i 作為參數傳進這個方法時

我才發現愛上你是一個遞歸函數

讓我進入了死循環

它不停的return對你的思念

將壓入我心里的堆棧

在這無盡的黑夜中

我的內存里已經再也裝不下別人

對你的思戀

卻只能放在 console 里面

當網站頑強的抵擋住了 DDOS 的攻擊，

卻因為你的一個回眸，卻轟然崩塌，

我膽怯地用 ajax 異步打聽你的消息

卻返回一行 404 的數字

原來你并不是開源的

驚愕，抑思

我試圖用 $.each 去遍歷整個世界

卻始終找不到你

我不停的打出一個個斷點，不停地跨域請求資源，不停的 try catch

最后卻捕獲一個異常

error‘她不愛我’

為了解決這個異常

我徹夜的思索，輾轉反側

你我并不在同一個維度

累了，罷了

疲憊的我陰影中的我

在 window.close 的時候，傳入最后一個方法

將 !!doYouLoveMe？傳遞給你

如果返回值為 true

我會釋放所有的資源，格式化所有的硬盤

因為我不會在 coding

我用一生去 loving

數據庫版情書

每次你微笑的看著我，都會引發使我心跳加速的 trigger，我發現自己已深深地愛上了你，無法逃避，因為我們在同一個 Database 里。

經過我長期的查詢分析，對你表結構的了解也越來越清晰，你溫柔美麗，高雅賢淑，簡直就是我心目中的 BCD。

我多想 JOIN 你，但找不到合適的 ID。

IF 你能和我在一起，你就是我的 unique，我決不會三心二意，去找其他的 foreign key。

為了你，我會 DELETE 自己所有的壞脾氣，也會時常 UPDATE 自己。

你交給我的 transaction，無論 error 等于幾，我都會 commit，盡心盡力。

我會緊緊地 FETCH 我們在一起的美好回憶，將它變成加密的存儲過程，而不是轉瞬即逝的 tempdb。

我將這份日志 sp_sendmail 給你，向你 declare 了我的心意。

如果你 set nocount off，我就認為你 default 了我們的實體關系，不要再猶豫遲疑，相信自己的 select，我一定會愛你，直到系統死機。

讓我們挑一個服務器空閑的日子，參加批處理婚禮，由 sa 為我們見證，從此緊緊地 union 在一起，永不分離，共同 create 一片美好的新天地。

祝：MIN（煩惱），MAX（美麗）！

在線咨詢

上一篇：實頁面中頂部和底部的固定條，滾動時依然固定，固定定位的使用
下一篇：JAVA瀏覽器控件JxBrowser v7.3勁爆來襲！支持最新MacOS Catalina

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

html5+css3實現三款好看的告白愛心特效，趕緊去給女朋友演示吧

第一款：html5通過canvas實現浪漫告白愛心動畫特效

第二款：html5通過canvas實現愛心氣球上升動畫特效

第三款：jQuery+css3實現愛心雨動畫特效

方式一：技術告白朋友圈里秀恩愛

方式二：花錢秀恩愛

報名方式

您的項目需求