• 【HTML特效程序】① 给女神表白的程序（让女神看科技烟花），输入名字自动生成表白二维码

    目录

    一、效果演示视频

    给女神表白的程序

    二、一步一步创建项目

    🌹 在您的电脑上创建 love 文件夹 （存放所有的资源和代码）
    🌹 在 love 文件夹中创建 images 文件夹 （存放图片资源）
    🌹 在 love 文件夹中创建 js 文件夹 （存放 js 代码资源）
    🌹 在 love 文件夹中创建 index.html 文件 （存放 js 代码资源）
    在这里插入图片描述

    🌹 在 images 文件夹中放入下面的两张图片【把一张图片命名为a8.png、另一张图片命名为a8b.png】
    在这里插入图片描述
    在这里插入图片描述

    🌹 在 js 文件夹中创建lib文件夹
    🌹 在 lib 文件夹中导入下面的两个文件（我认为这就是一个装逼程序，没有必要了解代码😅😀）具体资源看后面的百度网盘

    在这里插入图片描述

    🌹 在 index.html 文件中粘贴下面的代码

    DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<title>forever lovetitle>
head>

<script src="js/lib/jquery.min.js" type="text/javascript">script>
<script src="js/lib/jquery.fireworks.js" type="text/javascript">script>

<style type="text/css">
*{ -webkit-tap-highlight-color:rgba(0,0,0,0); -webkit-box-sizing: border-box; box-sizing: border-box; }
html{ width: 100%; height: 100%; }
body{ max-width: 600px; margin: 0 auto; background: #0b3443; color: #f0f0f0;}
.share_img{ width: 0; height: 0; overflow: hidden; opacity: 0; }
.content{ padding: 80px 20px;}
.text_wrapper{ display: -webkit-box; display: flex; }
.text_wrapper .text{ padding-top: 20px; padding-left: 20px; }
.hide{ display: none !important; }
p{ margin: 0; }
.btn-groups{ padding-right: 20px; text-align: center; }
.heart-btn{ display: inline-block; animation: breath 0.8s linear 0s infinite both; -webkit-animation: breath 0.8s linear 0s infinite both; }
.btn{ position: relative; display: inline-block; width: 60px; height: 60px; margin: 0 30px; transform: rotate(45deg); -webkit-transform: rotate(45deg);}
.btn span{ display: block; width: 100%; height: 100%; line-height: 60px; margin-top: -10px; margin-left: -10px; text-align: center; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); }
.btn-a{ background: #d26ae5; }
.btn-b{ background: #c9c9c9; }
.btn-a:before{ content: ''; position: absolute; display: block; width: 30px; height: 60px; background: #d26ae5; left: -29px; top: 0; border-top-left-radius: 60px; border-bottom-left-radius: 60px; }
.btn-a:after{ content: ''; position: absolute; display: block; width: 60px; height: 30px; background: #d26ae5; left: 0; top: -29px; border-top-left-radius: 60px; border-top-right-radius: 60px;}
.btn-b:before{ content: ''; position: absolute; display: block; width: 30px; height: 60px; background: #c9c9c9; left: -29px; top: 0; border-top-left-radius: 60px; border-bottom-left-radius: 60px; }
.btn-b:after{ content: ''; position: absolute; display: block; width: 60px; height: 30px; background: #c9c9c9; left: 0; top: -29px; border-top-left-radius: 60px; border-top-right-radius: 60px;}
.container{  }
.container .mask{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.3); }
.container .modal{ width: 80%; height: 160px; position: absolute; top: 50%; left: 50%; padding: 20px 15px; border-radius: 5px; transform: translate(-50%, -70%); -webkit-transform: translate(-50%，-70%); background: #f3f3f3;}
.container .modal p{ margin-top: 20px; margin-bottom: 20px; font-size: 16px; color: #353535; text-align: center;}
.confirm{ display: block; width: 120px; height: 40px; margin: 0 auto; border: none; font-size: 16px; border-radius: 5px; color: #ffffff; background: #f45cae; }
.type_words{ padding: 12px 20px; }
@keyframes breath {
	0% {
		transform: scale3d(1,1,1);
		-webkit-transform: scale3d(1,1,1);
		transform-origin: 50% 50%;
	}
	50%{
		transform: scale3d(1.02,1.02,1.02);
		-webkit-transform: scale3d(1.02,1.02,1.02);
		transform-origin: 50% 50%;
	}
	100%{
		transform: scale3d(1,1,1);
		-webkit-transform: scale3d(1,1,1);
		transform-origin: 50% 50%;
	}
}
style>

<script type="text/javascript">
$(function() {
	$('#yes').click(function(event) {
		modal('我就知道小姐姐您一定会愿意的。(^_^)', function() {
			$('.page_one').addClass('hide');
			$('.page_two').removeClass('hide');
			// typeWrite();
			fireworks();
			
		});
	});
	$('#no').click(function(event) {
		modal('明人不说暗话我喜欢你！', A);
	});
});

function A() {
	modal('程序员工资挺高的可以养活你！', B);
}

function B() {
	modal('口红包包都给你买', C);
}

function C() {
	modal('请不要拒绝我', D);
}

function D() {
	modal('拒绝我，不存在的', E);
}

function E() {
	modal('这辈子都不可能让你离开我', F);
}

function F() {
	modal('跟我走吧', G);
}

function G() {
	modal('房产证上写你名', H);
}

function H() {
	modal('饭肯定是我做 碗也是我洗', I);
}

function I() {
	modal('指东绝不往西！', J)
}

function J() {
	modal('行，我们去民政局登记吧', function() {
		fireworks();
	});
}

function fireworks() {
	$('.page_one').addClass('hide');
	$('.page_two').removeClass('hide');
	$('.page_two').fireworks({ 
	  sound: false, 
	  opacity: 0.9, 
	  width: '100%', 
	  height: '100%' 
	});	
}

function modal(content, callback) {
	var tpl = '
    '+
							'
    '    +
							'
    '+
								'
    '+ content +'
    '    +
								''+
							'
    '    +
						'
    '    ;
	$('body').append(tpl);
	$(document).on('click', '.confirm', function() {
		$('.container').remove();
		callback();
	});
}

var myWords = '有人说，人的一生会遇到2920万人，而两个人相爱的概率只有0.000049。在这茫茫人海中，两个人能相遇就值得感激，能相爱更是一种难得。所以，我很庆幸上天让我遇见了你。我希望有个如你一般的人，能看完我写过的所有状态，读完我所有的日志，看完我从小到大的照片，试着听我喜欢的歌。如果可以，甚至陪我去我喜欢的地方，只想弥补错过你的青春。';
var x = 0;
var speed = 150;
var current = 0;
function typeWrite(){
	$('.type_words').html(myWords.substring(0, x++)+'_');
	var timer = setTimeout("typeWrite()", speed);
	if (x == myWords.length) {
		x = myWords.length;
		clearTimeout(timer)
	}
}

    script>
<body>

<div class="share_img"><img src="images/a8b.png" alt="">div>

<div class="page_one">
	<div class="content">
		<div class="text_wrapper">
			<img src="images/a8.png" alt="">
			<div class="text">
				小姐姐，我好喜欢你，你愿意做我女朋友吗？
			div>
		div>
	div>
	<div class="btn-groups">
		<div class="heart-btn">
			<div id="yes" class="btn btn-a"><span>愿意span>div>
		div>
		<div id="no" class="btn btn-b"><span>不愿意span>div>
	div>
div>
<div class="page_two hide">
	<div class="type_words">div>
div>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128
    • 129
    • 130
    • 131
    • 132
    • 133
    • 134
    • 135
    • 136
    • 137
    • 138
    • 139
    • 140
    • 141
    • 142
    • 143
    • 144
    • 145
    • 146
    • 147
    • 148
    • 149
    • 150
    • 151
    • 152
    • 153
    • 154
    • 155
    • 156
    • 157
    • 158
    • 159
    • 160
    • 161
    • 162
    • 163
    • 164
    • 165
    • 166
    • 167
    • 168
    • 169
    • 170
    • 171
    • 172
    • 173
    • 174
    • 175
    • 176
    • 177
    • 178
    • 179
    • 180

    ❤️ 可以修改上面的文字，指定给某个人表白
    ❤️ 上述完成后，可双击 index.html 执行代码

    ❤️ 完整内容可通过下面的百度网盘进行下载哦！【给个❤️吧】

    链接：https://pan.baidu.com/s/1jl89wxaYDRmdxLj04aUeYw 
提取码：1qrm

    • 1
    • 2

    ❤️ 实话说，这些都是装逼程序，我也看不懂
    ❤️ 无论如何，可以装逼就可以了

    三、生成表白二维码的小链接

    🎄 博主自己创建了一个生成表白二维码的网址
    🎄 下面教大家如何使用
    🎄 ① 点击下面的链接
    http://gqok.xyz/admin/LoveYou/1/name.html
    在这里插入图片描述

    🎄 ② 输入名字、点击确定、点击【生成表白二维码的链接】

    在这里插入图片描述

    🎄 ③ 把表白二维码分享给对方

    ❤️ 愿表白成功哦！

  • 相关阅读:
    2022年11月26日NaiveBayes
    租服务器太贵？流程太麻烦？教你如何免费解决
    辅助解决小白遇到的电脑各种问题
    Spring为什么不支持static字段注入
    【excel】设置可变下拉菜单（一级联动下拉菜单）
    三、Clion和STM32CubeMx---USART串口通讯（重定向、接发通信、控制LED亮灭）
    人工智能轨道交通行业周刊-第25期（2022.11.28-12.4）
    侦查帮派问题
    2021年CSDN年度总结：回顾过去 掌握现在 展望未来
    使用vagrant工具来管理和创建虚拟机
  • 原文地址：https://blog.csdn.net/m0_54189068/article/details/127763969