表白神器利

最新推荐文章于 2022-10-27 13:16:47 发布

Mr， Jia

最新推荐文章于 2022-10-27 13:16:47 发布

阅读量93

点赞数 1

文章标签： javascript html css 大数据前端

本文链接：https://blog.csdn.net/SoLoJia/article/details/125222178

版权

这篇博客分享了一段利用HTML、CSS和JavaScript制作的浪漫表白代码，通过设置背景颜色、元素样式和动画效果，创建了一个爱心跳动的视觉效果。当鼠标悬停时，动画暂停，页面还包含一个求婚对话框，点击按钮会出现不同的回应。代码中还结合了jQuery和Bootstrap库，使得交互更加生动有趣。

摘要由CSDN通过智能技术生成

利用css+html+原生js制作而成

代码如下

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>LOVE YOU</title>
		<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
		<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">
		<script src="http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js"></script>
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<style>
			

			/* 添加背景颜色烘托浪漫的氛围 */
			body {
				background-color: pink;
			}

			.wrap {
				position: relative;
				width: 420px;
				height: 400px;
				margin: 20px auto;
				/* border: 1px solid rebeccapurple; */
				/* 此处的动画效果的一些属性，可自由发挥，动画名一定要和后面的相互对应 */
				animation: love 1s infinite alternate;
			}

			/* 添加的文字信息的属性设置，可自由发挥 */
			.wrap p {
				z-index: 1;
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				margin: auto;
				width: 100px;
				height: 30px;
				color: yellow;
			}

			.box-left {
				/* 此处通过给盒子1使用浮动属性使两个盒子重叠;或者第一个盒子不变，给第二个盒子用定位 用一种即可*/
				/* float: left; */
				width: 200px;
				height: 350px;
				background-color: red;
				/* 平移、旋转 */
				transform: translate(55px) rotate(-45deg);
				/* 圆角属性 */
				border-radius: 120px 120px 0 0;
				/* 添加阴影光环 */
				box-shadow: 0 0 80px 0 red;
			}

			.box-right {
				/* 此处通过给盒子2使用定位属性使两个盒子重叠;或者给盒子1使用浮动属性，第二个盒子不变 用一种即可*/
				position: relative;
				top: -350px;
				width: 200px;
				height: 350px;
				background-color: red;
				/* 平移、旋转 */
				transform: translate(161px) rotate(45deg);
				/* 圆角属性 */
				border-radius: 120px 120px 0 0;
				/* 添加阴影光环 */
				box-shadow: 0 0 80px 0 red;
			}

			/* 爱心的动画名字为love，一定要前后对应 */
			@keyframes love {

				/* 此处主要是通过变形属性的缩放来实现跳动 */
				0% {
					transform: scale(1);
				}

				50% {
					transform: scale(0.8);
				}

				100% {
					transform: scale(1.1);
				}
			}

			/* 鼠标悬停的效果 */
			.wrap:hover {
				animation-play-state: paused;
			}

			p {
				font-size: 20px;
				text-align: center;
				font-family: '楷体';
				line-height: 30px;
				color: chocolate;
			}
		</style>
	</head>


	<body>
		<div style="background-color: pink;">


			<div class="container">
				<div class="row col-md-3"></div>
				<div class="row col-md-6">
					<div class="row question">
						<div class="col-md-6 col-xs-12">
							<p style="line-height: 50px;font-size: 10px;">“小姐姐，我观察你很久了”</p>
							<p style="line-height: 50px;font-size: 20px;">做我女朋友好不好？</p>
						</div>
						<div class="col-md-6 col-xs-12">
							<img src="https://i.jpg.dog/img/a85bca3bdf386249b7ee74ca40518c93.png" alt=""
								style="height: 200px;">
						</div>
					</div>
					<div class="row question" style="margin-top: 20px;">
						<div class="col-md-6 col-xs-6" style="text-align: center;">
							<button type="button" class="btn btn-success" style="width: 80%" id="no">好</button>
						</div>
						<div class="col-md-6 col-xs-6" style="text-align: center;">
							<button type="button" class="btn btn-danger" style="width: 80%" id="ok">不好</button>
						</div>
					</div>
					<div class="col-md-12 col-xs-12 hide" id="success">
						<img src="https://i.jpg.dog/img/769db7762db8753d91143c4c8c394e76.gif" alt=""
							style="width: 100%;">
					</div>
				</div>

				<div class="row col-md-3"></div>

			</div>
		</div>
		<body>
			<div class="wrap">
				<p>I Love you</p>
				<div class="box-left">
					<!-- 1 -->
				</div>
				<div class="box-right">
					<!-- 2 -->
				</div>
			</div>
			<p>如果季节更替，树叶落地，银色满际</p>
			<p>没能走回原地，我再做个梦给你</p>
			<p>梦见我们相遇，没有话题，满眼笑意</p>
			<p>真的再见到你，再次拥抱你在怀里</p>
		</body>

		</head>
		</div>
		<script>
			var i = 1;
			var ok = false;
			$(document).ready(function() {
				$("#no").click(function() {
					alert("真的吗？你答应了？");
					alert("给我发消息吧，爱你");
					$(".question").addClass('hide');
					$("#success").removeClass('hide');
					ok = true;
				});
				$("#ok").click(function() {
					switch (i) {
						case 1:
							alert("工资上交");
							break;
						case 2:
							alert("家务全包");
							break;
						case 3:
							alert("房产证写你的名字");
							break;
						case 4:
							alert("保大");
							break;
						case 5:
							alert("我妈会游泳");
							break;
						case 6:
							alert("不跟你吵架，会撒娇 会卖萌");
							break;
						case 7:
							alert("你会答应我的对吧");
							break;
						case 8:
							alert("就这样说好了");
					 	break;
						default:
							alert("已经说好了");
					}
					i++;
				});
			});
		</script>
	</body>
</html>

效果图如下