情人节将至，程序员证明自己不是直男的时候到啦！小编为大家准备了十个通过Java脚本语言实现的爱心动画特效，快学起来，到时候给女朋友一个惊喜吧
目录
3d爱心跳动特效效果展示代码展示线条合成的爱心动画特效效果展示代码展示520爱心背景表白网页动画特效效果展示代码展示爱心签到墙效果展示代码展示粉色的情人节爱心飞出用户界面特效效果展示代码展示酷炫表白爱心动画特效效果展示代码展示烂漫爱心表白动画（程序员也浪漫)效果展示代码展示飘落的爱心雨效果展示代码展示线条的三维(三维的缩写)爱心动画效果展示代码展示原生射流研究…制作爱心表白代码效果展示代码展示
3d爱心跳动特效
效果展示
代码展示
！文档类型超文本标记语言
html lang='en '
头
meta charset='UTF-8 '
标题跳动的心脏/标题
link rel='样式表' href=' CSS/style。CSS ' rel='外部不跟随' rel='外部不跟随' rel='外部不跟随' rel='外部不跟随' rel='外部不跟随'
/头
身体
脚本src=' js/three。量滴js '/脚本
脚本src=' js/mesh表面采样器。js '/脚本
编写src=' js/轨迹球控件的脚本。js '/脚本
脚本src=' js/simplex-noise。js '/脚本
脚本src=' js/obj加载程序。js '/脚本
脚本src='js/gsap.min.js'/script
script src=' js/script。js '/脚本
/body
/html
线条合成的爱心动画特效
效果展示
代码展示
！文档类型超文本标记语言
html lang='en '
头
meta charset='UTF-8 '
标题形成彩色心形/标题
link rel='样式表' href=' CSS/style。CSS ' rel='外部不跟随' rel='外部不跟随' rel='外部不跟随' rel='外部不跟随' rel='外部不跟随'
/头
身体
画布宽度='300 '高度='300 '样式='宽度：100%;身高：100米id='c'/canvas
script src='js/index.js'/script
/body
/html
520爱心背景表白网页动画特效
效果展示
代码展示
div class='star'div class='心脏动画/div/div
脚本类型=' application/JavaScript ' src=' js/main。js '/脚本
脚本
文档。身体。addevent侦听器('触摸移动'，函数(e){
e。防止默认()；
}，{ passive:false })；//被动参数不能省略，用来兼容ios和机器人
函数star(){
$('.星')。淡入()；
setTimeout(function(){
$('.星')。淡出()
},1000)
}
函数播放音乐
var player=$(' # player ')[0]；/*jquery对象转换成射流研究…对象*/
if (player.paused){ /*如果已经暂停*/
玩家。play()；/*播放*/
$(obj).添加类(“音乐旋转”)；
$(obj).attr('src '，' img/musicP.png ')
}否则{
玩家。pause()；/*暂停*/
$(obj).移除类(“音乐旋转”)；
$(obj).attr('src '，' img/musicS.png ')
}
}
/脚本
爱心签到墙
效果展示
代码展示
头
meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /
titleCSS3实现照片墙/标题
link href=' CSS/style。CSS ' rel='外部不跟随' rel='外部不跟随' rel='外部不跟随' rel='外部不跟随' rel='外部不跟随' type=' text/CSS ' rel='样式表'
/头
身体
div class=' container ' id=' container '/div
脚本src=' js/jquery-1。11 .1 .量滴js '/脚本
脚本
$(function () {
var count=0；
var selectFlag=false
var startFlag=false
var圆形盒
$('#container ').css('width '，window.innerHeight * 4/3)
var appendPic=function (item) {
如果(选择标志){
返回
}
var x=Math.random() * 4，
y=Math.random() * 4
如果(!heartFunc(x，y)) {
附录（项目)
}否则{
var back=' jpg
var imgNum=10
if (item % imgNum==1) {
back='gif '
}
if(item % img num==2 | | item % img num==3 | | item % img num==4){
back='png '
}
var html=' img src=' img/img ' item % img num ' .' back ' ' class=' pic base ' id=' pic-' item ' '/'
$('#container ').追加(html)
setTimeout(function () {
$('#pic-' item).css('top '，45 25 *(2-y)* 0.85“%”).css('左，50 ^ 25 *(2-x)* 0.85“%”)。css('transform '，' rotate(' 25 *(0.5-math。random())' deg)translate(-50%，-50%)')。css('宽度',' 100像素')。css('高度',' 100像素)
}, 500);
}
}
/脚本
粉色的情人节爱心飞出ui特效
效果展示
代码展示
！文档类型超文本标记语言
html lang='en '
头
meta charset='UTF-8 '
由纯Java Script语言和画布/标题创建
link rel='样式表' href=' CSS/style。CSS ' rel='外部不跟随' rel='外部不跟随' rel='外部不跟随' rel='外部不跟随' rel='外部不跟随'
/头
身体
div id='内容'
画布id='canvas '此浏览器不能使用画布。/画布
/div
script src=' js/script。js '/脚本
/body
/html
酷炫表白爱心动画特效
效果展示
代码展示
头
标题小瑞/标题
meta charset='utf-8 '
meta name=' viewport ' content=' width=设备宽度，用户可缩放=否，最小比例=1.0,最大比例=1.0 '
风格
正文{
字体系列：等宽；
背景色：# f0f0f0
边距：0px
溢出：隐藏；
}
/风格
/头
身体
script src='js/nb.js'/script
脚本src=' js/projector . js '/脚本
脚本src=' js/canvas渲染器。js '/脚本
脚本src=' js/tween。量滴js '/脚本
脚本src='js/Sparks.js'/script
！-从画布加载字体文件-文本-
脚本src=' js/helvetiker _ regular。字体。js '/脚本
烂漫爱心表白动画(程序员也浪漫)
效果展示
代码展示
link href=' CSS/default。CSS ' rel='外部无跟随' type=' text/CSS ' rel='样式表'
脚本类型=' text/JavaScript ' src=' js/jquery。js '/脚本
脚本类型=' text/JavaScript ' src=' js/garden。js '/脚本
脚本类型=' text/JavaScript ' src=' js/functions。js '/脚本
/头
身体
div id='mainDiv '
div id='content '
div id='code '
span class=' comments '/* */span br/
span class=' space '/span class=' comments ' * 2013-02-14，/spanbr /
span class=' space '/span class=' comments ' * 2013-02-28 ./spanbr /
span class=' space '/span class=' comments ' *//span br/
男孩名字=span class='关键字'先生/span LIbr /
女孩姓名=span class='关键字'夫人/span zh agbr/
坠入爱河2007年12月15日/spanbr /
男孩爱女孩；br /
他们彼此相爱2007年12月15日/spanbr /
女孩爱着男孩；br /
随着时间的推移2007年12月15日/spanbr /
男孩离不开女孩；br /
span class='comments'//同时2007年12月15日/spanbr /
女孩离不开男孩；br /
评论/漫天的风雪2007年12月15日/spanbr /
无论是步行还是5公里2007年12月15日/spanbr /
这个男孩非常快乐100 . br/
这个女孩也很开心100 . br/
span class=' placeholder '/span class=' comments '//是否现在/spanbr /
span class=' placeholder '/span class=' comments '//还在遥远的将来2007年12月15日/spanbr /
这个男孩只有一个梦想；br /
男孩希望女孩过得幸福2007年12月15日/spanbr /
英国铁路公司
英国铁路公司
我想说：br /
宝贝，我永远爱你；br /
/div
飘落的爱心雨
效果展示
代码展示
meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /
标题爱心雨/标题
风格
正文{
溢出：隐藏；
边距：0自动；
背景：url('img/16.jpg ')不重复；
背景-附件：固定；
背景-尺寸：封面；
蚊子背景-尺寸：封面；
-网络工具包-背景-大小：封面；
}。降雪：之前{
内容："";
/*绝对定位*/
位置：绝对；
左：0px
top:0px；
宽度：10px
高度：16px
变换：旋转(-45度);
背景色：红色；
边框-半径：5px 5px 1px 1px
}。雪花：在{
内容："";/*激活伪元素的必要因素*/
位置：绝对；
左：0px
top:0px；
宽度：10px
高度：16px
transform:translateX(4.3像素)rotate(45度)；
背景色：红色；
边框-半径：5px 5px 1px 1px
}
/风格
线条的3D爱心动画
效果展示
代码展示
！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www。w3。org/TR/XHTML 1/DTD/XHTML 1-过渡。' DTD '
html xmlns=' http://。w3。' org/1999/XHTML '
头
meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /
titleHTML5 3D爱心动画演示演示/标题
link rel='样式表' href=' CSS/normalize。CSS ' rel='外部无跟随'
！-主要样式-
link rel='样式表' href=' CSS/style。CSS ' rel='外部不跟随' rel='外部不跟随' rel='外部不跟随' rel='外部不跟随' rel='外部不跟随' media=' screen ' type=' text/CSS '/
/头
身体
div class='heart3d '
div class='rib1'/div
div class='rib2'/div
div class='rib3'/div
div class='rib4'/div
div class='rib5'/div
div class='rib6'/div
div class='rib7'/div
div class='rib8'/div
div class='rib9'/div
div class='rib10'/div
div class='rib11'/div
div class='rib12'/div
div class='rib13'/div
div class='rib14'/div
div class='rib15'/div
div class='rib16'/div
div class='rib17'/div
div class='rib18'/div
div class='rib19'/div
div class='rib20'/div
div class='rib21'/div
div class='rib22'/div
div class='rib23'/div
div class='rib24'/div
div class='rib25'/div
div class='rib26'/div
div class='rib27'/div
div class='rib28'/div
div class='rib29'/div
div class='rib30'/div
div class='rib31'/div
div class='rib32'/div
div class='rib33'/div
div class='rib34'/div
div class='rib35'/div
div class='rib36'/div
/div
/body
/html
原生JS制作爱心表白代码
效果展示
代码展示
！文档类型超文本标记语言
html lang='en '
头
meta charset='UTF-8 '
标题心心-样例图/标题
链接href=' favicon。ico ' rel='外部no follow ' rel='快捷图标' icon-love ' type=' images/x-ico '
link rel='样式表' href=' CSS/love。CSS ' rel='外部无跟随'
/头
身体
div class=' container ' onselectstart=' return false；'style='上的unselect='-moz-user-select:none；'
div class='body_left '
img src=' images/biu biu biu。gif ' alt=' ' ondragstart='返回false'
/div
div class=" body _ center爱'
div class='block '
div class='div1'/div
div class='div2'/div
div class='div3'/div
div class='div4'/div
/div
/div
/div
div class='页脚'
div class='border '
div class='border-top'/div
div class='border-bottom'/div
/div
div class='版权'
div id=' version ' span version:/span nbsp .0 .0 .2/格
div id='创建时间' span时间：/span nbsp .2019/4/17/div
div id=' author ' spancopy nbsp/spanxianchenxy/div
/div
/div
脚本类型=' text/JavaScript ' src=' js/love。js '/脚本
/body
/html
以上就是十个利用Java脚本语言实现的爱心动画特效的详细内容，更多关于Java脚本语言爱心动画特效的资料请关注我们其它相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。