整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          源碼分享 HTML 愛心

          lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

          <HTML>

          <HEAD>

          <TITLE> New Document </TITLE>

          <META NAME="Generator" CONTENT="EditPlus">

          <META NAME="Author" CONTENT="">

          <META NAME="Keywords" CONTENT="">

          <META NAME="Description" CONTENT="">

          <style>

          html, body {

          height: 100%;

          padding: 0;

          margin: 0;

          background: #000;

          }

          canvas {

          position: absolute;

          width: 100%;

          height: 100%;

          }

          </style>

          </HEAD>

          <BODY>

          </style>

          <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>

          天全網都在過雙十一,咱們輕松點聊個 5 分鐘的天,就說兩件事。

          第一件事

          說件最近發生的 「怪事」

          這幾天,Gitee 咨詢后臺有點熱鬧。除了一如既往的技術操作咨詢外,老有同學問個啥愛心代碼,求同款,搞得客服小姐姐都懵了,還以為又是哪個商家雙十一促銷做廣告,投放了 Gitee 詞條。在 Gitee 查了下,好家伙一連串愛心代碼、李同款的開源項目,這些都是個啥?

          帶著好奇搜了搜,原來是最近由陳凱歌之子陳飛宇和青春疼痛文學女主代表張婧儀主演的熱播電視劇《點燃我,溫暖我》中的劇情。簡單說,陳飛宇飾演的角色「李峋」是個程序員,為女主用 C 語言寫了個 愛心代碼,制造了小驚喜,誰說程序員不懂浪漫呢。這不僅點燃了女主的心,屏幕對面的大伙對「阿瑟」更上頭了。

          題外話: 不過劇中似乎是在 Python 里寫的 C 語言?編劇們不太嚴謹且專業吧,有沒有實時追劇的小伙伴,你們發現 Bug 了嗎?

          電視劇爆火,大家都在讓自己的程序員男朋友/女朋友寫個同款愛心代碼。沒程序員男朋友/女朋友的別擔心,別人都有愛心代碼了,咱們 Gitee 的開發者們也必須有,開源人不僅懂浪漫,還有共享精神。今天給大家分享個用 Python 寫的愛心代碼開源項目,如果感興趣或者想給自己的另一半制造小浪漫的同學可以自己上手試一試。

          除了這個用 Python 寫的同款愛心代碼之外,Gitee 上還有許多采用其他語言(如 HTML)成功運行的愛心代碼,如果你認為自己寫的愛心更精美,你也可以去 Gitee 給 800萬 開發者們展示你的項目。

          項目作者: chnhjf

          項目地址: https://gitee.com/chnhjf/love

          操作步驟

          步驟一: 確保你安裝了 Python 軟件,如 python3

          步驟二: 安裝 PIP 包 tkinter

          步驟三: 執行 python3 love.py

          源代碼:

          import random
          from math import sin, cos, pi, log
          from tkinter import *
          import ctypes
          
          user32 = ctypes.windll.user32
          CANVAS_WIDTH = user32.GetSystemMetrics(0)  # 畫布的寬
          CANVAS_HEIGHT = user32.GetSystemMetrics(1)  # 畫布的高
          CANVAS_CENTER_X = CANVAS_WIDTH / 2  # 畫布中心的X軸坐標
          CANVAS_CENTER_Y = CANVAS_HEIGHT / 2  # 畫布中心的Y軸坐標
          IMAGE_ENLARGE = 11  # 放大比例
          HEART_COLOR = "#ff2121"  # 心的顏色,這個是中國紅
          
          
          def heart_function(t, shrink_ratio: float = IMAGE_ENLARGE):
              """
              “愛心函數生成器”
              :param shrink_ratio: 放大比例
              :param t: 參數
              :return: 坐標
              """
              # 基礎函數
              x = 16 * (sin(t) ** 3)
              y = -(13 * cos(t) - 5 * cos(2 * t) - 2 * cos(3 * t) - cos(4 * t))
          
              # 放大
              x *= shrink_ratio
              y *= shrink_ratio
          
              # 移到畫布中央
              x += CANVAS_CENTER_X
              y += CANVAS_CENTER_Y
          
              return int(x), int(y)
          
          
          def scatter_inside(x, y, beta=0.15):
              """
              隨機內部擴散
              :param x: 原x
              :param y: 原y
              :param beta: 強度
              :return: 新坐標
              """
              ratio_x = - beta * log(random.random())
              ratio_y = - beta * log(random.random())
          
              dx = ratio_x * (x - CANVAS_CENTER_X)
              dy = ratio_y * (y - CANVAS_CENTER_Y)
          
              return x - dx, y - dy
          
          
          def shrink(x, y, ratio):
              """
              抖動
              :param x: 原x
              :param y: 原y
              :param ratio: 比例
              :return: 新坐標
              """
              force = -1 / (((x - CANVAS_CENTER_X) ** 2 + (y - CANVAS_CENTER_Y) ** 2) ** 0.6)  # 這個參數...
              dx = ratio * force * (x - CANVAS_CENTER_X)
              dy = ratio * force * (y - CANVAS_CENTER_Y)
              return x - dx, y - dy
          
          
          def curve(p):
              """
              自定義曲線函數,調整跳動周期
              :param p: 參數
              :return: 正弦
              """
              # 可以嘗試換其他的動態函數,達到更有力量的效果(貝塞爾?)
              return 2 * (2 * sin(4 * p)) / (2 * pi)
          
          
          class Heart:
              """
              愛心類
              """
          
              def __init__(self, generate_frame=20):
                  self._points = set()  # 原始愛心坐標集合
                  self._edge_diffusion_points = set()  # 邊緣擴散效果點坐標集合
                  self._center_diffusion_points = set()  # 中心擴散效果點坐標集合
                  self.all_points = {}  # 每幀動態點坐標
                  self.build(2000)
          
                  self.random_halo = 1000
          
                  self.generate_frame = generate_frame
                  for frame in range(generate_frame):
                      self.calc(frame)
          
              def build(self, number):
                  # 愛心
                  for _ in range(number):
                      t = random.uniform(0, 2 * pi)  # 隨機不到的地方造成愛心有缺口
                      x, y = heart_function(t)
                      self._points.add((x, y))
          
                  # 愛心內擴散
                  for _x, _y in list(self._points):
                      for _ in range(3):
                          x, y = scatter_inside(_x, _y, 0.05)
                          self._edge_diffusion_points.add((x, y))
          
                  # 愛心內再次擴散
                  point_list = list(self._points)
                  for _ in range(4000):
                      x, y = random.choice(point_list)
                      x, y = scatter_inside(x, y, 0.17)
                      self._center_diffusion_points.add((x, y))
          
              @staticmethod
              def calc_position(x, y, ratio):
                  # 調整縮放比例
                  force = 1 / (((x - CANVAS_CENTER_X) ** 2 + (y - CANVAS_CENTER_Y) ** 2) ** 0.520)  # 魔法參數
          
                  dx = ratio * force * (x - CANVAS_CENTER_X) + random.randint(-1, 1)
                  dy = ratio * force * (y - CANVAS_CENTER_Y) + random.randint(-1, 1)
          
                  return x - dx, y - dy
          
              def calc(self, generate_frame):
                  ratio = 10 * curve(generate_frame / 10 * pi)  # 圓滑的周期的縮放比例
          
                  halo_radius = int(4 + 6 * (1 + curve(generate_frame / 10 * pi)))
                  halo_number = int(3000 + 4000 * abs(curve(generate_frame / 10 * pi) ** 2))
          
                  all_points = []
          
                  # 光環
                  heart_halo_point = set()  # 光環的點坐標集合
                  for _ in range(halo_number):
                      t = random.uniform(0, 2 * pi)  # 隨機不到的地方造成愛心有缺口
                      x, y = heart_function(t, shrink_ratio=11.6)  # 魔法參數
                      x, y = shrink(x, y, halo_radius)
                      if (x, y) not in heart_halo_point:
                          # 處理新的點
                          heart_halo_point.add((x, y))
                          x += random.randint(-14, 14)
                          y += random.randint(-14, 14)
                          size = random.choice((1, 2, 2))
                          all_points.append((x, y, size))
          
                  # 輪廓
                  for x, y in self._points:
                      x, y = self.calc_position(x, y, ratio)
                      size = random.randint(1, 3)
                      all_points.append((x, y, size))
          
                  # 內容
                  for x, y in self._edge_diffusion_points:
                      x, y = self.calc_position(x, y, ratio)
                      size = random.randint(1, 2)
                      all_points.append((x, y, size))
          
                  for x, y in self._center_diffusion_points:
                      x, y = self.calc_position(x, y, ratio)
                      size = random.randint(1, 2)
                      all_points.append((x, y, size))
          
                  self.all_points[generate_frame] = all_points
          
              def render(self, render_canvas, render_frame):
                  for x, y, size in self.all_points[render_frame % self.generate_frame]:
                      render_canvas.create_rectangle(x, y, x + size, y + size, width=0, fill=HEART_COLOR)
          
          
          def draw(main: Tk, render_canvas: Canvas, render_heart: Heart, render_frame=0):
              render_canvas.delete('all')
              render_heart.render(render_canvas, render_frame)
              main.after(160, draw, main, render_canvas, render_heart, render_frame + 1)
          
          
          if __name__ == '__main__':
              root = Tk()  # 一個Tk
              root.attributes('-fullscreen', True)  # 全屏
              root.attributes('-alpha', 0.9)  # 透明度
              canvas = Canvas(root, bg='black', height=CANVAS_HEIGHT, width=CANVAS_WIDTH)
              canvas.pack()
              heart = Heart()  # 心
              draw(root, canvas, heart)  # 開始畫畫~
              root.mainloop()

          注意事項:

          1.此項目的操作系統必須是 Windows ,如果你使用的是其他操作系統,請及時調整此處的分辨率。

          如 馬建倉在試操作時,因不是 Windows 系統,需將此處分辨率適配電腦。雖然這只是個非常小的有趣項目,不過也希望項目作者也能稍作完善。

          2.如果你不想寫代碼,作者也為你提供了一個可以直接運行的愛心,只需要在 Gitee 倉庫里下載 exe 文件即可運行。

          大家可以前往 Gitee ,親自上手試試。

          第二件事

          好了,該說第二件事了。

          這不是雙十一到了,除了給開源人的浪漫,Gitee 也給想要更高效的開發者與團隊帶來了福利。

          自 11 月 8 日以來,Gitee 企業版已經開啟了 「年終狂歡季」 活動,三重驚喜福利新老用戶均可享受!

          活動地址:https://gitee.com/activity/2022double11

          今為了追到女朋友,眾位男士也是掏空心思,絞盡腦汁想各種表白的新招式,務必給女神一個難以忘記的表白。程序員當然也不例外。既然學的是編程,那就要好好利用編程做一個與眾不同的表白,那最適合的編程語言就是前端了,能夠輕而易舉的就做出各種讓女孩心動的代碼特效。

          更多特效源碼,編程資料,私信我1即可免費領取

          首先特效鎮文:

          今天我們講的就是如何用代碼做出一個愛心表白特效。源碼如下:

          <!DOCTYPE html>

          <html>

          <head>

          <meta charset="utf-8">

          <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

          <title>520</title>

          <meta name="description" content="">

          <meta name="keywords" content="">

          <link href="" rel="stylesheet">

          <style>

          *{margin: 0; padding: 0;}

          ul,ol{list-style: none;}

          a{text-decoration: none;color: inherit;}

          .clearfix:after{content: '';display: block;clear: both;}

          .clear{clear: both;}

          body{

          background-color: #8a0a0a;

          }

          .love{

          display: table;

          flex-wrap: wrap;

          margin: 100px auto;

          }

          .box{

          float:left;

          width: 25px;

          height: 25px;

          border-radius: 2px;

          margin-right: 2px;

          margin-bottom: 2px

          }

          .box:hover{

          background: #8a0a0a;

          }

          .box:not(.transparent){

          background-color: #fff;

          opacity: 0;

          transform: translateY(-300px);

          animation: move 4s infinite;

          }

          @keyframes move{

          25%{

          opacity: 1;

          transform: translateY(0);

          }

          50%{

          opacity: 1;

          transform: translateY(0);

          }

          65%{

          opacity: 1;

          transform: translateY(0);

          }

          100%{

          opacity: 0;

          transform: translateY(300px);

          }

          }

          .box.delay1{

          animation-delay: .1s;

          }

          .box.delay2{

          animation-delay: .2s;

          }

          .box.delay3{

          animation-delay: .4s;

          }

          .box.delay4{

          animation-delay: .5s;

          }

          .box.delay5{

          animation-delay: .7s;

          }

          .box.delay6{

          animation-delay: .9s;

          }

          p{

          width: 1000px;

          margin: 200px auto 0;

          color: #fff;

          font-size: 40px;

          text-align: center;

          }

          </style>

          </head>

          <body>

          <div class="love">

          <div class="box transparent"></div>

          <div class="box white delay6"></div>

          <div class="box white delay2"></div>

          <div class="box transparent"></div>

          <div class="box transparent"></div>

          <div class="box transparent"></div>

          <div class="box white delay4"></div>

          <div class="box white delay3"></div>

          <div class="box transparent"></div>

          <div class="box clear white delay5"></div>

          <div class="box white delay5"></div>

          <div class="box white delay6"></div>

          <div class="box white delay3"></div>

          <div class="box transparent"></div>

          <div class="box white delay6"></div>

          <div class="box white delay1"></div>

          <div class="box white delay4"></div>

          <div class="box white delay2"></div>

          <div class="box clear white"></div>

          <div class="box white delay1"></div>

          <div class="box white delay4"></div>

          <div class="box white delay2"></div>

          <div class="box white delay6"></div>

          <div class="box whitedelay3"></div>

          <div class="box white delay6"></div>

          <div class="box white delay3"></div>

          <div class="box white delay1"></div>

          <div class="box clear white"></div>

          <div class="box white delay3"></div>

          <div class="box white delay1"></div>

          <div class="box white delay1"></div>

          <div class="box white delay6"></div>

          <div class="box white delay3"></div>

          <div class="box white delay5"></div>

          <div class="box white delay2"></div>

          <div class="box white delay4"></div>

          <div class="box clear transparent"></div>

          <div class="box white delay6"></div>

          <div class="box white delay1"></div>

          <div class="box white delay5"></div>

          <div class="box white delay1"></div>

          <div class="box white delay5"></div>

          <div class="box white delay3"></div>

          <div class="box white delay4"></div>

          <div class="box transparent"></div>

          <div class="box clear transparent"></div>

          <div class="box transparent"></div>

          <div class="box white delay5"></div>

          <div class="box white delay1"></div>

          <div class="box white delay5"></div>

          <div class="box white delay2"></div>

          <div class="box white"></div>

          <div class="box transparent"></div>

          <div class="box transparent"></div>

          <div class="box clear transparent"></div>

          <div class="box transparent"></div>

          <div class="box transparent"></div>

          <div class="box white"></div>

          <div class="box white"></div>

          <div class="box white delay2"></div>

          <div class="box transparent"></div>

          <div class="box transparent"></div>

          <div class="box transparent"></div>

          <div class="box clear transparent"></div>

          <div class="box transparent"></div>

          <div class="box transparent"></div>

          <div class="box transparent"></div>

          <div class="box white delay1"></div>

          <div class="box transparent"></div>

          <div class="box transparent"></div>

          <div class="box transparent"></div>

          <div class="box transparent"></div>

          </div>

          <p>我愛代碼,也愛你,雖然我不善言辭,請讓我用我的方式說:我愛你!</p>

          </body>

          </html>


          主站蜘蛛池模板: 人妻天天爽夜夜爽一区二区| 日日摸夜夜添一区| 中文字幕一区二区三区精彩视频| 亚洲综合无码一区二区痴汉 | 国产经典一区二区三区蜜芽 | 国产福利一区二区三区| 国产精品区AV一区二区| 国产精品无码一区二区三区不卡| 亚洲av鲁丝一区二区三区 | 日本一区二区不卡在线| 精品人妻少妇一区二区三区在线| 国内精品一区二区三区最新| 亚洲国产成人久久一区二区三区| 无码国产精品一区二区免费16| 黄桃AV无码免费一区二区三区 | 国产一区在线mmai| 亚洲狠狠狠一区二区三区| 亚洲国产美国国产综合一区二区 | 无码av人妻一区二区三区四区| 亚洲AV成人一区二区三区AV| 无码人妻一区二区三区在线视频| 在线观看免费视频一区| 日韩欧国产精品一区综合无码| 国产另类TS人妖一区二区| 国产日韩AV免费无码一区二区| 亚洲熟女一区二区三区| 一本大道东京热无码一区| 国产亚洲一区二区在线观看| 中文字幕亚洲乱码熟女一区二区| 国产一区二区四区在线观看| 亚洲韩国精品无码一区二区三区 | 狠狠做深爱婷婷久久综合一区| 精品免费国产一区二区三区| 国产在线一区二区杨幂| 狠狠爱无码一区二区三区| 中文字幕一区二区日产乱码| 亚洲一区二区三区影院| AV无码精品一区二区三区| 成人精品一区二区电影| 精品国产免费一区二区三区| 国产一区二区三区高清在线观看|