还不快把这份浪漫拿走!!节日就快到来了,给Ta一个惊喜吧~

今天给大家分享一个浪漫小技巧,利用Python中的 HTML 制作一个立体会动的心动小爱心

成千上百个爱心汇成一个大爱心,从里到外形成一个立体状,给人视觉上的冲击感!浪漫极了

+V:hw13980 

话不多说上才艺: 

</style>
  <body>
    <!-- 樱花 -->
    <div id="jsi-cherry-container" class="container">
      <audio autoplay="autopaly">
        <source src="renxi.mp3" type="audio/mp3" />
      </audio>
      <img class="img" src="./123.png" alt="" />
      <!-- 爱心 -->
      <canvas id="pinkboard" class="container"> </canvas>
    </div>

部分代码

(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;
    })();

运行结果:

Python画爱心——谁能拒绝用代码敲出来会跳动的爱心呢~相关推荐

  1. python画-如何用Python画各种著名数学图案 | 附图+代码

    原标题:如何用Python画各种著名数学图案 | 附图+代码 用Python绘制著名的数学图片或动画,展示数学中的算法魅力. Mandelbrot 集 代码:46 lines (34 sloc) 1. ...

  2. python画-使用python画个小猪佩奇的示例代码

    基本原理 选好画板大小,设置好画笔颜色.粗细,定位好位置,依次画鼻子.头.耳朵.眼睛.腮.嘴.身体.手脚.尾巴,完事儿. 都知道,Turtle 是 Python 内置的一个比较有趣味的模块,俗称&qu ...

  3. 用python画简单的图案-如何用Python画各种著名数学图案 | 附图+代码

    原标题:如何用Python画各种著名数学图案 | 附图+代码 用Python绘制著名的数学图片或动画,展示数学中的算法魅力. Mandelbrot 集 代码:46 lines (34 sloc) 1. ...

  4. 用python画佩奇_使用python画个小猪佩奇的示例代码

    基本原理 选好画板大小,设置好画笔颜色.粗细,定位好位置,依次画鼻子.头.耳朵.眼睛.腮.嘴.身体.手脚.尾巴,完事儿. 都知道,Turtle 是 Python 内置的一个比较有趣味的模块,俗称&qu ...

  5. 用python画苹果的代码_使用python画个小猪佩奇的示例代码

    基本原理 选好画板大小,设置好画笔颜色.粗细,定位好位置,依次画鼻子.头.耳朵.眼睛.腮.嘴.身体.手脚.尾巴,完事儿. 都知道,Turtle 是 Python 内置的一个比较有趣味的模块,俗称&qu ...

  6. python代码画小猪佩奇动画片全集_使用python画个小猪佩奇的示例代码

    本文给大家较详细的介绍了使用python画个小猪佩奇的示例代码,感兴趣的朋友一起看看吧 基本原理 选好画板大小,设置好画笔颜色.粗细,定位好位置,依次画鼻子.头.耳朵.眼睛.腮.嘴.身体.手脚.尾巴, ...

  7. python 画韦恩图(venn)代码(两组和三组数据),简单易学易上手

    韦恩图除了用R可以画之外,用python也可以画,通过对两个阶段的对应的geneid进行韦恩图展示,即可以知道两个阶段重叠的内容有多少,并通过写代码,取出两个阶段重叠部分的数据. import mat ...

  8. 用Python画路飞骷髅图案【附代码】

    用Python代码实现这幅图的绘制,由于学艺不精,只能用直角坐标系作为参考画出来. 配色的RGB取色色块 还有重要的量角器兄弟 下面是代码 #路飞骷髅 import turtle as t #黄底帽子 ...

  9. 用python画路飞代码_用Python画路飞骷髅图案【附代码】

    用Python代码实现这幅图的绘制,由于学艺不精,只能用直角坐标系作为参考画出来. 配色的RGB取色色块 还有重要的量角器兄弟 下面是代码 #路飞骷髅 import turtle as t #黄底帽子 ...

最新文章

  1. 行人姿态估计--Realtime Multi-Person 2D Pose Estimation using Part Affinity Fields
  2. 基于Echarts的HTML5 Canvas折线图柱状图DEMO演示
  3. 软件测试技术——软件测试概述
  4. Python开发常用工具库
  5. 斗地主AI算法——第四章の权值定义
  6. 文件夹html文件批量替换,DirRplacer(文件批量替换工具)
  7. 机房运维——技术文档
  8. 图书管理系统数据库SQL设计思路
  9. Intellij IDEA之Mybatis插件:Free Mybatis Plugin
  10. BS 和CS的区别
  11. 收藏 | 湖南省各地教师公务员等实际工资爆料
  12. [UE4]大型户外场景制作教程
  13. 高通5G平台(SDX55\SDX62\SDX65):ping包异常问题排查指南
  14. 计算机作用对象失败怎么办,虚拟电脑控制台严重错误—获取VirtualBox COM 对象失败的解决办法...
  15. 定时器 java qua_【spring-boot】 springboot整合quartz实现定时任务
  16. 抓包工具以及如何看抓包信息
  17. 编程语言的分类及初识大蟒蛇
  18. vue之Excel导出和导入
  19. 杂记1:正向反向迭代器,不同stl容器的lower_bound的使用(set,map,vector,arr,pair),数字转字符串
  20. 用云盘搭建自己的内容平台

热门文章

  1. lambda表达式demo笔记
  2. 在Chrome安装Edge的插件
  3. d作者d语言中组件式编程
  4. 爬虫那些事-网页爬虫设计思路
  5. 20200220MFC 之CListCtrl(二)
  6. allrgro17.2转AD19方法,实测
  7. 软件测试顶岗实习实习总结
  8. Java Ftp客户端
  9. 【洛谷 P5850】 calc加强版(生成函数+NTT)
  10. 仿抖音效果的数字时钟罗盘