css3情侣游戏,11个基于HTML/CSS/JS的情人节表白可爱小游戏、小动画【情人节主题征文】...
情人节表白可爱小游戏、小动画
我要悄悄学习,做一个浪漫的程序员
1.小鹿亲嘴
2.变成小猫
3.爱心表白
4.爱心溢出
5.思念如马
6.霓虹灯爱心
7.3D旋转相册
8.用不同的语言说“爱”
9.愿意做我女朋友吗
10.我被你所深深吸引
11.想对你说的话都在抽屉里
总结
我要悄悄学习,做一个浪漫的程序员
本来想赶在前几天在情人节之前把这篇文章写完,结果又是过年,又是走亲戚,情人节这天我又和女朋友看电影去了,所以一直到今天,白天忙完了事情,这才给大家带来这些基于HTML/CSS/JS的情人节表白可爱小游戏、小动画。
考虑文章篇幅的原因,大部分的小游戏、动画我都只放了HTML部分的代码,具体的CSS、JS代码我都打包放在了一起
1.小鹿亲嘴
这两个年轻的小鹿相爱。你可以帮助他们在一起吗?
使用Matter.js物理特性和自定义psuedo-rigging进行构建。已更新为固定大小,以防止某些屏幕尺寸出现对齐问题。
主要HTML代码:
Wanghao | 小鹿亲嘴
console.clear()
Move the green alpaca
or mouse/touch
Move the pink alpaca with
or mouse/touch
还有CSS和JS代码,列出来的话文章太长了,本文中所有的完整代码都可通过文章末尾的方式获取(CSDN积分下载或者关注公众号啦啦啦好想biu点什么回复情人节表白免费获取)
2.变成小猫
“想变成小猫
每天挠挠你裤脚
这样你还会把我抱一抱”
当然这里的汉字你可以自由发挥,想不出来好点子也可以参考参考别人写的三行情诗或者网上搜一搜一些用来表白的情话。
HTML代码:
Wanghao | 变成小猫
想
变
成
小
猫
每
天
挠
挠
你
裤
脚
这
样
你
还
会
把
我
抱
一
抱
Restart
Created by 海拥✘ @2021.
3.爱心表白
给你所爱之人一个特殊的消息,敞开爱心。CSS3动画使其震撼,并在单击消息后显示。
主要HTML代码:
Wanghao | 做我女朋友吧
Click Me
I love you baby
Be my valentine?
~Skippy
4.爱心溢出
演示地址(第一次打不开的话刷新一下试试):
https://wanghao221.github.io/game/Love-Overflow
主要HTML代码:
Wanghao | Love Overflow
5.思念如马
“思念如马
自别离
未停蹄”
HTML代码
Wanghao | 思念如马
6.霓虹灯爱心
主要HTML代码:
Wanghao | 霓虹灯爱心
7.3D旋转相册
这个相册我之前发过,感觉情人节用来表白还是不错的。当然这里的相册可以换成自己的女朋友(没有的话我也没办法)音乐也可以换成自己喜欢的。
基于HTML的3D立方体相册
HTML代码:
love
旋转相册
Your browser does not support the audio element.
海拥制作
温馨提示:鼠标移入移出立方体,将会显示效果!
8.用不同的语言说“爱”
这里我用了61个国家的语言翻译的“爱”组成了一个爱心,特别把我们中国的爱弄得又大又红。
HTML非常简单:
Wanghao | love
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代码
Wanghao | 愿意做我女朋友吗
Will you be My Girlfriend?
No
Yes
Made with by 海拥CSDN博客
10.我被你所深深吸引
HTML代码
Wanghao | 我被你所深深吸引
11.想对你说的话都在抽屉里
HTML代码
Wanghao | 想对你说的话都在抽屉里
总结
1.演示地址
以上所有代码演示地址放在这里(打不开刷新一下)
https://wanghao221.github.io/love/
2.代码下载
关注支持一下吧,后面我还会持续更新类似免费好玩的H5小游戏、Java小游戏、好玩、实用的项目和软件等等
相关内容
基于HTML/CSS/JS的爱吹风的小狮子小游戏
基于HTML/CSS/JS的勇敢的兔子疯狂奔跑小游戏
用HTML实现简单的下雪特效
youtube-dl安装和使用方法
基于Hexo和GitHub搭建自己的博客
java五子棋小游戏含免费源码
免费且好用的GIF录制软件LICEcap
css3情侣游戏,11个基于HTML/CSS/JS的情人节表白可爱小游戏、小动画【情人节主题征文】...相关推荐
- 11个基于HTML/CSS/JS的情人节表白可爱小游戏、小动画
情人节表白可爱小游戏.小动画 我要悄悄学习,做一个浪漫的程序员 1.小鹿亲嘴 2.变成小猫 3.爱心表白 4.爱心溢出 5.思念如马 6.霓虹灯爱心 7.3D旋转相册 8.用不同的语言说"爱 ...
- 基于HTML5+CSS+JS的响应式圣诞老人过悬崖小游戏
- 炫酷的表白烟花 html+css+js实现的表白烟花特效(程序员专属情人节表白网站)
❤ 精彩专栏推荐
- web版拳皇,使用html,css,js来制作一款拳皇游戏
web版拳皇,使用html,css,js来制作一款拳皇游戏 游戏简介 <拳皇>是1994年日本SNK公司旗下在MVS游戏机板上发售的一款著名对战型格斗街机游戏,简称"KOF&qu ...
- 基于html+css+js实现动态时钟
参照B站的一个视频,利用html+css+js实现了动态时钟. 视频链接为: link 动态时钟的效果 基于HTML+css+js实现的动态时钟 完整代码 <!DOCTYPE html> ...
- 基于HTML+CSS+JS+JQuery的京东商城
基于HTML+CSS+JS+JQuery的京东商城 包含京东商城首页,商品详情页,购物车页,订单确认页,结算页面,登录页,注册页. 项目截图 注册页面,有正则表达式验证,验证码则为6位随机数,注册成功 ...
- 解惑:如何使用html+css+js实现旋转相册,立方体相册等动画效果
解惑:如何使用html+css+js实现旋转相册,立方体相册等动画效果 一.前言 最初还是在抖音上看到可以使用简单地代码实现炫酷的网页效果的,但是想要找到可以运行的代码还是比较困难的,最近突然想起就在 ...
- 【基于Html+CSS+JS的canvas赛车小游戏(效果+源码)】
目录 效果 代码 说明 这个小游戏是通过在网页上运行,然后通过"上 下 左 右 键"操作的. 效果 代码 index.html <!DOCTYPE html> < ...
- HTML5七夕情人节表白网页制作【一箭穿心动画css3代码】HTML+CSS+JavaScript
这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此波共有100个表白网站,可以任意修改和使用,很多人会希望向心爱的男孩女孩告白,生性腼腆的人即使那个 ...
最新文章
- 2021年大数据Spark(三十一):Spark On Hive
- 高效率开发必备!!!!
- Java登陆页面经常出现的问题,问一下关于登陆页面的有关问题
- UITableView样式和UITableViewCell样式
- OpenCV 4.1.0 + Visual Studio 2019 开发环境搭建 超级简单
- Reverse Vowels of a String (反转字符串中的母音)
- SDNU 1263.C语言程序设计教程(第三版)课后习题10.5(约瑟夫环)
- 项目经理的职责(转载)
- TensorFlow 教程 --教程--2.7字词的向量表示
- go的优势--链表与结构体使用
- 微软8月补丁星期二值得关注的几个0day、几个严重漏洞及其它
- 构建幸福婚姻需明白四件事
- C语言十进制转换二进制
- W3Cschool凯撒(Caesar cipher)位移密码算法,通俗易懂,已知最佳,不服来战!
- 最近发现一款超牛的记单词软件,分享一下
- Nuxt.js重定向路由方式
- Latex数学符号整理
- DS18B20温度传感器单片机C语言驱动程序
- RGB_打开/获取颜色选择器(RGB)的几种方式/本地RGB查询/css颜色名参考
- 华为鸿蒙os家电,搭载华为鸿蒙OS的美的产品上市