【情人节快到了】程序员花里胡哨的表白方式，解锁新姿势

简介：大家好，我是枫哥，一线互联网的IT民工、资深面试官、Java跳蚤网课堂创始人。拥有多年一线研发经验，曾就职过科大讯飞、美团网、平安等公司。在上海有自己小伙伴组建的副业团队，目前业余时间专注Java技术分享，春招/秋招/社招/跳槽，一对一学习辅助，项目接活开发。

扫码左侧二维码，加入群聊，一起学习，一起进步！

 欢迎关注  收藏 留言 

：文末获取表白源码

神器一：

废话不多说，直接进入正题，贴代码

神器二：

废话不多说，直接上代码：

相信很多人，刚经历过过年在家的七大姑八大姨的催婚潮，被安排了多场相亲，头都大！有的朋友甚至跟我说，为了躲避过年干脆说疫情要求就地过年，直接不回家了！

俗话说：“逃得了初一逃不了十五”，该来的总要来的，眼看情人节又要来了，有的小伙伴会问程序员怎么表白的呀，下面我给大家分享几个神器的代码，程序员表白神器！

神器一：
演示地址：www.javatiaocao.com/myheart 为了防止恶意攻击，加了登录注册功能，需要登录看。

当然嫌麻烦的话，下面我把代码也分享出来了，大家可以自己操作实现！

注意：上面要是配上表白文字效果会更好

于是乎帮人帮到底，我给大家把表白情话也准备好了，如下：

你的眼里映着星星,我听见神说在劫难逃。我看过很多书,但都没有你好看。“这个世界乱糟糟的,而你干干净净,可以悬在我的心上,作太阳和月亮。你对我说的每一句话,都是沙漠里过的雨。一定要爱着占什么它让我们变得我从未想过爱你但是我爱了你是我温暖的手套,冰冷的啤酒,带着阳光味道的衬衫,日复一日的梦想。你是我的天下无双,我最后的念念不忘。雨雾漫了山腰,你迷住了我。你是我的洋地黄,治的了心衰,却治不了遇见你时的心律失常

废话不多说，直接进入正题，贴代码

(function(window,document,undefined){
    var hearts = [];
    window.requestAnimationframe = (function(){
        return window.requestAnimationframe ||
            window.webkitRequestAnimationframe ||
            window.mozRequestAnimationframe ||
            window.oRequestAnimationframe ||
            window.msRequestAnimationframe ||
            function (callback){
                setTimeout(callback,1000/60);
            }
    })();
    init();
    function init(){
        css(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: absolute;}.heart:after{top: -5px;}.heart:before{left: -5px;}");
        attachEvent();
        gameloop();
    }
    function gameloop(){
        for(var i=0;i 
神器二： 
原项目在codepen上，地址：https://codepen.io/jakealbaugh/pen/PwLXXP 
先看效果: 
 
 下面说说实现步骤： 
1：安装nodejs,具体如何安装网上有很多案例可以看看。 
2：npm install coffee.script 
3：将其bin目录添加到环境变量 
4：coffee -c coffee.script 
废话不多说，直接上代码： 
styles = """


body {
  background-color: #1a1c24; color: #fff;
  font-size: 1.0rem; line-height: 1.4;
  -webkit-font-smoothing: subpixel-antialiased;
}



pre { 
  position: fixed;
  top: 30px; bottom: 30px;
  transition: left 500ms;
  overflow: auto;
  background-color: #313744; color: #a6c3d4;
  border: 1px solid rgba(0,0,0,0.2);
  padding: 24px 12px;
  box-sizing: border-box;
  border-radius: 3px;
  box-shadow: 0px 4px 0px 2px rgba(0,0,0,0.1);
}




pre em:not(.comment) { font-style: normal; }

.comment       { color: #707e84; }
.selector      { color: #c66c75; }
.selector .key { color: #c66c75; }
.key           { color: #c7ccd4; }
.value         { color: #d5927b; }


 

pre { left: 50%; width: 45%}




#heart, #echo { 
  position: fixed;
  width: 300px; height: 300px;
  top: calc(50% - 150px); left: calc(25% - 150px);
  text-align: center;
  -webkit-transform: scale(0.95);
          transform: scale(0.95);
}

#heart { z-index: 8; }
#echo  { z-index: 7; }

#heart::before, #heart::after, #echo::before, #echo::after {
    content: '';
    position: absolute;
    top: 40px;
    width: 150px; height: 240px;
    background: #c66c75;
    border-radius: 150px 150px 0 0;
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
    -webkit-transform-origin: 0 100%;
            transform-origin: 0 100%;
}

#heart::before, #echo::before {
  left: 150px;
}

#heart::after, #echo::after {
  left: 0;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  -webkit-transform-origin: 100% 100%;
          transform-origin: 100% 100%;
}




#heart::after { 
  box-shadow:
    inset -6px -6px 0px 6px rgba(255,255,255,0.1);
}

#heart::before { 
  box-shadow:
    inset 6px 6px 0px 6px rgba(255,255,255,0.1);
}




#heart i::before {
  content: '大美丽';
  position: absolute;
  z-index: 9;
  width: 100%;
  top: 35%; left: 0;
  font-style: normal;
  color: rgba(255,255,255,0.8);
  font-weight: 100;
  font-size: 30px;
  text-shadow: -1px -1px 0px rgba(0,0,0,0.2);
}




@-webkit-keyframes heartbeat {
  0%, 100% { 
    -webkit-transform: scale(0.95); 
            transform: scale(0.95); 
  }
  50% { 
    -webkit-transform: scale(1.00); 
            transform: scale(1.00); 
  }
}

@keyframes heartbeat {
  0%, 100% { transform: scale(0.95); }
  50%      { transform: scale(1.00); }
}

@-webkit-keyframes echo {
  0%   { 
    opacity: 0.1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% { 
    opacity: 0;
    -webkit-transform: scale(1.4);
            transform: scale(1.4);
  }
}

@keyframes echo {
  0%   { 
    opacity: 0.1;
    transform: scale(1);
  }
  100% { 
    opacity: 0;
    transform: scale(1.4);
  }
}




#heart, #echo {
  -webkit-animation-duration: 2000ms;
          animation-duration: 2000ms;
  -webkit-animation-timing-function: 
    cubic-bezier(0, 0, 0, 1.74);
          animation-timing-function: 
            cubic-bezier(0, 0, 0, 1.74);
  -webkit-animation-delay: 500ms;
          animation-delay: 500ms;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
}

#heart { 
  -webkit-animation-name: heartbeat; 
          animation-name: heartbeat; 
}
#echo { 
  -webkit-animation-name: echo; 
          animation-name: echo; 
}



#heart, #echo {
  -webkit-animation-play-state: running;
          animation-play-state: running;
}




"""

openComment = false

writeStyleChar = (which) ->
	# begin wrapping open comments
  if which == '/' && openComment == false
    openComment = true
    styles = $('#style-text').html() + which
  else if which == '/' && openComment == true
    openComment = false
    styles = $('#style-text').html().replace(/(/[^/]**)$/, '$1/')
  # wrap style declaration
  else if which == ':'
    styles = $('#style-text').html().replace(/([a-zA-Z- ^n]*)$/, '$1:')
  # wrap style value 
  else if which == ';'
    styles = $('#style-text').html().replace(/([^:]*)$/, '$1;')
  # wrap selector
  else if which == '{'
    styles = $('#style-text').html().replace(/(.*)$/, '$1{')
  else
    styles = $('#style-text').html() + which
  $('#style-text').html styles
  $('#style-tag').append which

writeStyles = (message, index, interval) ->
  if index < message.length
    pre = document.getElementById 'style-text'
    pre.scrollTop = pre.scrollHeight
    writeStyleChar message[index++]
    setTimeout (->
      writeStyles message, index, if openComment then 60 else 5
    ), interval
    

# appending the tags I'll need.
$('body').append """
  
	
	
	
"""

# faster typing in small iframe on codepen homepage
# time = if window.innerWidth <= 578 then 4 else 16
time = 60

# starting it off
writeStyles(styles, 0, time)

###
Changelog:
1.0.0: i exist!
1.0.1: heart instead of circle
1.0.2: including standard CSS3 transforms and animations
	was only using `-webkit` to be less verbose (standard transforms dont work in safari)
	now works in FF
1.0.3: crossbrowser echo 
	nested `scale()` styles (scaled in scaled) only worked in chrome
	moved echo out of heart to fix
1.0.4: more efficient animations
	`0%, 100% {}` instead of duplicated keyframes
1.0.5: overflwo fix
  `overflow: auto` on the `pre`
### 
 
  感谢大家，坚持看完，既然选择了这条路，那就一起加油，一起学习！如果需要学习资源，实战面试资料，项目资源。关注公众号：IT枫斗者，根据关键字领取对应的资料福利！咨询解决问题，公众号私聊枫哥，备注来意。 
 回复：java全套学习资源 
 回复：面试资料 
 回复：枫哥简历 
 回复：程序员表白神器                
 （从此告别程序员单身狗！） 
 回复：程序员兼职网站 
 回复：枫哥666                              
 （ 获取66套项目实战资料，大厂面试视频)

【情人节快到了】程序员花里胡哨的表白方式，解锁新姿势

IT枫斗者 点击这里，记录今日

Java相关栏目本月热门文章

IT枫斗者