html表白神器，动态浮动爱心，话不多说，直接看截图吧！

下面附上完整代码。别忘了点个赞哦！

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

520表白酷炫html的更多相关文章

  1. 纯CSS3实现的一些酷炫效果

    之前在网上看到一些用纯CSS3实现的酷炫效果,以为实现起来比较困难,于是想看看具体是怎么实现的. 一.笑脸猫动画 实现效果如下: 这个实现起来确实比较麻烦,很多地方需要花时间,有耐心地调整. 1.先看 ...

  2. 三分钟学会用 js + css3 打造酷炫3D相册

    之前发过该文,后来不知怎么回事不见了,现在重新发一下. 中秋主题的3D旋转相册 如图,这是通过Javascript和css3来实现的.整个案例只有不到80行代码,我希望通过这个案例,让正处于迷茫期的j ...

  3. 【CSS进阶】试试酷炫的 3D 视角

    写这篇文章的缘由是因为看到了这个页面: 戳我看看(移动端页面,使用模拟器观看) 运用 CSS3 完成的 3D 视角,虽然有一些晕3D,但是使人置身于其中的交互体验感觉非常棒,运用在移动端制作一些 H5 ...

  4. HTML5 Canvas玩转酷炫大波浪进度图

    如上图所见,本文就是要实现上面那种效果. 由于最近AlloyTouch要写一个下拉刷新的酷炫loading效果.所以首选大波浪进度图. 首先要封装一下大波浪图片进度组件.基本的原理是利用Canvas绘 ...

  5. html5+Canvas实现酷炫的小游戏

    最近除了做业务,也在尝试学习h5和移动端,在这个过程中,学到了很多,利用h5和canvas做了一个爱心鱼的小游戏.点这里去玩一下 PS: 貌似有点闪屏,亲测多刷新两下就好了==.代码在本地跑都不会闪, ...

  6. 纯CSS3写的10个不同的酷炫图片遮罩层效果【转】

    这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下 在线预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 ...

  7. css3实现酷炫的3D盒子翻转效果

    简介 运用css3先在平面空间组成立方体盒子,再让整个盒子翻转起来,先来张效果图: 步骤 1.先用css将6张图片摆成下图的样子: 下面就是通过css3的3D变换将每个面进行翻转,使之成为一个立体的盒 ...

  8. [Asp.net 开发系列之SignalR篇]专题二：使用SignalR实现酷炫端对端聊天功能

    一.引言 在前一篇文章已经详细介绍了SignalR了,并且简单介绍它在Asp.net MVC 和WPF中的应用.在上篇博文介绍的都是群发消息的实现,然而,对于SignalR是为了实时聊天而生的,自然少 ...

  9. 15个来自 CodePen 的酷炫 CSS 动画效果【下篇】

    CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...

随机推荐

  1. 《手把手教你》系列进阶篇之3-python+ selenium自动化测试 - python几种骚操作你都知道吗？（详细教程）

    1. 简介 这篇文章主要是给小伙伴或者童鞋们介绍和分享 python几种骚操:读取配置文件.获取根目录的相对路径.获取系统时间和格式化时间显示.字符串切割等等操作.为后边的自动化框架打下一个结实的基础 ...

  2. swift实现单例的四种方式

    单例模式 单例模式是设计模式中最简单的一种,甚至有些模式大师都不称其为模式,称其为一种实现技巧,因为设计模式讲究对象之间的关系的抽象,而单例模式只有自己一个对象. 当你只需要一个实例的时候需要使用单例 ...

  3. 数据库Oracle多表链接

    多表查询: 当查询的数据并不是来源一个表时,需要使用多表链接操作完成查询.根据不同表中的数据之间的关系查询相关联的数据. 多表链接方式: 内连接:(等值连接,非等值连接,自连接,SQL99有交叉连接( ...

  4. [TimLinux] JavaScript 模态框可拖动功能实现——jQuery版

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. [TimLinux] CSS 实现加载中的动画

    内容来自对<CSS世界>学习代码的理解简化: <!DOCTYPE html> <html> <head> <style> div { pad ...

  6. ARTS-S centos修改hostname

    hostnamectl set-hostname newhostname 重启

  7. rapidjson 使用

    生成数组集合的字符串 #include <stdio.h> #include <string> #include <iostream> #include " ...

  8. Obeject.hasOwnProperty

    对象{ }要用for-in遍历对象内的属性,通过hasOwnProperty判断属性是否是对象本身的,而不是原型上的 数组[ ]可以通过forEach来遍历

  9. 小胖求学系列之-文档生成利器(下)-smart-doc

    叮叮叮....一阵铃声响起,大家都陆续来到了课堂,看老师没来,小张和小胖又闲聊起来,小张问:怎么样,smart-doc好用吧.小胖笑着说:挺好用的,不过? 小张看卖关子,问到:不过什么,有什么新发现? ...

  10. 5G 调制与解调

    调制,就是将原始信号转换为适合在信道中传输的形式的一种过程,在无线通信中,调制一般均指载波调制,而解调则是调制的逆过程,即将原始信号从已调信号中恢复出来. 进行载波调制,主要为实现以下目标: 1)在无 ...