我要悄悄学习，做一个浪漫的程序员

考虑文章篇幅的原因，大部分的小游戏、动画我都只放了HTML部分的代码，具体的CSS、JS代码我都打包放在了一起，具体参考文章末尾。

1.小鹿亲嘴

这两个年轻的小鹿相爱。你可以帮助他们在一起吗？

使用Matter.js物理特性和自定义psuedo-rigging进行构建。已更新为固定大小，以防止某些屏幕尺寸出现对齐问题。

主要HTML代码：

	
		
			
		
		
			
	
			
			
		

		

		  Move the green alpaca
		  
1 & 2
		  or mouse/touch
		
	  
		  
Help them kiss!
		
		

		  Move the pink alpaca with 
		  
?? & ?
		  or mouse/touch
		
		
	
	

	
	
	
	
	

还有CSS和JS代码，列出来的话文章太长了，本文中所有的完整代码都可通过文章末尾的方式获取（CSDN积分下载或者关注公众号啦啦啦好想biu点什么回复情人节表白免费获取）

2.变成小猫

“想变成小猫
每天挠挠你裤脚
这样你还会把我抱一抱”

当然这里的汉字你可以自由发挥，想不出来好点子也可以参考参考别人写的三行情诗或者网上搜一搜一些用来表白的情话。

HTML代码：

	
		
			
		
			
	
	
			
		

			

				
	
					想
					变
					成
					小
					猫
				
				

					每
					天
					挠
					挠
					你
					裤
					脚
				
				

					这
					样
					你
					还
					会
					把
					我
					抱
					一
					抱
				
			
			Restart
		
		
			

	

	
	

3.爱心表白

给你所爱之人一个特殊的消息，敞开爱心。CSS3动画使其震撼，并在单击消息后显示。

主要HTML代码：

	
		
			
			
	
		
		
		

		  

		    
		      
		      Click Me
		    
		    

		      
		      
I love you baby
		      
Be my valentine?
		      
~Skippy
		    
		  
		
		
	
	
	

4.爱心溢出

演示地址（第一次打不开的话刷新一下试试）：

https://wanghao221.github.io/game/Love-Overflow

主要HTML代码：

5.思念如马

“思念如马
自别离
未停蹄”

HTML代码

	
		
			
		
					
	
			
		

		  
_
		
	
	

6.霓虹灯爱心

主要HTML代码：

7.3D旋转相册

这个相册我之前发过，感觉情人节用来表白还是不错的。当然这里的相册可以换成自己的女朋友（没有的话我也没办法）音乐也可以换成自己喜欢的。

基于HTML的3D立方体相册

HTML代码：

        旋转相册



	
	

		

			
		
		

			
		
		

			
		
		

			
		
		

			
		
		

			
		
	
	
	

		

			
		
		

			
		
		

			
		
		

			
		
		

			
		
		

			
		
	


	

		

			海拥制作
		
		

            温馨提示：鼠标移入移出立方体，将会显示效果！
		
	

8.用不同的语言说“爱”

这里我用了61个国家的语言翻译的“爱”组成了一个爱心，特别把我们中国的爱弄得又大又红。

HTML非常简单：

JS：

const words = [
    '爱', 'Love', 'Amour', 'Liebe', 'Amore',
    'Amor', 'Любовь', '????', '?????', 'Cinta',
    'Αγ?πη', '??', 'Liefde', 'Dashuri', 'Каханне',
    'Ljubav', 'Láska', 'Armastus', 'Mahal', '????', 
    'Szerelem', 'Grá', 'Mīlestība', 'Meil?', 'Любов', 
    '?убовта', 'Cinta', '???', 'Dragoste', 'Láska', 
    'Renmen', '???', 'muna?a', 'Sevgi', '?убав', 
    'karout', 'amà', 'am?r', 'k?rleiki', 'mborayhu', 
    'Upendo', 'sòòyayyàà', 'ljubav', '???', 'с?ю', 
    'с?й??', 'tia', 'aroha', 'KHAIR', '?????', 
    'kj?rlighet', 'munay', 'jecel', 'K?rlek', 'soymek', 
    'Mahal', 'ярату', '????', 'sopp', 'uthando', 
    '???????', 'A?k', 'Tình yêu', '????'];
const dom = {
    love: document.querySelector('.love')
}

dom.love.style.setProperty('--particles', words.length)

words.forEach((word, i) => {
    let span = document.createElement('span')
    span.style.setProperty('--n', i + 1)
    span.innerText = word
    dom.love.appendChild(span)
})

9.愿意做我女朋友吗

愿意做我女朋友吗

HTML代码

	
		
			
		
		
			
	
			
		
		

		  
Will you be My Girlfriend?
		  
		  No
		  
		  Yes
		  

		  

		
		

		  
Made with  by 海拥CSDN博客
		
	

10.我被你所深深吸引

HTML代码

11.想对你说的话都在抽屉里

HTML代码

	
		
			
		
		
			
	
			
		
		

		  

		  

		    

		  
		  

		  

		  

		  

		  

		    

		      

		    
		    

		      

		      

		      

		      
You
		    
		  
		  

		    

		      

		    
		    

		      

		      

		      

		      
Are
		    
		  
		  

		    

		      

		    
		    

		      

		      

		      

		      
Mine
		    
		  
		
	

总结

以上所有代码演示地址放在这里（打不开可以刷新一下）
Wanghao | Love