一、前言
2022年2月14号就是情人节了，情人节是一个关于爱、浪漫以及花、巧克力、贺卡的节日，男女在这一天互送礼物用以表达爱意或友好。在情人节的当天不知道有没有想要向心仪的对象表白的人，如果有的话，下面这一款神器可千万不要错过了。二、效果展示
1.首页
三、代码讲解
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> 复制代码 1234567891011121314 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; } 复制代码
12345678910111213141516171819 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> 复制代码
12345678910111213141516 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轴方向的坐标进行移动 }; } 复制代码
123456789101112131415161718192021222324四、总结
参考的Github源码地址：表白兄弟们，真的有没有人想在情人节表白的，如果有可以用Github Pages免费生成一个这个链接（下面部分有介绍，部署很简单），部署完成之后直接访问网站就行。可以按照自己的要求改一下姓名文字和表白的词语，祝大家早日找到对象，早生贵子哟！五、Github Pages
