小玩意，拿去给异性朋友试试-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_62598638/article/details/122065840

这是一个给异性发的小玩意，直接上

html部分：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="./css/all.css">
	<link rel="stylesheet" href="./css/index.css">
	<link rel="stylesheet" href="./font/css/font-awesome.css">
	<script type="text/javascript" src="./js/index.js"></script>
	<title>Document</title>
</head>
<body>
	<div class="wrapper clearfix">
		<div class="content">
			<p>\你爱我吗/</p>
			<span><img src="./img/1.PNG"></span><br>
			<button id="btn1">爱</button>
			<button id="btn2">不爱</button>
		</div>
		<div class="box-1" id="box1">
			<p>\我也爱你/</p>
			<button id="close"><i class="fa fa-times" aria-hidden="true"></i> </button>
		</div>
		<div class="box-2" id="box2">
			<p>敢不爱我，揍你一顿</p>
			<p>再给你一次机会</p>
			<button id="btn3">好</button>
		</div>
		<div class="box-3" id="box3">
			<p>现在还爱不爱我</p>
			<button id="btn4">爱</button>
			<button id="btn5">不爱</button>
		</div>
	</div>

</body>
</html>

css部分：

.wrapper {
  background-color: pink;
  width: 100%;
  height: 1000px;
  position: relative;
}
.wrapper .content {
  text-align: center;
  margin-top: 100px;
}
.wrapper .box-1 {
  width: 300px;
  height: 175px;
  background-color: rgba(248, 200, 208, 0.993);
  text-align: center;
  line-height: 150px;
  position: absolute;
  top: 100px;
  left: 0;
  right: 0;
  margin: 0 auto;
  display: none;
  border: 3px groove rgba(250, 175, 187, 0.993);
}
.wrapper .box-1 button {
  position: absolute;
  top: -2px;
  right: -1px;
}
.wrapper .box-2,
.wrapper .box-3 {
  width: 300px;
  height: 175px;
  background-color: rgba(248, 200, 208, 0.993);
  text-align: center;
  line-height: 50px;
  position: absolute;
  top: 100px;
  left: 0;
  right: 0;
  margin: 0 auto;
  display: none;
  border: 3px groove rgba(250, 175, 187, 0.993);
}
.wrapper .box-3 {
  line-height: 75px;
}

*{
    margin: 0;
    padding: 0;
    font-size: 20px;
}
.clearfix::before, .clearfix::after{
    content: '';
    display: table;
    clear: both;
}
button{
    width: 50px;
    height: 30px;
    background-color: rgba(248, 200, 208, 0.993);
}

js部分：

window.onload = function(){
    var btn1 = document.getElementById("btn1");
    var btn2 = document.getElementById("btn2");
    var btn3 = document.getElementById("btn3");
    var btn4 = document.getElementById("btn4");
    var btn5 = document.getElementById("btn5");
    var close = document.getElementById("close");
    btn1.onclick = function(){
        document.getElementById("box1").style.display = 'block';
    }
    btn2.onclick = function(){
        document.getElementById("box2").style.display = 'block';
    }
    btn3.onclick = function(){
        document.getElementById("box3").style.display = 'block';
        document.getElementById("box2").style.display = 'none';
    }
    btn4.onclick = function(){
        document.getElementById("box1").style.display = 'block';
        document.getElementById("box3").style.display = 'none';
    }
    btn5.onclick = function(){
        document.getElementById("box2").style.display = 'block';
        document.getElementById("box3").style.display = 'none';
    }
    close.onclick = function(){
        document.getElementById("box1").style.display = 'none';
    }
}

font.css是小图标，可在fontawesome官网下载使用

img部分：