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

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

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

：文末获取表白源码

目录

神器一：

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

神器二：

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

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

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

神器一：

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

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

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

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

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

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

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

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