用代码写出浪漫

您所在的位置:网站首页 爱心c语音代码 用代码写出浪漫

用代码写出浪漫

2023-07-18 13:09| 来源: 网络整理| 查看: 265

活动地址:CSDN21天学习挑战赛

用代码写出浪漫合集(爱心、玫瑰花)

     

本文目录:

​一、前言

二、用python、matplotlib、Matlab、java绘制爱心

(1)爱心图形1(弧线型)(显示的文字写在代码里)

(2)爱心图形2(直线型)(显示的文字写在代码里)

(3)爱心图形3(弧线型)(通过输入方式显示文字)

(4)用python绘制爱心树

(5)用matplotlib绘制一颗2D的红心

(6)三维爱心

(7)Matlab 3D心形代码

(8)双心(java)

(9)C语言动态爱心代码

(10)、Python《点燃我温暖你》李峋爱心代码

三、用python、java字符画绘制爱心 

(1)一行代码画爱心

(2)用字符输出 I 爱 U (2种形式)

(3)输出五个爱心,由Dear I love you forever! 五个单词填充而成

(4).java 实现 ❤

四、绘制玫瑰花

 (1)、6种python玫瑰花绘图源码(立体多层玫瑰、红玫瑰)

(2)、前端canvas玫瑰花

五、前端特效爱心

(1)前端 CSS "I Love You "爱心效果

(2)各国语言“爱”字组成爱心效果

(3)上升爱心效果

(4)变幻爱心

(5)红心下落动画

 (6)《点燃我温暖你》中李峋的爱心代码

六、特色推荐

​一、前言

  有缘遇到真心对你好的人不容易,像父母、朋友、真爱你的人,如果遇到了,请好好珍惜,因为有时,有些你想象不到的事情会突然发生,如果遇到了,请别慌乱害怕,那些真心对你的人会陪在你身边和你一起度过最难熬的日子,所以请抓住每一分每一秒,好好对待身边人,凡事别计较太多,把心放宽。在你遇到。。。时,请记住,你并不是唯一一个,这世界上有很多人正在经历着和你一样的事情,虽然他们没有或者无法说出来。

  命始于缘分,爱忠于坚守,情长于陪伴,珍惜每一次相识,珍惜每一分温暖,生活细细品味,真情慢慢体会,不枉此生。

  这里搜集了一些爱心和玫瑰花的代码,供大家学习参考。代码版权属原作者。

二、用python、matplotlib、Matlab、java绘制爱心

python 绘制爱心图片索引:

8、最先复现李峋爱心代码的作者9、跳动爱心10、爱心

5、粒子组成爱心,中间加字

6、粒子组成爱心

7、粒子组成爱心

1、(弧线型)(显示文字)

2、(直线型)(显示文字)

3、(弧线型)(输入显示文字)

4、爱心树

python字符画爱心

(1)一行代码画爱心(2)用字符输出 I 爱 U (2种形式)(2)用字符输出 I 爱 U (2种形式)

(3)输出五个爱心(Dear I love you forever! )五个单词填充而成(4)爱心(5)爱心

因数量增加,页面篇幅太长,python 绘制的爱心将更新至此新页面,想查看python爱心绘图的请点击以下链接:

python爱心源代码集锦

(1)爱心图形1(弧线型)(显示的文字写在代码里)

转载地址:https://blog.csdn.net/qq_55342245/article/details/120904578

import turtle import time def LittleHeart(): for i in range(200): turtle.right(1) turtle.forward(2) # love = input('请输入表白语句,然后回车,默认为"I Love You":\n') # me = input('请输入要表白的人:\n') # if love=='': # # 如果未输入表白语句,则使用默认语句 # love='I Love you' love='I Love you' me = '卧槽,这年轻人。' turtle.setup(width=900,height=600) # 爱心的画布的大小 turtle.color('red','red') # 爱心的颜色及外边笔的颜色 turtle.pensize(5) # 画笔的粗细 turtle.speed(1000000) # 绘制速度 turtle.up() # 画笔向上 turtle.hideturtle() turtle.goto(0,-180) turtle.showturtle() turtle.down() turtle.speed(5) turtle.begin_fill() # 开始填充 turtle.left(140) turtle.forward(224) LittleHeart() turtle.left(120) LittleHeart() turtle.forward(224) turtle.end_fill() turtle.pensize(5) turtle.up() turtle.hideturtle() turtle.goto(0,0) turtle.showturtle() turtle.color('#CD5C5C','pink') turtle.write(love,font=('gungsuh',30,),align="center") turtle.up() turtle.hideturtle() if me !='': turtle.color('black', 'pink') time.sleep(2) turtle.goto(180,-180) turtle.showturtle() turtle.write(me, font=(20,), align="center", move=True) window=turtle.Screen() window.exitonclick()

 

(2)爱心图形2(直线型)(显示的文字写在代码里)

转载地址:https://blog.csdn.net/qq_55342245/article/details/120904578

import turtle import math turtle.pen() t=turtle t.up() t.goto(0,150) t.down() t.color('red') t.begin_fill() t.fillcolor('red') t.speed(1) t.left(45) t.forward(150) t.right(45) t.forward(100) t.right(45) t.forward(100) t.right(45) t.forward(100) t.right(45) t.forward(250+math.sqrt(2)*100) t.right (90) t.speed(2) t.forward(250+100*math.sqrt(2)) t.right(45) t.forward(100) t.right(45) t.forward(100) t.right(45) t.forward(100) t.right(45) t.forward(150) t.end_fill() t.goto(-10,0) t.pencolor('white') # L t.pensize(10) t.goto(-50,0) t.goto(-50,80) t.up () # I t.goto(-100,0) t.down() t.goto(-160,0) t.goto(-130,0) t.goto(-130,80) t.goto(-160,80) t.goto(-100,80) t.up() # O t.goto(10,25) t.down() t.right(45) t.circle(25,extent=180) t.goto(60,55) t.circle(25,extent=180) t.goto(10,25) t.up() t.goto(75,80) t.down() t.goto(100,0) t.goto(125,80) t.up() t.goto(180,80) t.down() t.goto(140,80) t.goto(140,0) t.goto(180,0) t.up() t.goto(180,40) t.down() t.goto(140,40) # U t.up() t.goto(-40,-30) t.down() t.goto(-40,-80) t.circle(40,extent=180) t.goto(40,-30) t.hideturtle() window=turtle.Screen() window.exitonclick()

(3)爱心图形3(弧线型)(通过输入方式显示文字)

请输入表白语句,然后回车,(例如"I Love You"):

请输入要表白的人(例如"李思思"):

转载地址:https://changxin.blog.csdn.net/article/details/109842795 

# coding: utf-8 import turtle import time def LittleHeart(): for i in range(200): turtle.right(1) turtle.forward(2) love=input('请输入表白语句,然后回车,(例如"I Love You"):\n') me=input('请输入要表白的人(例如"李思思"):\n') if love=='': love='I Love you' turtle.setup(width=900,height=600) turtle.color('red','pink') turtle.pensize(15) turtle.speed(1000) turtle.up() turtle.hideturtle() turtle.goto(0,-180) turtle.showturtle() turtle.down() turtle.speed(500) turtle.begin_fill() turtle.left(140) turtle.forward(224) LittleHeart() turtle.left(120) LittleHeart() turtle.forward(224) turtle.end_fill() turtle.pensize(12) turtle.up() turtle.hideturtle() turtle.goto(0,-20) turtle.showturtle() turtle.color('#CD5C5C','pink') turtle.write(love,font=('gungsuh',50,),align="center") turtle.up() turtle.hideturtle() if me !='': turtle.color('black', 'pink') time.sleep(1) turtle.goto(180,-180) turtle.showturtle() turtle.write(me, font=(20,25), align="center", move=True) window=turtle.Screen() window.exitonclick()

(4)用python绘制爱心树

转载地址:https://blog.csdn.net/qq_55342245/article/details/120904578

import turtle import random def love(x, y): # 在(x,y)处画爱心lalala lv = turtle.Turtle() lv.hideturtle() lv.up() lv.goto(x, y) # 定位到(x,y) def curvemove(): # 画圆弧 for i in range(20): lv.right(10) lv.forward(2) lv.color('red', 'pink') lv.speed(10000000) lv.pensize(1) # 开始画爱心lalala lv.down() lv.begin_fill() lv.left(140) lv.forward(22) curvemove() lv.left(120) curvemove() lv.forward(22) lv.write("YZ", font=("Arial", 12, "normal"), align="center") # 写上表白的人的名字 lv.left(140) # 画完复位 lv.end_fill() def tree(branchLen, t): if branchLen > 5: # 剩余树枝太少要结束递归 if branchLen < 20: # 如果树枝剩余长度较短则变绿 t.color("green") t.pensize(random.uniform((branchLen + 5) / 4 - 2, (branchLen + 6) / 4 + 5)) t.down() t.forward(branchLen) love(t.xcor(), t.ycor()) # 传输现在turtle的坐标 t.up() t.backward(branchLen) t.color("brown") return t.pensize(random.uniform((branchLen + 5) / 4 - 2, (branchLen + 6) / 4 + 5)) t.down() t.forward(branchLen) # 以下递归 ang = random.uniform(15, 45) t.right(ang) tree(branchLen - random.uniform(12, 16), t) # 随机决定减小长度 t.left(2 * ang) tree(branchLen - random.uniform(12, 16), t) # 随机决定减小长度 t.right(ang) t.up() t.backward(branchLen) myWin = turtle.Screen() t = turtle.Turtle() t.hideturtle() t.speed(1000) t.left(90) t.up() t.backward(200) t.down() t.color("brown") t.pensize(32) t.forward(60) tree(100, t) myWin.exitonclick()

(5)用matplotlib绘制一颗2D的红心

import numpy as np

import matplotlib.pyplot as plt

x = np.linspace(-np.pi/2, np.pi/2, 1000)

y1 = np.power(np.cos(x),0.5) * np.cos(200*x) + np.power(np.absolute(x),0.5) - 0.7

y2 = np.power(4-np.power(x, 2), 0.01)

plt.plot(x, y1*y2, c='r')

plt.show()

原:https://blog.csdn.net/xufive/article/details/126141038

import matplotlib.pyplot as plt  

import numpy as np               

import math

x = np.linspace(-2,2,500)

y=lambda x:np.power((x**2),(1/3))+0.99*np.sqrt(3.3-np.power(x,2))*np.sin(9.9*math.pi*x)

plt.plot(x,y(x))

plt.axis([-3,3,-2,3])

plt.show()

原 :https://zhuanlan.zhihu.com/p/271674164

(6)三维爱心

转载地址:https://blog.csdn.net/yunyun889901/article/details/117785181

#!/usr/bin/env python3 from mpl_toolkits.mplot3d import Axes3D from matplotlib import cm from matplotlib.ticker import LinearLocator, FormatStrFormatter import matplotlib.pyplot as plt import numpy as np def heart_3d(x,y,z): return (x**2+(9/4)*y**2+z**2-1)**3-x**2*z**3-(9/80)*y**2*z**3 def plot_implicit(fn, bbox=(-1.5, 1.5)): ''' create a plot of an implicit function fn ...implicit function (plot where fn==0) bbox ..the x,y,and z limits of plotted interval''' xmin, xmax, ymin, ymax, zmin, zmax = bbox*3 fig = plt.figure() ax = fig.add_subplot(111, projection='3d') A = np.linspace(xmin, xmax, 100) # resolution of the contour B = np.linspace(xmin, xmax, 40) # number of slices A1, A2 = np.meshgrid(A, A) # grid on which the contour is plotted for z in B: # plot contours in the XY plane X, Y = A1, A2 Z = fn(X, Y, z) cset = ax.contour(X, Y, Z+z, [z], zdir='z', colors=('r',)) # [z] defines the only level to plot # for this contour for this value of z for y in B: # plot contours in the XZ plane X, Z = A1, A2 Y = fn(X, y, Z) cset = ax.contour(X, Y+y, Z, [y], zdir='y', colors=('red',)) for x in B: # plot contours in the YZ plane Y, Z = A1, A2 X = fn(x, Y, Z) cset = ax.contour(X+x, Y, Z, [x], zdir='x',colors=('red',)) # must set plot limits because the contour will likely extend # way beyond the displayed level. Otherwise matplotlib extends the plot limits # to encompass all values in the contour. ax.set_zlim3d(zmin, zmax) ax.set_xlim3d(xmin, xmax) ax.set_ylim3d(ymin, ymax) plt.show() if __name__ == '__main__': plot_implicit(heart_3d) #!/usr/bin/env python3 from mpl_toolkits.mplot3d import Axes3D from matplotlib import cm from matplotlib.ticker import LinearLocator, FormatStrFormatter import matplotlib.pyplot as plt import numpy as np def heart_3d(x,y,z): return (x**2+(9/4)*y**2+z**2-1)**3-x**2*z**3-(9/80)*y**2*z**3 def plot_implicit(fn, bbox=(-1.5, 1.5)): ''' create a plot of an implicit function fn ...implicit function (plot where fn==0) bbox ..the x,y,and z limits of plotted interval''' xmin, xmax, ymin, ymax, zmin, zmax = bbox*3 fig = plt.figure() ax = fig.add_subplot(111, projection='3d') A = np.linspace(xmin, xmax, 100) # resolution of the contour B = np.linspace(xmin, xmax, 40) # number of slices A1, A2 = np.meshgrid(A, A) # grid on which the contour is plotted for z in B: # plot contours in the XY plane X, Y = A1, A2 Z = fn(X, Y, z) cset = ax.contour(X, Y, Z+z, [z], zdir='z', colors=('r',)) # [z] defines the only level to plot # for this contour for this value of z for y in B: # plot contours in the XZ plane X, Z = A1, A2 Y = fn(X, y, Z) cset = ax.contour(X, Y+y, Z, [y], zdir='y', colors=('red',)) for x in B: # plot contours in the YZ plane Y, Z = A1, A2 X = fn(x, Y, Z) cset = ax.contour(X+x, Y, Z, [x], zdir='x',colors=('red',)) # must set plot limits because the contour will likely extend # way beyond the displayed level. Otherwise matplotlib extends the plot limits # to encompass all values in the contour. ax.set_zlim3d(zmin, zmax) ax.set_xlim3d(xmin, xmax) ax.set_ylim3d(ymin, ymax) plt.show() if __name__ == '__main__': plot_implicit(heart_3d) (7)Matlab 3D心形代码

原:https://blog.csdn.net/weixin_48117689/article/details/124082260

clear; clc; close all; f = @(x, y, z)(x.^2 + 2.25*y.^2 + z.^2 - 1).^3 - ... x.^2.* z.^3 - 0.1125*y.^2.*z.^3; g = @(x, y, z)(sqrt(x.^2+y.^2)-2.5).^2 + z.^2 - 0.4^2; t = linspace(-5, 5); [x1, y1, z1] = meshgrid(t); [x2, y2, z2] = meshgrid(t); val1 = f(x1, y1, z1); val2 = g(x2, y2, z2); [p1, v1] = isosurface(x1, y1, z1, val1, 0); [p2, v2] = isosurface(x2, y2, z2, val2, 0); figure() subplot(1, 1, 1) h = patch('faces',p1,'vertices',v1,'facevertexcdata',jet(size(v1,1)),... 'facecolor','w','edgecolor','flat'); hold on; patch('faces',p2,'vertices',v2,'facevertexcdata',jet(size(v2,1)),... 'facecolor','w','edgecolor','flat'); grid on; axis equal; axis([-3,3,-3,3,-1.5,1.5]); view(3) title() warning('off'); T = suptitle("$I\ Love\ U\ !$"); set(T,'Interpreter','latex','FontSize',24) pic_num = 1; for i = 1:20 v1 = 0.98 * v1; set(h, 'vertices', v1); drawnow; F = getframe(gcf); I = frame2im(F); [I,map]=rgb2ind(I,256); if pic_num == 1 imwrite(I,map,'BeatingHeart.gif','gif','Loopcount',inf,'DelayTime',0.05); else imwrite(I,map,'BeatingHeart.gif','gif','WriteMode','append','DelayTime',0.05); end pic_num = pic_num + 1; end for i = 1:20 v1 = v1 / 0.98; set(h, 'vertices', v1); drawnow; F = getframe(gcf); I = frame2im(F); [I,map] = rgb2ind(I,256); imwrite(I,map,'BeatingHeart.gif','gif','WriteMode','append','DelayTime',0.05); pic_num = pic_num + 1; end

(8)双心(java)

https://zhuanlan.zhihu.com/p/511112228

import javax.swing.*; import java.awt.*; ​ import static java.lang.Math.*; ​ public class DemoTest extends JFrame { private static final long serialVersionUID = -1284128891908775645L; ​ // 定义加载窗口大小 ​ public static final int GAME_WIDTH = 500; ​ public static final int GAME_HEIGHT = 500; // 获取屏幕窗口大小 public static final int WIDTH = Toolkit.getDefaultToolkit().getScreenSize().width; ​ public static final int HEIGHT = Toolkit.getDefaultToolkit().getScreenSize().height; ​ public DemoTest() { ​ // 设置窗口标题 this.setTitle("心形曲线"); // 设置窗口初始位置 this.setLocation((WIDTH - GAME_WIDTH) / 2, (HEIGHT - GAME_HEIGHT) / 2); // 设置窗口大小 this.setSize(GAME_WIDTH, GAME_HEIGHT); // 设置背景色 this.setBackground(Color.BLACK); // 设置窗口关闭方式 this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); // 设置窗口显示 this.setVisible(true); } ​ @Override public void paint(Graphics g) { double x, y, r; Image OffScreen = createImage(GAME_WIDTH, GAME_HEIGHT); Graphics drawOffScreen = OffScreen.getGraphics(); for (int i = 0; i < 90; i++) { for (int j = 0; j < 90; j++) { r = Math.PI / 45 * i * (1 - Math.sin(Math.PI / 45 * j)) * 18; x = r * Math.cos(Math.PI / 45 * j) * Math.sin(Math.PI / 45 * i) + GAME_WIDTH / 2; y = -r * Math.sin(Math.PI / 45 * j) + GAME_HEIGHT / 4; //设置画笔颜色 drawOffScreen.setColor(Color.PINK); // 绘制椭圆 drawOffScreen.fillOval((int) x, (int) y, 2, 2); } // 生成图片 g.drawImage(OffScreen, 0, 0, this); } } ​ public static void main(String[] args) { DemoTest demo = new DemoTest(); demo.setVisible(true); } ​ }

(9)C语言动态爱心代码 https://blog.csdn.net/m0_67388084/article/details/127728441

#include #include #include #include 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) -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

                a=x*x+y*y-1;

                System.out.print(a*a*a-x*x*y*y*y

            index=0;

            for(x=-1.1f;x

                    System.out.print((s[index]));

                    index=(index+1)%11;

                }

                else{

                    System.out.print(' ');

                }

            }

            System.out.println(" ");

        }

    }

原:https://zhuanlan.zhihu.com/p/511112228

四、绘制玫瑰花  (1)、6种python玫瑰花绘图源码(立体多层玫瑰、红玫瑰)

(1)立体多层玫瑰(2)红玫瑰(3)红玫瑰

(4)红玫瑰(5)红玫瑰(6)红玫瑰

篇幅太长,请点击查看: 立体多层玫瑰绘图源码__玫瑰花python 绘图源码集锦

(2)前端canvas玫瑰花

Document .flower { margin-left: 32%; margin-top: 9%; } var b = document.body; var c = document.getElementsByTagName('canvas')[0]; var a = c.getContext('2d'); document.body.clientWidth; with (m = Math) C = cos, S = sin, P = pow, R = random; c.width = c.height = f = 600; h = -250; function p(a, b, c) { if (c > 60) return [S(a * 7) * (13 + 5 / (.2 + P(b * 4, 4))) - S(b) * 50, b * f + 50, 625 + C(a * 7) * (13 + 5 / (.2 + P(b * 4, 4))) + b * 400, a * 1 - b / 2, a]; A = a * 2 - 1; B = b * 2 - 1; if (A * A + B * B < 1) { if (c > 37) { n = (j = c & 1) ? 6 : 4; o = .5 / (a + .01) + C(b * 125) * 3 - a * 300; w = b * h; return [o * C(n) + w * S(n) + j * 610 - 390, o * S(n) - w * C(n) + 550 - j * 350, 1180 + C(B + A) * 99 - j * 300, .4 - a * .1 + P(1 - B * B, -h * 6) * .15 - a * b * .4 + C(a + b) / 5 + P(C((o * (a + 1) + (B > 0 ? w : -w)) / 25), 30) * .1 * (1 - B * B), o / 1e3 + .7 - o * w * 3e-6] } if (c > 32) { c = c * 1.16 - .15; o = a * 45 - 20; w = b * b * h; z = o * S(c) + w * C(c) + 620; return [o * C(c) - w * S(c), 28 + C(B * .5) * 99 - b * b * b * 60 - z / 2 - h, z, (b * b * .3 + P((1 - (A * A)), 7) * .15 + .3) * b, b * .7] } o = A * (2 - b) * (80 - c * 2); w = 99 - C(A) * 120 - C(b) * (-h - c * 4.9) + C(P(1 - b, 7)) * 50 + c * 2; z = o * S(c) + w * C(c) + 700; return [o * C(c) - w * S(c), B * 99 - C(P(b, 7)) * 50 - c / 3 - z / 1.35 + 450, z, (1 - b / 1.2) * .9 + a * .1, P((1 - b), 20) / 4 + .05] } } setInterval('for(i=0;iz)m[q]=z,a.fillStyle="rgb("+~(s[3]*h)+","+~(s[4]*h)+","+~(s[3]*s[3]*-80)+")",a.fillRect(x,y,1,1)}', 0)

五、前端特效爱心 (1)前端 CSS "I Love You "爱心效果

I love you 点击每个单词查看效果 html { display: table; width: 100%; height: 100%; table-layout: fixed; } body { display: table-cell; width: 100%; height: 100%; vertical-align: middle; font-family: 'Shadows Into Light'; color: #111; } .wrapper { width: 500px; height: 500px; position: relative; margin: 0 auto; } input[type="checkbox"] { display: none; } input[type="checkbox"] + label { width: 100px; height: 100px; line-height: 100px; display: inline-block; position: absolute; text-align: center; font-size: 100px; transition: all 1s ease; } label { text-shadow: 8px 8px 30px rgba(0,0,0,0.5); } label:hover { color: #c32a2a; cursor: pointer; } #ck1 + label, #ck2 + label { border-radius: 50px; top: 0; } #ck1:checked + label, #ck2:checked + label, #ck3:checked + label { background: #c32a2a; font-size: 0; transition: all 1s ease; } #ck1:checked + label, #ck2:checked + label { width: 300px; height: 300px; border-radius: 150px; line-height: 300px; } #ck1 + label { left: 0; } #ck2 + label { right: 0; } #ck3 + label { bottom: 0; left: 50%; margin: 0 -50px; } #ck3:checked + label { width: 275px; height: 275px; bottom: 96px; left: 162px; transform: rotate(45deg); line-height: 27px; } span { display: inline-block; text-align: center; position: absolute; bottom: 10px; left: 50%; margin-left: -100px; width: 200px; font-size: 24px; color: #999; }

(2)各国语言“爱”字组成爱心效果

Document body { margin: 0; height: 100vh; display: flex; align-items: center; justify-content: center; background-color: black; overflow: hidden; } .love { width: 450px; height: 450px; position: relative; } .love span { position: absolute; left: 0; color: goldenrod; font-size: 20px; font-family: sans-serif; text-shadow: 0 0 1em white; animation: x-move 10s ease-in-out infinite alternate, y-move 20s linear infinite; animation-delay: calc(20s / var(--particles) * var(--n) * -1); user-select: none; } .love span:first-child { color: orangered; font-size: 3em; text-shadow: 0 0 0.1em black, 0 0 1em white; z-index: 1; } @keyframes x-move { to { left: 450px; } } @keyframes y-move { 0% { transform: translateY(180px); } 10% { transform: translateY(45px); } 15% { transform: translateY(5px); } 18% { transform: translateY(0); } 20% { transform: translateY(5px); } 22% { transform: translateY(35px); } 24% { transform: translateY(65px); } 25% { transform: translateY(110px); } 26% { transform: translateY(65px); } 28% { transform: translateY(35px); } 30% { transform: translateY(5px); } 32% { transform: translateY(0); } 35% { transform: translateY(5px); } 40% { transform: translateY(45px); } 50% { transform: translateY(180px); } 71% { transform: translateY(430px); } 72.5% { transform: translateY(440px); } 75% { transform: translateY(450px); } 77.5% { transform: translateY(440px); } 79% { transform: translateY(430px); } 100% { transform: translateY(180px); } } const words = [ '爱', 'Love', 'Amour', 'Liebe', 'Amore', 'Amor', 'Любовь', 'الحب', 'प्यार', 'Cinta', 'Αγάπη', '사랑', 'Liefde', 'Dashuri', 'Каханне', 'Ljubav', 'Láska', 'Armastus', 'Mahal', 'אהבה', 'Szerelem', 'Grá', 'Mīlestība', 'Meilė', 'Любов', 'Љубовта', 'Cinta', 'عشق', 'Dragoste', 'Láska', 'Renmen', 'ፍቅር', 'munaña', 'Sevgi', 'Љубав', 'karout', 'amà', 'amôr', 'kærleiki', 'mborayhu', 'Upendo', 'sòòyayyàà', 'ljubav', 'Սեր', 'сүю', 'сүйүү', 'tia', 'aroha', 'KHAIR', 'प्रेम', 'kjærlighet', 'munay', 'jecel', 'Kärlek', 'soymek', 'Mahal', 'ярату', 'محبت', 'sopp', 'uthando', 'ความรัก', 'Aşk', 'Tình yêu', 'ליבע']; d3.select('.love') .style('--particles', words.length) .selectAll('span') .data(words) .enter() .append('span') .style('--n', (d, i) => i + 1) .text((d) => d);

(3)上升爱心效果

Document var canvas = document.getElementById("cavs"); const WIDTH = window.innerWidth; const HEIGHT = window.innerHeight; canvas.setAttribute("width", WIDTH); canvas.setAttribute("height", HEIGHT); var context = canvas.getContext("2d"); var start = { loves: [], DURATION: 30, begin: function () { this.createLove(); }, createLove: function () { for (var i = 0; i < WIDTH / 59; i++) { var love = new Love(); this.loves.push(love); } setInterval(this.drawLove.bind(this), this.DURATION); }, drawLove: function () { context.clearRect(0, 0, WIDTH, HEIGHT); for (var key in this.loves) { this.loves[key].draw(); } } } function Love() { var me = this; function rand() { me.attr.scale = (Math.random() * 0.8 + 0.3) * WIDTH / 521; me.attr.x = Math.floor(Math.random() * WIDTH - 40); me.attr.y = Math.floor(HEIGHT - Math.random() * 200); me.attr.ColR = Math.floor(Math.random() * 255); me.attr.ColG = Math.floor(Math.random() * 255); me.attr.ColB = Math.floor(Math.random() * 255); me.attr.alpha = Math.random() * 0.2 + 0.8; me.attr.vector = Math.random() * 5 + 0.4; } (function () { me.attr = {}; rand(); }()); me.draw = function () { if (me.attr.alpha < 0.01) rand(); x = me.attr.x; y = me.attr.y; scale = 4 * me.attr.scale; context.beginPath(); context.bezierCurveTo(x + 2.5 * scale, y + 2.5 * scale, x + 2.0 * scale, y, x, y); context.bezierCurveTo(x - 3.0 * scale, y, x - 3.0 * scale, y + 3.5 * scale, x - 3.0 * scale, y + 3.5 * scale); context.bezierCurveTo(x - 3.0 * scale, y + 5.5 * scale, x - 1.0 * scale, y + 7.7 * scale, x + 2.5 * scale, y + 9.5 * scale); context.bezierCurveTo(x + 6.0 * scale, y + 7.7 * scale, x + 8.0 * scale, y + 5.5 * scale, x + 8.0 * scale, y + 3.5 * scale); context.bezierCurveTo(x + 8.0 * scale, y + 3.5 * scale, x + 8.0 * scale, y, x + 5.0 * scale, y); context.bezierCurveTo(x + 3.5 * scale, y, x + 2.5 * scale, y + 2.5 * scale, x + 2.5 * scale, y + 2.5 * scale); context.fillStyle = "rgba(" + me.attr.ColR + "," + me.attr.ColG + "," + me.attr.ColB + "," + me.attr.alpha + ")"; context.fill(); context.lineWidth = 0.5; context.stroke(); me.attr.y -= me.attr.vector; me.attr.alpha -= (me.attr.vector / 2.9 * 3.5 / HEIGHT); } } window.onload = function () { start.begin(); }

(4)变幻爱心

Document var b = document.body, c = document.getElementsByTagName('canvas')[0], a = c.getContext('2d'); document.body.clientWidth; // fix bug in webkit: http://qfox.nl/weblog/218 // ### Pixel Love - a js1k 2012 entry by @aaronsnoswell // This demo is on [github](https://github.com/aaronsnoswell/js1k-2012-love) // You can also browse the annotated source code at [http://aaronsnoswell.github.com/js1k-2012-love/docs/](http://aaronsnoswell.github.com/js1k-2012-love/docs/) // Define some variables: var h = "❤", // A heart g = 5, // The granularity - determines the size of each 'pixel' l = 10, // The threshold / limit, used for determining where to place pixels outline = [], // Arrays of locations for the outline and fill pixles fill = [], sx = 100, // Where to draw the heart sy = 450, box = [999, 999, 0, 0]; // The bounding box of the heart (computed later) // Set the canvas size c.width = 500; c.height = 800; // A utility function, used for looping over an x and y variable var loopxy = function(w, h, step, callback) { for(var x=0; x= l) { outline.push([x, y]); // Compute the bounding box of the heart if(xbox[2]) box[2] = x; if(ybox[3]) box[3] = y; } }); // Find the middle x and y locations of the heart box.push((box[0]+box[2])/2); box.push((box[1]+box[3])/2); // Store the current time as ms since epoch var t0 = new Date().getTime(); // Use a recursive named function + setTimeout to ensure each frame has // time to finish before the next one is drawn (function render() { window.setTimeout(function() { // Time delta and elapsed time var d = new Date().getTime()-t0; t0 += d; // Clear the screen a.clear(); // Draw the red heart a.fillStyle = "#f00"; loopxy(fill.length, 1, 1, function(i) { var x = fill[i][0], y = fill[i][1]; // Offset each pixel by a sinusoidal, time based ammount a.fillRect(x-g/2+Math.sin(t0/500+y/80)*(x-box[4])+10, y-g/2+10, g, g); }) // Draw the outline using the same logic as above a.fillStyle = "#000"; loopxy(outline.length, 1, 1, function(i) { var x = outline[i][0], y = outline[i][1]; a.fillRect(x-g/2+Math.sin(t0/500+y/80)*(x-box[4])+10, y-g/2+10, g, g); }) // Loop at 30fps render(); }, 1/30); })();

(5)红心下落动画

原:74行代码实现浪漫的红心下落的动画效果_汪子熙的博客-CSDN博客

var c = document.getElementsByTagName('canvas')[0]; var b = document.body; var a = c.getContext('2d'); function d(b, c, d, e) { a.fillStyle = b; a.beginPath(); a.arc(c, d, e, 0, 2 * m.PI, !0); a.fill(); a.fillRect(c, d, 1, 1) } m = Math; r = m.random; g = Date; l = +(new g); e = document; q = e.createElement("canvas"); w = e.createElement("canvas"); o = {}; h = 100; H = 200; v = window; t = c.width = v.innerWidth; u = c.height = v.innerHeight - 5; b.setAttribute("style", "margin:0;background:#000"); k = a; q.width = q.height = h; w.width = 1e3; w.height = H; for (j = 0; ++j < H; ) { for (i = 0; 1e3 > ++i; ) a = q.getContext("2d"), z = .5 - i / h, f = j / h - .5 + .4 * m.sqrt(m.abs(z)), f = z * z + 2 * f * f, .23 > f && d(.16 < f ? "#F00" : "#F88", i, j, 0), a = w.getContext("2d"), d(j > 5e-4 * i * i - .3 * i + h ? "#343" : j > 4e-4 * i * i - .9 * i + 500 ? "#232" : "#000", i, j, 0); o[j] = { x: r() * t, y: -h - r() * u, b: 51 - j / 4, a: 25 + .4 * j }; o[H + j] = { x: r() * t, y: r() * u - H, a: 3 * r() + 1, c: j } } a = k; v.setInterval(function() { n = +(new g); a.clearRect(0, 0, t, u); d("#FFA", H, 250, 150); d("#000", 270, 320, h); a.drawImage(w, 0, u - H, t, H); for (i = 0; ++i < H; ) f = (n - l) / h, s = o[H + i], d("#FFA", s.x, s.y, m.floor(m.max(s.a + m.sin(s.c++ / 10) - .5, 1))), z = o[i], a.drawImage(q, z.x += -.1 / (z.b / h) * f, z.y += (5 - z.b / 10) * f, z.a, z.a), z.y > u && (z.y = -h), z.x < -H && (z.x = t); l = n }, 60) //L


【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3