• 写在前面
• C语言
• python
• 网页设计1
• 网页设计2
• 网页设计

写在前面

C语言代码直接复制到编译器中运行就可以了，我这里用的是Dev-C，运行Python代码需要运行环境，软件我用的是PyCharm，网页设计代码最简单也最好看，复制到记事本中，然后将.txt的后缀改成.html就可以了，我自己用的是WebStorm。不懂的可以再问我哦。

C语言

#include <stdio.h>
#include <math.h>
#include <windows.h>
#include <tchar.h>

float f(float x, float y, float z) {
    float a = x * x  9.0f / 4.0f * y * y  z * z - 1;
    return a * a * a - x * x * z * z * z - 9.0f / 80.0f * y * y * z * z * z;
}

float h(float x, float z) {
    for (float y = 1.0f; y >= 0.0f; y -= 0.001f)
        if (f(x, y, z) <= 0.0f)
            return y;
    return 0.0f;
}

int main() {
    SetColeTextAttribute(GetStdHandle(STD_OUTPUT_HADLE),0x0C);
    HADLE o = GetStdHandle(STD_OUTPUT_HADLE);
    _TCHAR buffer[25][80] = { _T(	 	) };
    _TCHAR ramp[] = _T(.:-=*#%@);
    int count= 0;
    int count1=0;
    //system(color F4);
    for (float t = 0.0f;; t = 0.1f) {
        int sy = 0;
        float s = sinf(t);
        float a = s * s * s * s * 0.2f;

        for (float z = 1.f; z > -1.2f; z -= 0.1f) {
            _TCHAR* p = &buffer[sy][0];
            float tz = z * (1.2f - a);
            for (float x = -1.5f; x < 1.5f; x = 0.05f) {
                float tx = x * (1.2f  a);
                float v = f(tx, 0.0f, tz);
                if (v <= 0.0f) {
                    float y0 = h(tx, tz);
                    float ny = 0.01f;
                    float nx = h(tx  ny, tz) - y0;
                    float nz = h(tx, tz  ny) - y0;
                    float nd = 1.0f / sqrtf(nx * nx  ny * ny  nz * nz);
                    float d = (nx  ny - nz) * nd * 0.5f  0.5f;
                    *p = ramp[(int)(d * 5.0f)];
                }
                else
                    *p = 	 	;
            }
        }

        for (sy = 0; sy < 25; sy) {
            COORD coord = { 0, sy };
            SetColeCursorPosition(o, coord);
            WriteCole(o, buffer[sy], 79, ULL, 0);
        }
        if(count <= 10){
            printf(I Love You \n) ;
            printf(            By DYY);
            count;
        } else{
            printf(You Are My Best Lover.\n);
            printf(            );
            count;
            if(count>=20){
                count =0;
            }
        }
        Sleep();
    }
}

效果展示

python

import random
from math import sin, cos, pi, log
from tkinter import *

CAVAS_WIDTH = 1960  # 画布的宽
CAVAS_HEIGHT =  1000 # 画布的高
CAVAS_CETER_X = CAVAS_WIDTH / 2  # 画布中心的X轴坐标
CAVAS_CETER_Y = CAVAS_HEIGHT / 2  # 画布中心的Y轴坐标
IMAGE_ELARGE = 11  # 放大比例
HEART_COLOR = #ff2121  # 心的颜，这个是中国红


def heart_function(t, shrink_ratio: float = IMAGE_ELARGE):
    
    “爱心函数生成器”
    :param shrink_ratio: 放大比例
    :param t: 参数
    :return: 坐标
    
    # 基础函数
    x = 16 * (sin(t) ** )
    y = -(1 * cos(t) - 5 * cos(2 * t) - 2 * cos( * t) - cos(4 * t))

    # 放大
    x *= shrink_ratio
    y *= shrink_ratio

    # 移到画布中央
    x = CAVAS_CETER_X
    y = CAVAS_CETER_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 - CAVAS_CETER_X)
    dy = ratio_y * (y - CAVAS_CETER_Y)

    return x - dx, y - dy


def shrink(x, y, ratio):
    
    抖动
    :param x: 原x
    :param y: 原y
    :param ratio: 比例
    :return: 新坐标
    
    force = -1 / (((x - CAVAS_CETER_X) ** 2  (y - CAVAS_CETER_Y) ** 2) ** 0.6)  # 这个参数...
    dx = ratio * force * (x - CAVAS_CETER_X)
    dy = ratio * force * (y - CAVAS_CETER_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():
                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 - CAVAS_CETER_X) ** 2  (y - CAVAS_CETER_Y) ** 2) ** 0.520)  # 魔法参数

        dx = ratio * force * (x - CAVAS_CETER_X)  random.randint(-1, 1)
        dy = ratio * force * (y - CAVAS_CETER_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(000  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, )
            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
    canvas = Canvas(root, bg=	black	, height=CAVAS_HEIGHT, width=CAVAS_WIDTH)
    canvas.pack()
    heart = Heart()  # 心
    draw(root, canvas, heart)  # 开始画画~
    root.mainloop()

效果展示

网页设计1

<!DOCTYPE HTML PUBLIC -//WC//DTD HTML 4.0 Transitional//E>
<HTML>
 <HEAD>
  <TITLE> A beating heart </TITLE>
  <META AME=Generator COTET=EditPlus>
  <META AME=Author COTET=>
  <META AME=Keywords COTET=>
  <META AME=Description COTET=>
  <style>
  html, body {
  height: 100%;
  padding: 0;
  margin: 0;
  background: #000;
}
canvas {
  position: absolute;
  width: 100%;
  height: 100%;
}
  </style>
 </HEAD>

 <BODY>
  <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:      0, // particle size in pixels
  },
};


(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(df)},f);b=df;return g}}if(!window.cancelAnimationFrame){window.cancelAnimationFrame=function(d){clearTimeout(d)}}}());


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


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


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), ),
      10 * Math.cos(t) - 50 * Math.cos(2 * t) - 20 * Math.cos( * 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 / 50;
      point.y = settings.particles.size / 2 - point.y * settings.particles.size / 50;
      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>

效果展示

网页设计2

<!DOCTYPE html>
<html lang=en>

<head>
    <meta charset=UTF-8>
    <title>hearts</title>
    <style type=text/css>
    * {
        padding: 0;
        margin: 0;
    }

    body {
        background: #498db;
        overflow: hidden;
    }

    /**
 	 * 主容器
 	 */
    div#main {
        width: 100vw;
        height: 100vh;
    }

    /**
 	 * 显示文字
 	 */
    h1#text {
        color: #FFF;
        text-align: center;
    }

    /**
     * heart标签的样式，一个红的正方形，
     * 将最终图像旋转45度，并置于缩小一半、半透明状态，
     * 设置无限的动效
     * 单次动效时间s
     */
    heart {
        position: absolute;
        width: 20px;
        height: 20px;
        background: #e74cc;
        transform: rotate(45deg) scale(.5);
        opacity: .5;
        animation-name: scale, opacity;
        animation-duration: s;
        animation-iteration-count: infinite;
    }

    /**
     * 用伪类在heart之前画个圆并左移十像素
     */
    heart::before {
        position: absolute;
        content: 		;
        width: 20px;
        height: 20px;
        background: #e74cc;
        border-radius: 50%;
        transform: translateX(-10px);
    }

    /**
     *用伪类在heart之后画个圆并上移十像素
     */

    heart::after {
        position: absolute;
        content: 		;
        width: 20px;
        height: 20px;
        background: #e74cc;
        border-radius: 50%;
        transform: translateY(-10px);
    }

    /**
     * 跳动动效
     */
    @keyframes scale {

        25%,
        75% {
            transform: rotate(45deg) scale(1);
        }

        50%,
        100% {
            transform: rotate(45deg) scale(.5);
        }
    }

    /**
     * 改变透明度
     */
    @keyframes opacity {

        25%,
        75% {
            opacity: 1;
        }

        50%,
        100% {
            opacity: .5;
        }
    }
    </style>
</head>

<body>
    <div id=main>
        <h1 id=text></h1>
    </div>
</body>
<script type=text/javascript>
//获取父容器
var mainObj = document.getElementById(	main	)
//获取文本容器
var textObj = document.getElementById(	text	)
//获取浏览器的高度
var innerWidth = document.body.clientWidth
var innerHeight = document.body.clientHeight

//计数器
var number = 0

/**
 * 持续出心，直到数量为521，位置随机生成
 */
var interval = setInterval(function() {
    var heart = document.createElement(	heart	)
    heart.style.left = Math.floor(Math.random() * innerWidth)  	px	
    heart.style.top = Math.floor(Math.random() * innerHeight)  	px	
    mainObj.appendChild(heart)
    number
    textObj.innerHTML = 	送你	  number  	个爱心，请查收！	
    //当心的数量达到521时结束
    if (number >= 521) {
        clearInterval(interval)
    }
}, 50)
</script>

</html>

效果展示

网页设计

<!DOCTYPE html>
<html lang=en>

<head>
    <meta charset=UTF-8>
    <meta name=viewport content=width=device-width, initial-scale=1.0>
    <meta http-equiv=X-UA-Compatible content=ie=edge>
    <title>beating_heart</title>
    <style>
        html,
        body {
            height: 100%;
        }

        body {
            margin: 0px;
            padding: 0px;
            background: yellow;
            background: linear-gradient(to bottom, pink 0%, pink 100%);
        }

        .chest {
            width: 500px;
            height: 500px;
            margin: 0 auto;
            position: relative;
            /* background:red; */
        }

        .heart {
            position: absolute;
            z-index: 2;
            background: linear-gradient(-90deg, red 0%, red 40%);
            animation: beat 0.7s ease 0s infinite;
        }

        .heart.center {
            background: linear-gradient(-45deg,red 0%, red 40%);
        }

        .heart.top {
            z-index: 7;
        }

        .side {
            top: 100px;
            width: 220px;
            height: 220px;
            border-radius: 220px;
        }

        .center {
            width: 210px;
            height: 210px;
            bottom: 100px;
            left: 145px;
            transform: rotate(45deg);
        }

        .left {
            left: 62px;
        }

        .right {
            right: 62px;
        }
         @keyframes beat{
        0%{
            transform:scale(1) rotate(225deg);
            box-shadow:0 0 40px red;
        }
        50%{
            transform:scale(1.1) rotate(225deg);
            box-shadow:0 0 70px red;
        }
        100%{
            transform:scale(1) rotate(225deg);
            box-shadow:0 0 40px red;
        }
    }
    </style>
</head>

<body>
    <div class=chest>
        <div class=heart left side top></div>
        <div class=heart center></div>
        <div class=heart right side></div>
    </div>
</body>

</html>

效果展示