HTML&CSS浪漫表白：女朋友说你不懂浪漫？让她试试这个

前端Hardy
929 阅读5分钟

这段代码通过HTML、CSS和JavaScript的结合，实现了一个交互式的表白页面，包括动画效果和用户交互。

5.gif

一键复制

<!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>前端Hardy</title>
</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: #212121; */
		background: #f7d6ff;
		background-image: linear-gradient(to bottom right, #91defe, #99c0f9, #bdb6ec, #d7b3e3, #efb3d5, #f9bccc);
		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);
		cursor: pointer;
	}

	.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: #F56c6c;
	}

	.btn-b {
		background: #67c23a;
	}

	.btn-a:before {
		content: '';
		position: absolute;
		display: block;
		width: 30px;
		height: 60px;
		background: #F56c6c;
		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: #F56c6c;
		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: #67c23a;
		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: #67c23a;
		left: 0;
		top: -29px;
		border-top-left-radius: 60px;
		border-top-right-radius: 60px;
	}

	.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;
		cursor: pointer;
	}

	.type_words {
		padding: 12px 20px;
		z-index: 9999;
		position: absolute;
		top: 20px;
		left: 0;
		color: #fff;
	}

	@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 () {
				typeWrite()
				$('.page_one').addClass('hide');
				$('.page_two').removeClass('hide');
				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 () {
			typeWrite()
			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 = '<div class="container">' +
			'<div class="mask"></div>' +
			'<div class="modal">' +
			'<p>' + content + '</p>' +
			'<button type="button" id="confirm" class="confirm">确定</button>' +
			'</div>' +
			'</div>';
		$('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>

HTML 标签说明

  • script：引入了 jQuery 库和自定义的 fireworks.js 库，用于实现页面的交互效果。
  • share_img：用于隐藏分享图片的容器。
  • page_one：包含表白问题的主要内容区域。
  • btn-groups：包含用户交互按钮的容器。
  • id="yes"、btn btn-a：表示“愿意”的按钮。
  • id="no"、btn btn-b：表示“不愿意”的按钮。
  • page_two hide：初始隐藏的页面，用于显示表白的文字。

CSS 样式说明

  • *：全局选择器，设置了默认的点击高亮颜色和盒模型。

  • html 和 body：设置了页面的宽高和背景颜色，背景图像。

  • .share_img：隐藏分享图片的样式。

  • content：内容区域的内边距设置。

  • text_wrapper：文本包装器，使用 flex 布局。

  • text：文本的上内边距和左内边距设置。

  • hide：用于隐藏元素的样式。

  • btn-groups：按钮组的样式，文本居中。

  • heart-btn：爱心按钮的动画效果。

  • btn：按钮的基本样式，包括尺寸、旋转和光标样式。

  • btn span：按钮内文本的样式，包括旋转和文本居中。

  • btn-a 和 btn-b：不同按钮的背景颜色和伪元素样式。

  • container mask：模态框遮罩的样式。

  • container modal：模态框的样式，包括尺寸、位置和背景。

  • confirm：确认按钮的样式。

  • type_words：输入文字的样式，包括内边距和位置。

  • @keyframes breath：定义了呼吸动画效果。

    JS 逻辑说明

  • 页面加载完成后，使用 jQuery 绑定点击事件到“愿意”和“不愿意”按钮上。

  • 点击“愿意”按钮，调用 modal 函数显示模态框，并在确认后执行 typeWrite 函数和 fireworks 函数，显示表白文字和烟花效果，隐藏.page_one 并显示.page_two。

  • 点击“不愿意”按钮，调用 modal 函数显示模态框，并在确认后执行一系列的函数（A 到 J），每个函数都显示不同的模态框内容。

  • fireworks 函数用于在.page_two 上显示烟花效果。

  • modal 函数用于创建和显示模态框，并在用户点击确定后执行回调函数。

  • typeWrite 函数用于模拟打字效果，逐字显示表白的文字。

  • 通过设置 setTimeout 和 clearTimeout 来控制打字效果的速度和结束。

avatar
文章
阅读
粉丝