一、前言
二、效果展示
1.首页

2.按钮选择
3.成功表白

三、代码讲解
1.首页
<div class="container">
<div id="preloader">
<div class="spinner">
<div class="dashed-loading"></div>//载入场景
</div>
</div>
<header class="header"></header>
<div class="content">//文本
<div class="answer-question">
<button class="btn btn--yes"></button>//调用左侧按钮
<button class="btn btn--no"></button>//调用右侧按钮
</div>
</div>
复制代码
2.样式
.header-name {
font-size: 3.4rem;
}
.content {//文本样式
}
.music-control {音乐控制
opacity: .1;
}
.btn--yes {//同意按钮的css参数
position: absolute;//相关的位置
top: 198px;
left: 60px;
}
.btn--no {//不同意按钮的参数
position: absolute;//相关的位置
top: 198px;
right: 70px;
}
复制代码
3.按钮移动

<div class="icon-container">//上方移动
<span class="ti-arrow-up"></span><span class="icon-name"> ti-arrow-up</span>
</div>
<div class="icon-container">//右侧移动
<span class="ti-arrow-right"></span><span class="icon-name"> ti-arrow-right</span>
</div>
<div class="icon-container">//左侧移动
<span class="ti-arrow-left"></span><span class="icon-name"> ti-arrow-left</span>
</div>
<div class="icon-container">//下方移动
<span class="ti-arrow-down"></span><span class="icon-name"> ti-arrow-down</span>
</div>
<div class="icon-container">//纵向移动
<span class="ti-arrows-vertical"></span><span class="icon-name"> ti-arrows-vertical</span>
</div>
复制代码
4.JS控制
btnYes.onclick = () => {//点击同意按钮进入表白界面
popup.classList.add("show");
};
btnClose.onclick = () => {//关闭当前界面
popup.classList.remove("show");
};
overlay.onclick = () => {
popup.classList.remove("show");
};
btnNo.onclick = () => {//定义不同意按钮位置
btnNo.style.top = 100 + "px";//初始化坐标
btnYes.style.top = 280 + "px";//初始化坐标
};
btnNo.onmouseover = (e) => {
var x = Math.random() * e.relatedTarget.clientHeight * 0.9;//随机x的坐标
var y = Math.random() * e.relatedTarget.clientWidth * 0.9;//随机y的坐标
btnNo.style.top = x + "px";//对不同意按钮x轴方向的坐标进行移动
btnNo.style.right = y + "px";//对不同意按钮y轴方向的坐标进行移动
};
}
复制代码
四、总结
五、Github Pages
