程序員浪漫起來沒文科生什么事：HTML制作表白愛心-無需編程基礎

說程序員是大大的直男，但是一旦程序員浪漫起來，他們會用他們狂拽酷炫吊的技能展現自己的羅曼蒂克實力，那時候就真的沒文科男什么事啦！下面我就跟大家分享如何用簡單的html制作一個網頁版的愛心表白，不管你是不是程序員都能用，手機就可展示。

先來看下效果：

后面會提供給大家源代碼，在這里先交大家怎么去根據自己的實際情況去改這個文件。

復制源代碼

首先大家將我后面的源代碼復制下來并且粘貼進一個txt文件就可以。

jquery.js下載

不要看到下載就害怕，這個大家只要搜索jquery就能下載了，下載完是一個jquery.js文件，將文件改名為jquery.txt，雙擊打開將內容復制到下圖所示位置。（如果有人不會下，可以私信我索要）

更改表白信息

大家根據自己的實際請款更改頁面的一些信息，比如姓名，日期、或者是表白內容都可以

源碼

最后奉上源碼，這里是沒有jquery.js的，已經預留空，需要大家復制粘貼進來就行了，最后將txt文件的后綴改為.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

么使用 CSS 繪制一個愛心【附愛心代碼】

分析：

愛心可以通過一個正方形+兩個圓形組合成。

先畫一個正方形+圓形, 擺放位置如下:

再添加上一個圓形。

最后再將整個圖形順時針旋轉45度即可。

初步實現

先畫一個正方形：

   <body>
       <div id="heart"></div>
   </body>

   #heart{
          height: 300px;
          width: 300px;
          border: 2px solid black;
       }

給這個正方形的左邊加行一個圓形.這里使用偽類:before來實現：

        #heart{
               height: 200px;
               width: 200px;
               border: 2px solid black;
               position: relative;
           }
       #heart:before{
           content: '';
           width: 200px;
           height: 200px;
           border: 2px solid black;
           border-radius: 50%; // 正方形加圓角變成圓
           position: absolute;
           left: -100px;  // 向左位移正方形一半的長度
       }

此時圖形長這樣：

再添加一個圓形, 這里使用after偽類來實現。

      #heart{
               height: 200px;
               width: 200px;
               border: 2px solid black;
               position: relative;
           }
           // 這里偷個懶.直接寫一塊了
       #heart:before,#heart:after{
           content: '';
           width: 200px;
           height: 200px;
           border: 2px solid black;
           border-radius: 50%;
           position: absolute;
           left: -100px;
       }
       // 第二個圓, 只需要向上位移正方形一半的高度
       #heart:after{
           left: 0;
           top: -100px;
       }

最后一步, 旋轉一下, 然后上個顏色.去掉之前為了看清楚加的邊框。

      /*給heart進行旋轉并加上顏色*/
     transform: rotate(45deg);
     background-color: red;

完整代碼：

在線咨詢

上一篇：HTML編碼規范
下一篇：HTML 文件路徑

您的項目需求

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

整合營銷服務商