当前位置 博文首页 > codevald：【2021情人节主题征文】| 写了一个表白网页后，我跟女
作为一名懂电脑的BOY，平常被班里女生问的最多一句话就是：我电脑出问题了，能不能帮我看一看。
像我这种只喜欢看二次元动漫的死肥宅工程师，能动口绝不动手。于是， “重启一下试试” 便成了我应对他们的口头禅。
后来的事实证明，这样做的效果并不好。因为这句话效率过高，重启确实能解决90%的问题，导致女生们后来再也没什么事联系我。
于是，作为一个不愿意帮别人修电脑的程序猿，我成功地单身了22年。
但是，作为一个平时只跟代码谈恋爱的耿直BOY,突然也羡慕起了别人甜甜的爱情。键盘里new出来的对象突然感觉不香了。。。。
今天是2月12号，我有个暗恋了一年的女神，马上快情人节了，我下定决心在14号这一天给她一个惊喜，向她说出我对她的心意。
作为一个理性的理工男，只写最漂亮的代码，只做最有把握的事，那么，表白的前期准备工作肯定是了解女神喜欢什么样的表白仪式，提高表白成功率啦。
深思了一会之后，我决定做一个浪漫的表白网页，向心爱的女神告白（虽然我是一名后端工程师，但是绝不向前端低头）。
在脑海中想象了下网页的大概样子，便用草稿画出了网页大概长的样子。
下图是完工后的网页
首先，定义主页的css样式
*{
margin: 0;
padding:0;
}
html,body{
width:100%;
height:100%;
/*text-align: center;*/
background-color: #ffc5b3;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
-o-transform:translate(-50%,-50%);
background-image: radial-gradient(#ffeded, #ffc7c7);
}
.textCon{
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
width:700px;
height:60px;
margin:50px auto;
}
.text{
font-size:48px;
}
.heart{
width:80px;
height:80px;
background-color:#cc2a5d;
margin:200px auto;
position: relative;
transform: rotate(45deg);
animation: heart 1s ease-in infinite;
}
.heart::before,
.heart::after{
content:'';
width:100%;
height:100%;
background-color:#cc2a5d;
border-radius: 50%;
}
.heart::before{
position: absolute;
top:0;
left:0;
transform: translateX(-50%);
}
.heart::after{
position: absolute;
top:0;
left:0;
transform: translateY(-50%);
}
@keyframes heart{
0%{
transform: scale(0.8) rotate(45deg);
opacity: 0.8;
}
50%{
transform: scale(1) rotate(45deg);
opacity: 1;
}
100%{
transform: scale(0.8) rotate(45deg);
opacity: 0.8;
}
}
.textCon .item{
position: absolute;
opacity: 0;
background-color:#cc2a5d;
transform: rotate(45deg);
animation: hearts 3s ease-in infinite;
}
.textCon .item::before,
.textCon .item::after{
content:'';
width:100%;
height:100%;
background-color:#cc2a5d;
position: absolute;
top:0;
left:0;
border-radius: 50%;
}
.textCon .item::before{
transform: translateX(-50%);
}
.textCon .item::after{
transform: translateY(-50%);
}
@keyframes hearts{
0%{
opacity: 0;
transform: translateY(0%) rotate(45deg);
}
20%{
opacity: 0.8;
transform: translateY(-20%) rotate(45deg);
}
100%{
opacity: 0;
transform: translateY(-1000%) rotate(45deg);
}
}
.days-label {
font-size: 30px;
}
.seconds {
margin-top: 10px;
font-size: 32px;
font-family: "Monda_bo", Georgia, sans-serif;
width: auto;
text-align: center;
}
.seconds-label {
margin-top: 32px;
font-size: 32px;
font-family: "Monda_no", Georgia, sans-serif;
width: auto;
text-align: center;
}
.container {
position: absolute;
}
.days {
font-size: 40px;
width: auto;
text-align: center;
}
.words {
font-size: 50px;
font-family: 'Regular', cursive;
width: auto;
text-align: center;
}
接着编写爱心效果的js代码
!function(e,t,a){function n(){c(".love{width: 20px;height: 20px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.love:after,.love:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.love:after{top: -10px;}.love:before{left: -10px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="love",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");
