软件系统定制开发Html5+CSS3+JS代码实现圣诞节动态表白特效，祝你成功

一、前言

软件系统定制开发临近平安夜、软件系统定制开发圣诞节的到来，软件系统定制开发又是一波大好表白时机！软件系统定制开发身边的同学马上就要动手了，还不快行动起来，程序员也有属于我们的浪漫！这篇文章使用前端三大技术、CSS、Js来实现圣诞动态表白特效。

二、表白特效演示及源码

1、圣诞表白特效

 圣诞表白特效：仅含有一个HTML文件即可实现，可修改在一起的时间、表白美句等

    html代码：

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>小Z同学</title><!-- 这是网页标题 -->
  6. <style>
  7. body{
  8.   overflow: hidden;
  9.   margin: 0;
  10. }
  11. h1{
  12.   position: fixed;
  13.   top: 50%;
  14.   left: 0;
  15.   width: 100%;
  16.   text-align: center;
  17.   transform:translateY(-50%);
  18.   font-family: 'Love Ya Like A Sister', cursive;
  19.   font-size: 40px;
  20.   color: #c70012;
  21.   padding: 0 20px;
  22. }
  23. h1 span{
  24.     font-size:20px;
  25. }
  26. </style>
  27.  
  28. </head>
  29. <body>
  30. <h1 id="h1"></h1>
  31. <canvas></canvas> <!--canvas 画布-->
  32.  
  33. <script>
  34. var canvas = document.querySelector("canvas"),
  35.   ctx = canvas.getContext("2d");
  36.  
  37. var ww,wh;
  38.  
  39. function onResize(){
  40.   ww = canvas.width = window.innerWidth;
  41.   wh = canvas.height = window.innerHeight;
  42. }
  43.  
  44. ctx.strokeStyle = "red";
  45. ctx.shadowBlur = 25;
  46. ctx.shadowColor = "hsla(0, 100%, 60%,0.5)";
  47.  
  48. var precision = 100;
  49. var hearts = [];
  50. var mouseMoved = false;
  51. function onMove(e){
  52.   mouseMoved = true;
  53.   if(e.type === "touchmove"){
  54.     hearts.push(new Heart(e.touches[0].clientX, e.touches[0].clientY));
  55.     hearts.push(new Heart(e.touches[0].clientX, e.touches[0].clientY));
  56.   }
  57.   else{
  58.     hearts.push(new Heart(e.clientX, e.clientY));
  59.     hearts.push(new Heart(e.clientX, e.clientY));
  60.   }
  61. }
  62.  
  63. var Heart = function(x,y){
  64.   this.x = x || Math.random()*ww;
  65.   this.y = y || Math.random()*wh;
  66.   this.size = Math.random()*2 + 1;
  67.   this.shadowBlur = Math.random() * 10;
  68.   this.speedX = (Math.random()+0.2-0.6) * 8;
  69.   this.speedY = (Math.random()+0.2-0.6) * 8;
  70.   this.speedSize = Math.random()*0.05 + 0.01;
  71.   this.opacity = 1;
  72.   this.vertices = [];
  73.   for (var i = 0; i < precision; i++) {
  74.     var step = (i / precision - 0.5) * (Math.PI * 2);
  75.     var vector = {
  76.       x : (15 * Math.pow(Math.sin(step), 3)),
  77.       y : -(13 * Math.cos(step) - 5 * Math.cos(2 * step) - 2 * Math.cos(3 * step) - Math.cos(4 * step)) 
  78.     }
  79.     this.vertices.push(vector);
  80.   }
  81. }
  82.  
  83. Heart.prototype.draw = function(){
  84.   this.size -= this.speedSize;
  85.   this.x += this.speedX;
  86.   this.y += this.speedY;
  87.   ctx.save();
  88.   ctx.translate(-1000,this.y);
  89.   ctx.scale(this.size, this.size);
  90.   ctx.beginPath();
  91.   for (var i = 0; i < precision; i++) {
  92.     var vector = this.vertices[i];
  93.     ctx.lineTo(vector.x, vector.y);
  94.   }
  95.   ctx.globalAlpha = this.size;
  96.   ctx.shadowBlur = Math.round((3 - this.size) * 10);
  97.   ctx.shadowColor = "hsla(0, 100%, 60%,0.5)";
  98.   ctx.shadowOffsetX = this.x + 1000;
  99.   ctx.globalCompositeOperation = "screen"
  100.   ctx.closePath();
  101.   ctx.fill()
  102.   ctx.restore();
  103. };
  104.  
  105.  
  106. function render(a){
  107.   requestAnimationFrame(render);
  108.  
  109.   hearts.push(new Heart())
  110.   ctx.clearRect(0,0,ww,wh);
  111.   for (var i = 0; i < hearts.length; i++) {
  112.     hearts[i].draw();
  113.     if(hearts[i].size <= 0){
  114.       hearts.splice(i,1);
  115.       i--;
  116.     }
  117.   }
  118. }
  119.  
  120.  
  121. onResize();
  122. window.addEventListener("mousemove", onMove);
  123. window.addEventListener("touchmove", onMove);
  124. window.addEventListener("resize", onResize);
  125. requestAnimationFrame(render);
  126.  
  127. window.onload=function starttime(){
  128.         time(h1,'2017,7,9');     // 在一起的时间
  129.         ptimer = setTimeout(starttime,1000); // 添加计时器
  130. }
  131.  
  132.     function time(obj,futimg){
  133.         var nowtime = new Date().getTime(); // 现在时间转换为时间戳
  134.         var futruetime =  new Date(futimg).getTime(); // 未来时间转换为时间戳
  135.         var msec = nowtime-futruetime; // 毫秒 未来时间-现在时间
  136.         var time = (msec/1000);  // 毫秒/1000
  137.         var day = parseInt(time/86400); // 天  24*60*60*1000 
  138.         var hour = parseInt(time/3600)-24*day;    // 小时 60*60 总小时数-过去的小时数=现在的小时数 
  139.         var minute = parseInt(time%3600/60); // 分 -(day*24) 以60秒为一整份 取余 剩下秒数 秒数/60 就是分钟数
  140.         var second = parseInt(time%60);  // 以60秒为一整份 取余 剩下秒数
  141.         obj.innerHTML="小Z同学<br>咱俩在一起的时间已经：<br>"+day+"天"+hour+"小时"+minute+"分"+second+"秒"+"了<br><span>圣诞之夜即将来临,真爱来了，我们要好好把握。<br>不管面临多大的压力,不管前面的路如何崎岖.<br>不管经历过什么,我仍坚信最浪漫的事就是和你一起慢慢变老.<br>相信中间的计时器,将永远继续下去,直至数据溢出.</span>"
  142.  
  143.         return true;
  144.     }
  145. </script>
  146.  
  147. </body>
  148. </html>

2、表白利器

 

表白利器：可替换照片，背景音乐等

【源码文末获取】

3、表白电子相册

动态表白相册：可替换照片等，或者直接使用表情包也是一番风味。

【源码文末获取】

4、表白动画

表白动画：动态展示照片和文字等，复古风哈哈

【源码文末获取】

5、爱心表白

爱心表白：动态爱心，动画跟随鼠标旋转

【源码文末获取】

三、全部源码获取

为遵守平台规范，请评论或私聊关键词“love”,获取全部源码地址

还不快快行动起来~不试试怎么知道！

据说  点赞、评论+关注！的同学表白成功的概率翻倍噢~

网站建设定制开发 软件系统开发定制 定制软件开发 软件开发定制 定制app开发 app开发定制 app开发定制公司 电商商城定制开发 定制小程序开发 定制开发小程序 客户管理系统开发定制 定制网站 定制开发 crm开发定制 开发公司 小程序开发定制 定制软件 收款定制开发 企业网站定制开发 定制化开发 android系统定制开发 定制小程序开发费用 定制设计 专注app软件定制开发 软件开发定制定制 知名网站建设定制 软件定制开发供应商 应用系统定制开发 软件系统定制开发 企业管理系统定制开发 系统定制开发