整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

程序员浪漫起来没文科生什么事: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 绘制一个爱心【附爱心代码】

分析:

  • 爱心可以通过一个正方形+两个圆形组合成。
  1. 先画一个正方形+圆形, 摆放位置如下:

  1. 再添加上一个圆形。

  1. 最后再将整个图形顺时针旋转45度即可。

初步实现

  1. 先画一个正方形:
   <body>
       <div id="heart"></div>
   </body>
   #heart{
          height: 300px;
          width: 300px;
          border: 2px solid black;
       }
  1. 给这个正方形的左边加行一个圆形.这里使用伪类: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;  // 向左位移正方形一半的长度
       }

此时图形长这样:

  1. 再添加一个圆形, 这里使用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;
       }

  1. 最后一步, 旋转一下, 然后上个颜色.去掉之前为了看清楚加的边框。
      /*给heart进行旋转并加上颜色*/
     transform: rotate(45deg);
     background-color: red;

完整代码:


上一篇:HTML编码规范
下一篇:HTML 文件路径