七个基于JavaScript实现的情人节表白特效
目录
- 七夕情人节送花动画告白特效
- 玫瑰花盛开动画告白特效
- 3d旋转相册
- 点击爱心散开动画告白特效
- 雷电打出告白文字特效
- 粒子组合告白文字特效
- 小熊拉手CSS3情人节动画表白特效
七夕情人节送花动画告白特效
效果展示
代码展示:
<div id='content'>
<ul class='content-wrap'>
<!-- 第一副画面 -->
<li>
<!-- 背景图 -->
<div class="a_background">
<div class="a_background_top"></div>
<div class="a_background_middle"></div>
<div class="a_background_botton"></div>
</div>
<!-- 云 -->
<div class="cloudArea">
<div class="cloud cloud1"></div>
<div class="cloud cloud2"></div>
</div>
<!-- 太阳 -->
<div id="sun"></div>
</li>
<!-- 第二副画面 -->
<li>
<!-- 背景图 -->
<div class="b_background"></div>
<div class="b_background_preload"></div>
<!-- 商店 -->
<div class="shop">
<div class="door">
<div class="door-left"></div>
<div class="door-right"></div>
</div>
<!-- 灯 -->
<div class="lamp"></div>
</div>
<!-- 鸟 -->
<div class="bird"></div>
</li>
<!-- 第三副画面 -->
<li>
<!-- 背景图 -->
<div class="c_background">
<div class="c_background_top"></div>
<div class="c_background_middle"></div>
<div class="c_background_botton"></div>
</div>
<!-- 小女孩 -->
<div class="girl"></div>
<div class="bridge-bottom">
<div class="water">
<div id="water1" class="water_1"></div>
<div id="water2" class="water_2"></div>
<div id="water3" class="water_3"></div>
<div id="water4" class="water_4"></div>
</div>
</div>
<!-- 星星 -->
<ul class="stars">
<li class="stars1"></li>
<li class="stars2"></li>
<li class="stars3"></li>
<li class="stars4"></li>
<li class="stars5"></li>
<li class="stars6"></li>
</ul>
<div class="logo">祝天下有情人终成眷属</div>
</li>
</ul>
<!-- 雪花 -->
<div id="snowflake"></div>
<!-- 小男孩 -->
<div id="boy" class="charector"></div>
</div>
玫瑰花盛开动画告白特效
效果展示:
代码展示:
<radialGradient id="gradient-0" gradientUnits="userSpaceOnUse" cx="-107.308" cy="104.329" r="59.181" gradientTransform="matrix(0.261752, 0.411262, -0.686293, 0.596934, 160.094667, 49.38985)">
<stop offset="0" style="stop-color: rgb(255, 0, 0);"/>
<stop offset="1" style="stop-color: rgb(141, 41, 41);"/>
</radialGradient>
var svg = document.getElementById('svg');
var animation0 = document.getElementById('animate0');
svg.addEventListener('mouseenter', function(){ animation0.beginElement(); });
var animation1 = document.getElementById('animate1');
svg.addEventListener('mouseenter', function(){ animation1.beginElement(); });
var animation2 = document.getElementById('animate2');
svg.addEventListener('mouseenter', function(){ animation2.beginElement(); });
var animation3 = document.getElementById('animate3');
svg.addEventListener('mouseenter', function(){ animation3.beginElement(); });
var animation4 = document.getElementById('animate4');
svg.addEventListener('mouseenter', function(){ animation4.beginElement(); });
var animation5 = document.getElementById('animate5');
svg.addEventListener('mouseenter', function(){ animation5.beginElement(); });
var animation6 = document.getElementById('animate6');
svg.addEventListener('mouseenter', function(){ animation6.beginElement(); });
var animation7 = document.getElementById('animate7');
svg.addEventListener('mouseenter', function(){ animation7.beginElement(); });
var animation8 = document.getElementById('animate8');
svg.addEventListener('mouseenter', function(){ animation8.beginElement(); });
var animation9 = document.getElementById('animate9');
svg.addEventListener('mouseenter', function(){ animation9.beginElement(); });
var animation10 = document.getElementById('animate10');
svg.addEventListener('mouseenter', function(){ animation10.beginElement(); });
var animation11 = document.getElementById('animate11');
svg.addEventListener('mouseenter', function(){ animation11.beginElement(); });
var animation12 = document.getElementById('animate12');
svg.addEventListener('mouseenter', function(){ animation12.beginElement(); });
var animation13 = document.getElementById('animate13');
svg.addEventListener('mouseenter', function(){ animation13.beginElement(); });
var animation14 = document.getElementById('animate14');
svg.addEventListener('mouseenter', function(){ animation14.beginElement(); });
3d旋转相册
效果展示:
代码展示:
<div class="hovertreeinfo">
<h2></h2>
</div>
<!-- 仅自动播放音乐 -->
<!--<audio loop src="img/qianyuqianxun.mp3" id="audio" autoplay preload="auto">该浏览器不支持audio属性</audio>-->
<audio loop src="img\qianyuqianxun.mp3" id="audio" controls autoplay preload="auto">该浏览器不支持audio属性</audio>
<script type="text/javascript">
//--创建页面监听，等待微信端页面加载完毕 触发音频播放
document.addEventListener('DOMContentLoaded', function () {
function audioAutoPlay() {
var audio = document.getElementById('audio');
audio.play();
document.addEventListener("WeixinJSBridgeReady", function () {
audio.play();
}, false);
}
audioAutoPlay();
});
//--创建触摸监听，当浏览器打开页面时，触摸屏幕触发事件，进行音频播放
document.addEventListener('touchstart', function () {
function audioAutoPlay() {
var audio = document.getElementById('audio');
audio.play();
}
audioAutoPlay();
});
</script>
<!--/*外层最大容器*/-->
<div class="wrap">
<!-- /*包裹所有元素的容器*/-->
<div class="cube">
<!--前面图片 -->
<div class="out_front">
<img src="img/img01.jpg " class="pic" />
</div>
<!--后面图片 -->
<div class="out_back">
<img src="img/img02.jpg" class="pic"/>
</div>
<!--左图片 -->
<div class="out_left">
<img src="img/img03.jpg" class="pic" />
</div>
<div class="out_right">
<img src="img/img04.jpg" class="pic" />
</div>
<div class="out_top">
<img src="img/img05.jpg" class="pic" />
</div>
<div class="out_bottom">
<img src="img/img06.jpg" class="pic" />
</div>
<!--小正方体 -->
<span class="in_front">
<img src="img/img07.jpg" class="in_pic" />
</span>
<span class="in_back">
<img src="img/img08.jpg" class="in_pic" />
</span>
<span class="in_left">
<img src="img/img09.jpg" class="in_pic" />
</span>
<span class="in_right">
<img src="img/img10.jpg" class="in_pic" />
</span>
<span class="in_top">
<img src="img/img11.jpg" class="in_pic" />
</span>
<span class="in_bottom">
<img src="img/img12.jpg" class="in_pic" />
</span>
</div>
</div>
点击爱心散开动画告白特效
效果展示:
代码展示:
<svg height="320" width="320" class="like" onclick="document.body.classList.toggle('liked')">
<path class="path" d="M 160 145 c 15 -90 170 -20 0 90 m 0 -90 c -15 -90 -170 -20 0 90" fill="white"> <!-- 80 by 70 -->
</svg>
<!-- DECORATIONS (quite a lot of them) -->
<div class="dot dot-1"></div>
<div class="dot dot-2"></div>
<div class="dot dot-3"></div>
<div class="dot dot-4"></div>
<div class="dot dot-5"></div>
<div class="dot dot-6"></div>
<div class="dot dot-7"></div>
<div class="dot dot-8"></div>
雷电打出告白文字特效
效果展示:
代码展示:
<div class="page page-thunder-to-text">
<input id="input" type="text" maxlength="24" placeholder="I love you!">
<canvas id="canvas"></canvas>
</div>
<script>
let canvas, ctx, w, h, thunder, text, particles, input;
function Thunder(options) {
options = options || {};
this.lifespan = options.lifespan || Math.round(Math.random() * 10 + 10);
this.maxlife = this.lifespan;
this.color = options.color || '#fefefe';
this.glow = options.glow || '#2323fe';
this.x = options.x || Math.random() * w;
this.y = options.y || Math.random() * h;
this.width = options.width || 2;
this.direct = options.direct || Math.random() * Math.PI * 2;
this.max = options.max || Math.round(Math.random() * 10 + 20);
this.segments = [...new Array(this.max)].map(() => {
return {
direct: this.direct + (Math.PI * Math.random() * 0.2 - 0.1),
length: Math.random() * 20 + 80,
change: Math.random() * 0.04 - 0.02
};
});
this.update = function(index, array) {
this.segments.forEach(s => { (s.direct += s.change) && Math.random() > 0.96 && (s.change *= -1) });
(this.lifespan > 0 && this.lifespan--) || this.remove(index, array);
}
this.render = function(ctx) {
if (this.lifespan <= 0) return;
ctx.beginPath();
ctx.globalAlpha = this.lifespan / this.maxlife;
ctx.strokeStyle = this.color;
ctx.lineWidth = this.width;
ctx.shadowBlur = 32;
ctx.shadowColor = this.glow;
ctx.moveTo(this.x, this.y);
let prev = { x: this.x, y: this.y };
this.segments.forEach(s => {
const x = prev.x + Math.cos(s.direct) * s.length;
const y = prev.y + Math.sin(s.direct) * s.length;
prev = { x: x, y: y };
ctx.lineTo(x, y);
});
ctx.stroke();
ctx.closePath();
ctx.shadowBlur = 0;
const strength = Math.random() * 80 + 40;
const light = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, strength);
light.addColorStop(0, 'rgba(250, 200, 50, 0.6)');
light.addColorStop(0.1, 'rgba(250, 200, 50, 0.2)');
light.addColorStop(0.4, 'rgba(250, 200, 50, 0.06)');
light.addColorStop(0.65, 'rgba(250, 200, 50, 0.01)');
light.addColorStop(0.8, 'rgba(250, 200, 50, 0)');
ctx.beginPath();
ctx.fillStyle = light;
ctx.arc(this.x, this.y, strength, 0, Math.PI * 2);
ctx.fill();
ctx.closePath();
}
this.remove = function(index, array) {
array.splice(index, 1);
}
}
粒子组合告白文字特效
效果展示:
代码展示:
;(function(main) {
var args = {};
window.onload = function() {
main(args);
};
})(function(args) {
'use strict';
var Box = function(x, y, w, h, s) {
this.x = x;
this.y = y;
this.w = w;
this.h = h;
this.s = s;
this.a = Math.random() * Math.PI * 2;
this.hue = Math.random() * 360;
};
Box.prototype = {
constructor: Box,
update: function() {
this.a += Math.random() * 0.5 - 0.25;
this.x += Math.cos(this.a) * this.s;
this.y += Math.sin(this.a) * this.s;
this.hue += 5;
if(this.x > WIDTH) this.x = 0;
else if(this.x < 0) this.x = WIDTH;
if(this.y > HEIGHT) this.y = 0;
else if(this.y < 0) this.y = HEIGHT;
},
render: function(ctx) {
ctx.save();
ctx.fillStyle = 'hsla(' + this.hue + ', 100%, 50%, 1)';
ctx.translate(this.x, this.y);
ctx.rotate(this.a);
ctx.fillRect(-this.w, -this.h / 2, this.w, this.h);
ctx.restore();
}
};
var Circle = function(x, y, tx, ty, r) {
this.x = x;
this.y = y;
this.ox = x;
this.oy = y;
this.tx = tx;
this.ty = ty;
this.lx = x;
this.ly = y;
this.r = r;
this.br = r;
this.a = Math.random() * Math.PI * 2;
this.sx = Math.random() * 0.5;
this.sy = Math.random() * 0.5;
this.o = Math.random() * 1;
this.delay = Math.random() * 200;
this.delayCtr = 0;
this.hue = Math.random() * 360;
};
小熊拉手CSS3情人节动画表白特效
效果展示:
代码展示:
<div class="stage"> <div class="couple"> <div class="heart floating"></div> <div class="bear he"> <div class="ear--1"></div> <div class="ear--2"></div> <div class="arm--1"></div> <div class="arm--2"></div> <div class="hand"></div> <div class="body"></div> <div class="muzzle"></div> <div class="eye--1"></div> <div class="eye--2"></div> <div class="nose"></div> <div class="mouth"></div> <div class="leg--1"></div> <div class="leg--2"></div> </div> <div class="bear she"> <div class="ear--1"></div> <div class="ear--2"></div> <div class="arm--1"></div> <div class="arm--2"></div> <div class="body"></div> <div class="muzzle"></div> <div class="eye--1"></div> <div class="eye--2"></div> <div class="nose"></div> <div class="mouth"></div> <div class="leg--1"></div> <div class="leg--2"></div> </div> </div> </div>
到此这篇关于七个基于JavaScript实现的情人节表白特效的文章就介绍到这了,更多相关JavaScript表白特效内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
javascript+HTML5的canvas实现七夕情人节3D玫瑰花效果代码
本文实例讲述了javascript+HTML5的canvas实现七夕情人节3D玫瑰花效果.分享给大家供大家参考.具体如下: 下面的玫瑰绘制用到了HTML 5的canvas,所以你的浏览器需要支持HTML 5.个人还是比较推荐chrome,这个效果在Firefox下也会稍卡. 效果图: 演示地址:http://demo.jb51.net/js/2015/js-flower-canvas.html 具体代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
-
JS实现520 表白简单代码
这两天不知道咋了,迷迷糊糊的,突然知道今天是520的我,急急忙忙赶出个程序(新手,代码有点乱),发出来大家一起研究下(参考百度的). <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>520</title> <style> html, body{padding:0px; margin:0px; background:#222; fon
-
情人节单身的我是如何在敲完代码之后收到12束玫瑰的(javascript)
废话不多说了,先给大家展示下效果图: 总结,本篇是要介绍的一个刷星星(闪存里面的)的脚本,用于挂机刷星星.在七夕就是刷的玫瑰,所以绝不是标题党,就让我带大家一起刷星星吧! 一. 发送消息 看请求并自己模拟发送 $.post("http://ing.cnblogs.com/ajax/ing/Publish", //地址 JSON.stringify({ "content": content, "publicFlag": 1 }), //参数,jso
-
情人节之礼 js项链效果
第一个项链实现原理将img的src属性设为同一张图片效果图: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <title>项链</title> <style type="text/css"> *{margin: 0px;padding: 0px;} .cont{width: 1100px;overflow: hidden;margin: 0 auto;} .div1, .div7
-
js实现七夕表白弹幕效果 jQuery实现弹幕技术
本文实例为大家分享了js与jQuery技术实现表白弹幕,供大家参考,具体内容如下 js七夕表白弹幕效果简单版效果: 关键代码: <script> var si; function tangmu(){ clearInterval(si); var text = document.getElementById("text"); var tangmu = document.getElementById("tangmu"); var textStyle=&quo
-
七个基于JavaScript实现的情人节表白特效
目录 七夕情人节送花动画告白特效 玫瑰花盛开动画告白特效 3d旋转相册 点击爱心散开动画告白特效 雷电打出告白文字特效 粒子组合告白文字特效 小熊拉手CSS3情人节动画表白特效 七夕情人节送花动画告白特效 效果展示 代码展示: <div id='content'> <ul class='content-wrap'> <!-- 第一副画面 --> <li> <!-- 背景图 --> <div class="a_background&
-
基于javascript实现tab选项卡切换特效调试笔记
本文实例为大家分析了javascript实现tab选项卡切换的调试笔记,供大家参考,具体内容如下 制作导航栏,点击导航栏元素时下面的内容会产生相应的变化,并且该元素显示特殊样式. js源代码: //导航栏单击变换内容 function tabSwitch(_this,num) { var tag = document.getElementById("nav9"); var number = tag.getElementsByTagName("a"); //获取导航栏
-
基于JavaScript制作霓虹灯文字 代码 特效
示例一: 运行效果截图如下: 具体代码如下: http-equiv="Content-Type" content="text/html; charset=gb2312"> 霓虹灯 var Tname="欢迎您的到来!"; var Tlen=Tname.length; document.write(""+Tname+""); var col=new Array("#FFCC00",&
-
基于javascript实现按圆形排列DIV元素(一)
效果图: 一.分析图: 绿色边框内:外层的DIV元素,相对定位; 白色圆形框:辅助分析的想象形状; 白点:为白色圆形的圆心点,中心点,点o; 圆心角:角NOG; 黄色:需要按圆形排列的,绝对定位的DIV元素; 红色点:为每个黄色DIV的坐标点;即绝对定位时的元素,left值 和 top值 ,设置的点; 二.涉及到的概念定义: 2.1.弧度:弧度是角的度量单位. (红色部分为弧长,角A为弧长对应的圆心角) 弧长等于半径的弧,其所对的圆心角为1弧度.(即两条射线从圆心向圆周射出,形成一个夹角和夹角正
-
基于JavaScript实现下拉列表左右移动代码
废话不多说,先给大家展示一下效果图,如果大家感觉不错,请参考实现代码. 效果图如下所示: 代码如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"
-
基于JavaScript实现网红太空人表盘的完整代码
一.效果展示 用javascript写的一个太空人表盘. http://xiazai.jb51.net/202103/yuanma/Watch_jb51.rar 二.源代码 html代码 <html> <head> <title>太空人表盘</title> <meta charset="UTF-8"> <link href="./assets/css/style.css" rel="exte
-
基于JavaScript实现表单密码的隐藏和显示出来
为了网站的安全性,很多朋友都把密码设的比较复杂,但是如何密码不能明显示,不知道输的是对是错,为了安全起见可以把密码显示的,那么基于js代码如何实现的呢? 当用户输入时密码显示为圆点或者星号, 为了确保用户输入的正确, 用户可以点击让密码显示的按钮. 直接就先看节目效果. 界面结构, 一个外层的pass-box, 然后内层加入input 和 一个 i 标签, 且给他们加入相应的class名称. <div class="pass-box"> <input type=&qu
-
基于JavaScript表单脚本(详解)
什么是表单? 一个表单有三个基本组成部分: 表单标签:这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法. 表单域:包含了文本框.密码框.隐藏域.多行文本框.复选框.单选框.下拉选择框和文件上传框等. 表单按钮:包括提交按钮.复位按钮和一般按钮:用于将数据传送到服务器上的CGI脚本或者取消输入,还可以用表单按钮来控制其他定义了处理脚本的处理工作. JavaScript与表单间的关系:JS最初的应用就是用于分担服务器处理表单的责任,打破依赖服务器的局面,尽管目前web和jav
-
基于JavaScript实现动态创建表格和增加表格行数
在工作,项目需求中,有时候表格的行数不能够满足我们的需求,这时需要我们动态的增加表格的行数,下面小编通过一段代码实例给大家介绍js创建表格和增加表格的行数的方法,并且还实现了隔行变色功能.对此感兴趣的朋友可以参考一下代码: js代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>动态操作表格</title> </head>
-
基于JavaScript将表单序列化类型的数据转化成对象的处理（允许对象中包含对象）
表单序列化类型的数据是指url传递的数据的格式,形如"key=value&key=value&key=value"这样的key/value的键值对.一般来说使用jQuery的$.fn.serialize函数能达到这样的效果.如何将这样的格式转化为对象? 我们知道使用jQuery的$.fn.serializeArray函数得到的是一个如下结构的对象 [ { name: "startTime" value: "2015-12-02 00:00: