程序员的告白方式——通关

作为程序员,什么都可以学不会,但必须要有的一点就是学会怎样撩妹子。如果只靠一点点代码就能帮你找个女朋友,你愿意否?我来告诉你怎样做到哈!!!

如果对方特别容易就会被感动到,你就可以用这个代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>祝福</title>
	</head>
	<body>
		<p>点击下面按钮试试效果吧!</p>
		<button onclick="myFunction()">按钮</button>
		<p id="demo"></p>
		<script>
			function myFunction() {
				var x;
				var name = prompt("请输入你的名字","南星");
				if (name!=null && name!=""){
					x=
					`
					 ${name}:<br><br>
					愿余一生欢喜,不为世俗所及!<br><br>
					&emsp;&emsp;&emsp;💖&emsp;&emsp;&emsp;&nbsp;💖&emsp;&emsp;&emsp;<br>
					&emsp;&emsp;💖&emsp;&nbsp;&nbsp;&nbsp;💖&emsp;&emsp;💖<br>
					&emsp;&emsp;&emsp;💖&emsp;&emsp;&emsp;&nbsp;💖<br>
					&emsp;&emsp;&emsp;&emsp;💖&emsp;&nbsp;💖<br>
					&emsp;&emsp;&emsp;&emsp;&emsp;&nbsp;💖<br><br>
					既许一人以偏爱<br>
					&emsp;&emsp;&emsp;&emsp;愿尽余生之慷慨
					️️️`
				}
				document.getElementById("demo").innerHTML = x;
			}
		</script>

	</body>
</html>

效果嘛,哈哈

输入ta的名字:
在这里插入图片描述
然后就会变成这样啦:
在这里插入图片描述


我们都知道python中有一个绘图的基本库——turtle(海龟),想象一个小乌龟,在一个横轴为x、纵轴为y的坐标系原点,(0,0)位置开始,它根据一组函数指令的控制,在这个平面坐标系中移动,从而在它爬行的路径上绘制了图形。
可以参考python—turtle库(详解),里面包括turtle的用法以及一些案例,讲的特别详细。在这里我罗列一些重要的用法,并附上一个告白代码,愿余一生欢喜,不为世俗所及!!!
其实,大多数的函数用法都是建立在英语单词本来的意思上,所以我们学习这个库还是相对来说比较简单的。
在使用这个库的时候,通常会用到很多 ‘turtle’ 这个词,所以在导入函数的时候一定要记得:

import turtle as t

经常配合turtle使用的其他模块有mathrandom等,大家也可以了解其中一些函数的用法。
turtle的用法有:

命令说明
turtle.forward(distance)向当前画笔方向移动distance像素长度
turtle.backward(distance)反方向
turtle.right(degree)顺时针移动degree°
turtle.left(degree)逆时针
setheading(angle)设置当前朝向为angle角度
turtle.up()移动时不绘制图形,代码的下一行
turtle.mainloop()或turtle.done()启动事件循环 -调用Tkinter的mainloop函数,必须是乌龟图形程序中的最后一个语句
turtle.color(color1,color2)同时设置pencolor=color1, fillcolor=color2
turtle.wirte(s,[font=(‘font_name’,font_size,‘font_type’)])写文本,s为文本内容,font是字体的参数,分别为字体名称,大小和类型;font为可选项,font参数也是可选项
turtle.becolor(‘color’)背景颜色
turtle.bgpic(‘1.gif’)背景图片
turtle.speed(speed)设置画笔移动速度,画笔绘制的速度范围[0,10]整数,数字越大越快
turtle.circle()画圆,半径为正(负),表示圆心在画笔的左边(右边)画圆

接下来重点,先看代码效果:
FESSION

附上代码:

import turtle as t
import math

t.title('CONFESSION')

t.speed(100)

t.penup()
t.goto(177, 112)
t.pencolor("lightgray")
t.pensize(3)
t.fillcolor("white")
t.begin_fill()
t.pendown()
t.setheading(80)
t.circle(-45, 200)
t.circle(-300, 23)
t.end_fill()

t.penup()
t.goto(182, 95)
t.pencolor("black")
t.pensize(1)
t.fillcolor("black")
t.begin_fill()
t.setheading(95)
t.pendown()
t.circle(-37, 160)
t.circle(-20, 50)
t.circle(-200, 30)
t.end_fill()

t.penup()
t.goto(-73, 230)
t.pencolor("lightgray")
t.pensize(3)
t.fillcolor("white")
t.begin_fill()
t.pendown()
t.setheading(20)
t.circle(-250, 35)

t.setheading(50)
t.circle(-42, 180)

t.setheading(-50)
t.circle(-190, 30)
t.circle(-320, 45)

t.circle(120, 30)
t.circle(200, 12)
t.circle(-18, 85)
t.circle(-180, 23)
t.circle(-20, 110)
t.circle(15, 115)
t.circle(100, 12)

t.circle(15, 120)
t.circle(-15, 110)
t.circle(-150, 30)
t.circle(-15, 70)
t.circle(-150, 10)
t.circle(200, 35)
t.circle(-150, 20)

t.setheading(-120)
t.circle(50, 30)
t.circle(-35, 200)
t.circle(-300, 23)

t.setheading(86)
t.circle(-300, 26)

t.setheading(122)
t.circle(-53, 160)
t.end_fill()

t.penup()
t.goto(-130, 180)
t.pencolor("black")
t.pensize(1)
t.fillcolor("black")
t.begin_fill()
t.pendown()
t.setheading(120)
t.circle(-28, 160)
t.setheading(210)
t.circle(150, 20)
t.end_fill()

t.penup()
t.goto(90, 230)
t.setheading(40)
t.begin_fill()
t.pendown()
t.circle(-30, 170)
t.setheading(125)
t.circle(150, 23)
t.end_fill()

t.penup()
t.goto(-180, -55)
t.fillcolor("black")
t.begin_fill()
t.setheading(-120)
t.pendown()
t.circle(50, 30)
t.circle(-27, 200)
t.circle(-300, 20)
t.setheading(-90)
t.circle(300, 14)
t.end_fill()

t.penup()
t.goto(108, -168)
t.fillcolor("black")
t.begin_fill()
t.pendown()
t.setheading(-115)
t.circle(110, 15)
t.circle(200, 10)
t.circle(-18, 80)
t.circle(-180, 13)
t.circle(-20, 90)
t.circle(15, 60)
t.setheading(42)
t.circle(-200, 29)
t.end_fill()

t.penup()
t.goto(-38, -210)
t.fillcolor("black")
t.begin_fill()
t.pendown()
t.setheading(-155)
t.circle(15, 100)
t.circle(-10, 110)
t.circle(-100, 30)
t.circle(-15, 65)
t.circle(-100, 10)
t.circle(200, 15)
t.setheading(-14)
t.circle(-200, 27)
t.end_fill()

t.penup()
t.goto(-64, 120)
t.begin_fill()
t.pendown()
t.setheading(40)
t.circle(-35, 152)
t.circle(-100, 50)
t.circle(-35, 130)
t.circle(-100, 50)
t.end_fill()

t.penup()
t.goto(-47, 55)
t.fillcolor("white")
t.begin_fill()
t.pendown()
t.setheading(0)
t.circle(25, 360)
t.end_fill()
t.penup()
t.goto(-45, 62)
t.pencolor("darkslategray")
t.fillcolor("darkslategray")
t.begin_fill()
t.pendown()
t.setheading(0)
t.circle(19, 360)
t.end_fill()
t.penup()
t.goto(-45, 68)
t.fillcolor("black")
t.begin_fill()
t.pendown()
t.setheading(0)
t.circle(10, 360)
t.end_fill()
t.penup()
t.goto(-47, 86)
t.pencolor("white")
t.fillcolor("white")
t.begin_fill()
t.pendown()
t.setheading(0)
t.circle(5, 360)
t.end_fill()

t.penup()
t.goto(51, 82)
t.fillcolor("black")
t.begin_fill()
t.pendown()
t.setheading(120)
t.circle(-32, 152)
t.circle(-100, 55)
t.circle(-25, 120)
t.circle(-120, 45)
t.end_fill()

t.penup()
t.goto(79, 60)
t.fillcolor("white")
t.begin_fill()
t.pendown()
t.setheading(0)
t.circle(24, 360)
t.end_fill()
t.penup()
t.goto(79, 64)
t.pencolor("darkslategray")
t.fillcolor("darkslategray")
t.begin_fill()
t.pendown()
t.setheading(0)
t.circle(19, 360)
t.end_fill()
t.penup()
t.goto(79, 70)
t.fillcolor("black")
t.begin_fill()
t.pendown()
t.setheading(0)
t.circle(10, 360)
t.end_fill()
t.penup()
t.goto(79, 88)
t.pencolor("white")
t.fillcolor("white")
t.begin_fill()
t.pendown()
t.setheading(0)
t.circle(5, 360)
t.end_fill()

t.penup()
t.goto(37, 80)
t.fillcolor("black")
t.begin_fill()
t.pendown()
t.circle(-8, 130)
t.circle(-22, 100)
t.circle(-8, 130)
t.end_fill()

t.penup()
t.goto(-15, 48)
t.setheading(-36)
t.begin_fill()
t.pendown()
t.circle(60, 70)
t.setheading(-132)
t.circle(-45, 100)
t.fillcolor("brown")
t.end_fill()

t.penup()
t.goto(-135, 120)
t.pensize(5)
t.pencolor("cyan")
t.pendown()
t.setheading(60)
t.circle(-165, 150)
t.circle(-130, 78)
t.circle(-250, 30)
t.circle(-138, 105)
t.penup()
t.goto(-131, 116)
t.pencolor("black")
t.pendown()
t.setheading(60)
t.circle(-160, 144)
t.circle(-120, 78)
t.circle(-242, 30)
t.circle(-135, 105)
t.penup()
t.goto(-127, 112)
t.pencolor("orangered")
t.pendown()
t.setheading(60)
t.circle(-155, 136)
t.circle(-116, 86)
t.circle(-220, 30)
t.circle(-134, 103)
t.penup()
t.goto(-123, 108)
t.pencolor("gold")
t.pendown()
t.setheading(60)
t.circle(-150, 136)
t.circle(-104, 86)
t.circle(-220, 30)
t.circle(-126, 102)
t.penup()
t.goto(-120, 104)
t.pencolor("green")
t.pendown()
t.setheading(60)
t.circle(-145, 136)
t.circle(-90, 83)
t.circle(-220, 30)
t.circle(-120, 100)
t.penup()

t.penup()
t.goto(220, 115)
t.pencolor("brown")
t.pensize(1)
t.fillcolor("brown")
t.begin_fill()
t.pendown()
t.setheading(36)
t.circle(-8, 180)
t.circle(-60, 24)
t.setheading(110)
t.circle(-60, 24)
t.circle(-8, 180)
t.end_fill()

t.penup()
t.goto(-25, -170)
t.pendown()
t.pencolor("blue")
t.circle(6)
t.penup()
t.goto(-10, -170)
t.pendown()
t.pencolor("black")
t.circle(6)
t.penup()
t.goto(5, -170)
t.pendown()
t.pencolor("brown")
t.circle(6)
t.penup()
t.goto(-18, -175)
t.pendown()
t.pencolor("lightgoldenrod")
t.circle(6)
t.penup()
t.goto(-4, -175)
t.pendown()
t.pencolor("green")
t.circle(6)
t.penup()

t.pencolor("black")
t.goto(-40, -160)
t.write("BEIJING 2022", font=('Arial', 10, 'bold'))

t.pencolor("orange")
t.goto(190, -160)
t.write("Hi Xiao!", font=('heiti', 20, 'bold'))

t.pencolor("orange")
t.goto(190, -200)
t.write("If I know what love is,", font=('heiti', 20, 'bold'))
t.goto(190, -240)
t.write("it is because of you!", font=('heiti', 20, 'bold'))

t.pencolor("blue")
t.goto(-450, 500)
word = "我与春风皆过客"
y = 200
delta_y = 60
for c in word:
    t.penup()
    t.sety(y)
    t.write(c, font=("楷体", 32, "normal"))
    y -= delta_y
t.goto(-500, 350)
word = "你携秋水揽星河"
y = 200
delta_y = 60
for c in word:
    t.penup()
    t.sety(y)
    t.write(c, font=("楷体", 32, "normal"))
    y -= delta_y

t.penup()
t.goto(0, -110)
t.left(90)
t.pendown()
t.color('red')
t.begin_fill()
t.fillcolor('red')
t.speed(10)
t.left(45)
t.forward(15)
t.right(45)
t.forward(10)
t.right(45)
t.forward(10)
t.right(45)
t.forward(10)
t.right(45)
t.forward(25 + math.sqrt(2) * 10)
t.right(90)
t.speed(10)
t.forward(25 + 10 * math.sqrt(2))
t.right(45)
t.forward(10)
t.right(45)
t.forward(10)
t.right(45)
t.forward(10)
t.right(45)
t.forward(15)
t.end_fill()

t.goto(-15, -130)
t.pencolor("white")
t.write("LOVE", font=('Arial', 10, 'bold'))

t.done()

整体的代码比较简单易懂,难点在于互相之间的联系。
分享的代码希望能帮铁子们派上用场,fighting !!!


如果这样行不通,那就说明ta的情商绝对不低,别急,再来个更狠的代码:
准备css、img、.html三样。

css文件夹中存放了一个style.css文件,代码如下:

<pre name="code" class="css">*{
    padding:0;
    margin:0;
}
body{
    width:100%;
    height:100%;
	background: url(../img/beijing.jpg) no-repeat;
	background-size: 2050px 1080px;
}
#react{
    width: 400px;
    height:400px;
    margin: 350px auto;
    transform-style:preserve-3d;
    animation:rotate 15s infinite;
    animation-timing-function: linear;
}
#react div{
    position:absolute;
    transition: all .4s;
}
div .out_pic{
    width:400px;
    height:400px;
    opacity:1;
}
div .in_pic{
    width:200px;
    height:200px;
}
#react span{
    display:block;
    position:absolute;
    width:200px;
    height:200px;
    top:80px;
    left:80px;
}
@keyframes rotate{
    from{transform: rotateX(0deg) rotateY(0deg);}
    to{transform: rotateX(360deg) rotateY(360deg);}
}
  
.out_front{
    transform:translateZ(200px);
}
.out_back{
    transform:translateZ(-200px);
}
.out_left{
    transform:rotateY(90deg) translateZ(200px);
}
.out_right{
    transform: rotateY(-90deg) translateZ(200px);
}
.out_top{
    transform:rotateX(90deg) translateZ(200px);
}
.out_bottom{
    transform: rotateX(-90deg) translateZ(200px);
}
.in_front{
    transform:translateZ(100px);
}
.in_back{
    transform:translateZ(-100px);
}
.in_left{
    transform:rotateY(90deg) translateZ(100px);
}
.in_right{
    transform: rotateY(-90deg) translateZ(100px);
}
.in_top{
    transform:rotateX(90deg) translateZ(100px);
}
.in_bottom{
    transform: rotateX(-90deg) translateZ(100px);
}
  
/*外面的图片散开*/
#react:hover .out_front{
    transform:translateZ(400px);
}
#react:hover .out_back{
    transform:translateZ(-400px);
}
#react:hover .out_left{
    transform:rotateY(90deg) translateZ(400px);
}
#react:hover .out_right{
    transform: rotateY(-90deg) translateZ(400px);
}
#react:hover .out_top{
    transform:rotateX(90deg) translateZ(400px);
}
#react:hover .out_bottom{
    transform: rotateX(-90deg) translateZ(400px);
}
  
  
/*里面的图片散开*/
#react:hover .in_front{
    transform:translateZ(200px);
}
#react:hover .in_back{
    transform:translateZ(-200px);
}
#react:hover .in_left{
    transform:rotateY(90deg) translateZ(200px);
}
#react:hover .in_right{
    transform: rotateY(-90deg) translateZ(200px);
}
#react:hover .in_top{
    transform:rotateX(90deg) translateZ(200px);
}
#react:hover .in_bottom{
    transform: rotateX(-90deg) translateZ(200px);
}
  
@charset "utf-8";
/* CSS Document */

img文件夹中存放ta的照片,但是名字一定要和我的一样哦!
在这里插入图片描述
html的代码如下:


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    <title>love</title>
</head>
<body>
<div id="react">
    <div class="out_front">
        <img src="img/1.jpg" class="out_pic">
    </div>
    <div class="out_back">
        <img src="img/2.jpg" class="out_pic">
    </div>
    <div class="out_left">
        <img src="img/3.jpg" class="out_pic">
    </div>
    <div class="out_right">
        <img src="img/4.jpg" class="out_pic">
    </div>
    <div class="out_top">
        <img src="img/5.jpg" class="out_pic">
    </div>
    <div class="out_bottom">
        <img src="img/6.jpg" class="out_pic">
    </div>
    <span class="in_front">
        <img src="img/7.jpg" class="in_pic">
    </span>
    <span class="in_back">
        <img src="img/8.jpg" class="in_pic">
    </span>
    <span class="in_left">
        <img src="img/9.jpg" class="in_pic">
    </span>
    <span class="in_right">
        <img src="img/10.jpg" class="in_pic">
    </span>
    <span class="in_top">
        <img src="img/11.jpg" class="in_pic">
    </span>
    <span class="in_bottom">
        <img src="img/12.jpg" class="in_pic">
    </span>
</div>
</body>
</html>

双击一下 html,来看下效果:

运行效果


大功告成!!

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值