经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » JavaScript » 查看文章
七个基于JavaScript实现的情人节表白特效
来源:jb51  时间:2022/1/24 12:39:33  对本文有异议

七夕情人节送花动画告白特效

效果展示

代码展示:

  1. <div id='content'>
  2. <ul class='content-wrap'>
  3. <!-- 第一副画面 -->
  4. <li>
  5. <!-- 背景图 -->
  6. <div class="a_background">
  7. <div class="a_background_top"></div>
  8. <div class="a_background_middle"></div>
  9. <div class="a_background_botton"></div>
  10. </div>
  11. <!-- 云 -->
  12. <div class="cloudArea">
  13. <div class="cloud cloud1"></div>
  14. <div class="cloud cloud2"></div>
  15. </div>
  16. <!-- 太阳 -->
  17. <div id="sun"></div>
  18. </li>
  19. <!-- 第二副画面 -->
  20. <li>
  21. <!-- 背景图 -->
  22. <div class="b_background"></div>
  23. <div class="b_background_preload"></div>
  24. <!-- 商店 -->
  25. <div class="shop">
  26. <div class="door">
  27. <div class="door-left"></div>
  28. <div class="door-right"></div>
  29. </div>
  30. <!-- 灯 -->
  31. <div class="lamp"></div>
  32. </div>
  33. <!-- 鸟 -->
  34. <div class="bird"></div>
  35. </li>
  36. <!-- 第三副画面 -->
  37. <li>
  38. <!-- 背景图 -->
  39. <div class="c_background">
  40. <div class="c_background_top"></div>
  41. <div class="c_background_middle"></div>
  42. <div class="c_background_botton"></div>
  43. </div>
  44. <!-- 小女孩 -->
  45. <div class="girl"></div>
  46. <div class="bridge-bottom">
  47. <div class="water">
  48. <div id="water1" class="water_1"></div>
  49. <div id="water2" class="water_2"></div>
  50. <div id="water3" class="water_3"></div>
  51. <div id="water4" class="water_4"></div>
  52. </div>
  53. </div>
  54. <!-- 星星 -->
  55. <ul class="stars">
  56. <li class="stars1"></li>
  57. <li class="stars2"></li>
  58. <li class="stars3"></li>
  59. <li class="stars4"></li>
  60. <li class="stars5"></li>
  61. <li class="stars6"></li>
  62. </ul>
  63. <div class="logo">祝天下有情人终成眷属</div>
  64. </li>
  65. </ul>
  66. <!-- 雪花 -->
  67. <div id="snowflake"></div>
  68. <!-- 小男孩 -->
  69. <div id="boy" class="charector"></div>
  70. </div>

玫瑰花盛开动画告白特效

效果展示:

代码展示:

  1. <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)">
  2. <stop offset="0" style="stop-color: rgb(255, 0, 0);"/>
  3. <stop offset="1" style="stop-color: rgb(141, 41, 41);"/>
  4. </radialGradient>
  1. var svg = document.getElementById('svg');
  2.  
  3. var animation0 = document.getElementById('animate0');?
  4. svg.addEventListener('mouseenter', function(){ animation0.beginElement(); });
  5. var animation1 = document.getElementById('animate1');?
  6. svg.addEventListener('mouseenter', function(){ animation1.beginElement(); });
  7. var animation2 = document.getElementById('animate2');?
  8. svg.addEventListener('mouseenter', function(){ animation2.beginElement(); });
  9. var animation3 = document.getElementById('animate3');?
  10. svg.addEventListener('mouseenter', function(){ animation3.beginElement(); });
  11. var animation4 = document.getElementById('animate4');?
  12. svg.addEventListener('mouseenter', function(){ animation4.beginElement(); });
  13. var animation5 = document.getElementById('animate5');?
  14. svg.addEventListener('mouseenter', function(){ animation5.beginElement(); });
  15. var animation6 = document.getElementById('animate6');?
  16. svg.addEventListener('mouseenter', function(){ animation6.beginElement(); });
  17. var animation7 = document.getElementById('animate7');?
  18. svg.addEventListener('mouseenter', function(){ animation7.beginElement(); });
  19. var animation8 = document.getElementById('animate8');?
  20. svg.addEventListener('mouseenter', function(){ animation8.beginElement(); });
  21. var animation9 = document.getElementById('animate9');?
  22. svg.addEventListener('mouseenter', function(){ animation9.beginElement(); });
  23. var animation10 = document.getElementById('animate10');?
  24. svg.addEventListener('mouseenter', function(){ animation10.beginElement(); });
  25. var animation11 = document.getElementById('animate11');?
  26. svg.addEventListener('mouseenter', function(){ animation11.beginElement(); });
  27. var animation12 = document.getElementById('animate12');?
  28. svg.addEventListener('mouseenter', function(){ animation12.beginElement(); });
  29. var animation13 = document.getElementById('animate13');?
  30. svg.addEventListener('mouseenter', function(){ animation13.beginElement(); });
  31. var animation14 = document.getElementById('animate14');?
  32. svg.addEventListener('mouseenter', function(){ animation14.beginElement(); });

3d旋转相册

效果展示:

代码展示:

  1. <div class="hovertreeinfo">
  2. ?? ??? ??? ?<h2></h2>
  3. ?? ??? ?</div>
  4. ?? ??? ?<!-- 仅自动播放音乐 -->
  5. ?? ??? ?<!--<audio loop src="img/qianyuqianxun.mp3" id="audio" autoplay preload="auto">该浏览器不支持audio属性</audio>-->
  6. ?? ??? ?<audio loop src="img\qianyuqianxun.mp3" id="audio" controls autoplay preload="auto">该浏览器不支持audio属性</audio>
  7. ?? ??? ?<script type="text/javascript">
  8. ?? ??? ?//--创建页面监听,等待微信端页面加载完毕 触发音频播放
  9. ?? ??? ?document.addEventListener('DOMContentLoaded', function () {
  10. ?? ??? ??? ?function audioAutoPlay() {
  11. ?? ??? ??? ??? ?var audio = document.getElementById('audio');
  12. ?? ??? ??? ??? ??? ?audio.play();
  13. ?? ??? ??? ??? ?document.addEventListener("WeixinJSBridgeReady", function () {
  14. ?? ??? ??? ??? ??? ?audio.play();
  15. ?? ??? ??? ??? ?}, false);
  16. ?? ??? ??? ?}
  17. ?? ??? ??? ?audioAutoPlay();
  18. ?? ??? ?});
  19. ?? ??? ?//--创建触摸监听,当浏览器打开页面时,触摸屏幕触发事件,进行音频播放
  20. ?? ??? ?document.addEventListener('touchstart', function () {
  21. ?? ??? ??? ?function audioAutoPlay() {
  22. ?? ??? ??? ??? ?var audio = document.getElementById('audio');
  23. ?? ??? ??? ??? ??? ?audio.play();
  24. ?? ??? ??? ?}
  25. ?? ??? ??? ?audioAutoPlay();
  26. ?? ??? ?});
  27. ?? ??? ?</script>
  28.  
  29. ?? ??? ?<!--/*外层最大容器*/-->
  30. ?? ??? ?<div class="wrap">
  31. ?? ??? ??? ?<!--?? ?/*包裹所有元素的容器*/-->
  32. ?? ??? ??? ?<div class="cube">
  33. ?? ??? ??? ??? ?<!--前面图片 -->
  34. ?? ??? ??? ??? ?<div class="out_front">
  35. ?? ??? ??? ??? ??? ?<img src="img/img01.jpg " class="pic" />
  36. ?? ??? ??? ??? ?</div>
  37. ?? ??? ??? ??? ?<!--后面图片 -->
  38. ?? ??? ??? ??? ?<div class="out_back">
  39. ?? ??? ??? ??? ??? ?<img src="img/img02.jpg" class="pic"/>
  40. ?? ??? ??? ??? ?</div>
  41. ?? ??? ??? ??? ?<!--左图片 -->
  42. ?? ??? ??? ??? ?<div class="out_left">
  43. ?? ??? ??? ??? ??? ?<img src="img/img03.jpg" class="pic" />
  44. ?? ??? ??? ??? ?</div>
  45. ?? ??? ??? ??? ?<div class="out_right">
  46. ?? ??? ??? ??? ??? ?<img src="img/img04.jpg" class="pic" />
  47. ?? ??? ??? ??? ?</div>
  48. ?? ??? ??? ??? ?<div class="out_top">
  49. ?? ??? ??? ??? ??? ?<img src="img/img05.jpg" class="pic" />
  50. ?? ??? ??? ??? ?</div>
  51. ?? ??? ??? ??? ?<div class="out_bottom">
  52. ?? ??? ??? ??? ??? ?<img src="img/img06.jpg" class="pic" />
  53. ?? ??? ??? ??? ?</div>
  54. ?? ??? ??? ??? ?<!--小正方体 -->
  55. ?? ??? ??? ??? ?<span class="in_front">
  56. ?? ??? ??? ??? ??? ?<img src="img/img07.jpg" class="in_pic" />
  57. ?? ??? ??? ??? ?</span>
  58. ?? ??? ??? ??? ?<span class="in_back">
  59. ?? ??? ??? ??? ??? ?<img src="img/img08.jpg" class="in_pic" />
  60. ?? ??? ??? ??? ?</span>
  61. ?? ??? ??? ??? ?<span class="in_left">
  62. ?? ??? ??? ??? ??? ?<img src="img/img09.jpg" class="in_pic" />
  63. ?? ??? ??? ??? ?</span>
  64. ?? ??? ??? ??? ?<span class="in_right">
  65. ?? ??? ??? ??? ??? ?<img src="img/img10.jpg" class="in_pic" />
  66. ?? ??? ??? ??? ?</span>
  67. ?? ??? ??? ??? ?<span class="in_top">
  68. ?? ??? ??? ??? ??? ?<img src="img/img11.jpg" class="in_pic" />
  69. ?? ??? ??? ??? ?</span>
  70. ?? ??? ??? ??? ?<span class="in_bottom">
  71. ?? ??? ??? ??? ??? ?<img src="img/img12.jpg" class="in_pic" />
  72. ?? ??? ??? ??? ?</span>
  73. ?? ??? ??? ?</div>
  74. ?? ??? ?</div>

点击爱心散开动画告白特效

效果展示:

代码展示:

  1. <svg height="320" width="320" class="like" onclick="document.body.classList.toggle('liked')">
  2. ?? ?<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 -->
  3. </svg>
  4.  
  5. <!-- DECORATIONS (quite a lot of them) -->
  6. <div class="dot dot-1"></div>
  7. <div class="dot dot-2"></div>
  8. <div class="dot dot-3"></div>
  9. <div class="dot dot-4"></div>
  10. <div class="dot dot-5"></div>
  11. <div class="dot dot-6"></div>
  12. <div class="dot dot-7"></div>
  13. <div class="dot dot-8"></div>

雷电打出告白文字特效

效果展示:

代码展示:

  1. <div class="page page-thunder-to-text">
  2. ?? ?<input id="input" type="text" maxlength="24" placeholder="I love you!">
  3. ?? ?<canvas id="canvas"></canvas>
  4. </div>
  5.  
  6. <script>
  7. let canvas, ctx, w, h, thunder, text, particles, input;
  8.  
  9. function Thunder(options) {
  10. ? ? options = options || {};
  11. ? ? this.lifespan = options.lifespan || Math.round(Math.random() * 10 + 10);
  12. ? ? this.maxlife = this.lifespan;
  13. ? ? this.color = options.color || '#fefefe';
  14. ? ? this.glow = options.glow || '#2323fe';
  15. ? ? this.x = options.x || Math.random() * w;
  16. ? ? this.y = options.y || Math.random() * h;
  17. ? ? this.width = options.width || 2;
  18. ? ? this.direct = options.direct || Math.random() * Math.PI * 2;
  19. ? ? this.max = options.max || Math.round(Math.random() * 10 + 20);
  20. ? ? this.segments = [...new Array(this.max)].map(() => {
  21. ? ? ? ? return {
  22. ? ? ? ? ? ? direct: this.direct + (Math.PI * Math.random() * 0.2 - 0.1),
  23. ? ? ? ? ? ? length: Math.random() * 20 + 80,
  24. ? ? ? ? ? ? change: Math.random() * 0.04 - 0.02
  25. ? ? ? ? };
  26. ? ? });
  27.  
  28. ? ? this.update = function(index, array) {
  29. ? ? ? ? this.segments.forEach(s => { (s.direct += s.change) && Math.random() > 0.96 && (s.change *= -1) });
  30. ? ? ? ? (this.lifespan > 0 && this.lifespan--) || this.remove(index, array);
  31. ? ? }
  32.  
  33. ? ? this.render = function(ctx) {
  34. ? ? ? ? if (this.lifespan <= 0) return;
  35. ? ? ? ? ctx.beginPath();
  36. ? ? ? ? ctx.globalAlpha = this.lifespan / this.maxlife;
  37. ? ? ? ? ctx.strokeStyle = this.color;
  38. ? ? ? ? ctx.lineWidth = this.width;
  39. ? ? ? ? ctx.shadowBlur = 32;
  40. ? ? ? ? ctx.shadowColor = this.glow;
  41. ? ? ? ? ctx.moveTo(this.x, this.y);
  42. ? ? ? ? let prev = { x: this.x, y: this.y };
  43. ? ? ? ? this.segments.forEach(s => {
  44. ? ? ? ? ? ? const x = prev.x + Math.cos(s.direct) * s.length;
  45. ? ? ? ? ? ? const y = prev.y + Math.sin(s.direct) * s.length;
  46. ? ? ? ? ? ? prev = { x: x, y: y };
  47. ? ? ? ? ? ? ctx.lineTo(x, y);
  48. ? ? ? ? });
  49. ? ? ? ? ctx.stroke();
  50. ? ? ? ? ctx.closePath();
  51. ? ? ? ? ctx.shadowBlur = 0;
  52. ? ? ? ? const strength = Math.random() * 80 + 40;
  53. ? ? ? ? const light = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, strength);
  54. ? ? ? ? light.addColorStop(0, 'rgba(250, 200, 50, 0.6)');
  55. ? ? ? ? light.addColorStop(0.1, 'rgba(250, 200, 50, 0.2)');
  56. ? ? ? ? light.addColorStop(0.4, 'rgba(250, 200, 50, 0.06)');
  57. ? ? ? ? light.addColorStop(0.65, 'rgba(250, 200, 50, 0.01)');
  58. ? ? ? ? light.addColorStop(0.8, 'rgba(250, 200, 50, 0)');
  59. ? ? ? ? ctx.beginPath();
  60. ? ? ? ? ctx.fillStyle = light;
  61. ? ? ? ? ctx.arc(this.x, this.y, strength, 0, Math.PI * 2);
  62. ? ? ? ? ctx.fill();
  63. ? ? ? ? ctx.closePath();
  64. ? ? }
  65.  
  66. ? ? this.remove = function(index, array) {
  67. ? ? ? ? array.splice(index, 1);
  68. ? ? }
  69. }

粒子组合告白文字特效

效果展示:

代码展示:

  1. ;(function(main) {
  2. ?? ?var args = {};
  3. ?? ?window.onload = function() {
  4. ?? ??? ?main(args);
  5. ?? ?};
  6. })(function(args) {
  7.  
  8. ?? ?'use strict';
  9.  
  10. ?? ?var Box = function(x, y, w, h, s) {
  11. ?? ??? ?this.x = x;
  12. ?? ??? ?this.y = y;
  13. ?? ??? ?this.w = w;
  14. ?? ??? ?this.h = h;
  15. ?? ??? ?this.s = s;
  16. ?? ??? ?this.a = Math.random() * Math.PI * 2;
  17. ?? ??? ?this.hue = Math.random() * 360;
  18. ?? ?};
  19.  
  20. ?? ?Box.prototype = {
  21. ?? ??? ?constructor: Box,
  22. ?? ??? ?update: function() {
  23. ?? ??? ??? ?this.a += Math.random() * 0.5 - 0.25;
  24. ?? ??? ??? ?this.x += Math.cos(this.a) * this.s;
  25. ?? ??? ??? ?this.y += Math.sin(this.a) * this.s;
  26. ?? ??? ??? ?this.hue += 5;
  27. ?? ??? ??? ?if(this.x > WIDTH) this.x = 0;
  28. ?? ??? ??? ?else if(this.x < 0) this.x = WIDTH;
  29. ?? ??? ??? ?if(this.y > HEIGHT) this.y = 0;
  30. ?? ??? ??? ?else if(this.y < 0) this.y = HEIGHT;
  31. ?? ??? ?},
  32. ?? ??? ?render: function(ctx) {
  33. ?? ??? ??? ?ctx.save();
  34. ?? ??? ??? ?ctx.fillStyle = 'hsla(' + this.hue + ', 100%, 50%, 1)';
  35. ?? ??? ??? ?ctx.translate(this.x, this.y);
  36. ?? ??? ??? ?ctx.rotate(this.a);
  37. ?? ??? ??? ?ctx.fillRect(-this.w, -this.h / 2, this.w, this.h);
  38. ?? ??? ??? ?ctx.restore();
  39. ?? ??? ?}
  40. ?? ?};
  41.  
  42. ?? ?var Circle = function(x, y, tx, ty, r) {
  43. ?? ??? ?this.x = x;
  44. ?? ??? ?this.y = y;
  45. ?? ??? ?this.ox = x;
  46. ?? ??? ?this.oy = y;
  47. ?? ??? ?this.tx = tx;
  48. ?? ??? ?this.ty = ty;
  49. ?? ??? ?this.lx = x;
  50. ?? ??? ?this.ly = y;
  51. ?? ??? ?this.r = r;
  52. ?? ??? ?this.br = r;
  53. ?? ??? ?this.a = Math.random() * Math.PI * 2;
  54. ?? ??? ?this.sx = Math.random() * 0.5;
  55. ?? ??? ?this.sy = Math.random() * 0.5;
  56. ?? ??? ?this.o = Math.random() * 1;
  57. ?? ??? ?this.delay = Math.random() * 200;
  58. ?? ??? ?this.delayCtr = 0;
  59. ?? ??? ?this.hue = Math.random() * 360;
  60. ?? ?};

小熊拉手CSS3情人节动画表白特效

效果展示:

代码展示:

  1. <div class="stage">
  2. ? <div class="couple">
  3. ? ? <div class="heart floating"></div>
  4. ? ? <div class="bear he">
  5. ? ? ? <div class="ear--1"></div>
  6. ? ? ? <div class="ear--2"></div>
  7. ? ? ? <div class="arm--1"></div>
  8. ? ? ? <div class="arm--2"></div>
  9. ? ? ? <div class="hand"></div>
  10. ? ? ? <div class="body"></div>
  11. ? ? ? <div class="muzzle"></div>
  12. ? ? ? <div class="eye--1"></div>
  13. ? ? ? <div class="eye--2"></div>
  14. ? ? ? <div class="nose"></div>
  15. ? ? ? <div class="mouth"></div>
  16. ? ? ? <div class="leg--1"></div>
  17. ? ? ? <div class="leg--2"></div>
  18. ? ? </div>
  19. ? ? <div class="bear she">
  20. ? ? ? <div class="ear--1"></div>
  21. ? ? ? <div class="ear--2"></div>
  22. ? ? ? <div class="arm--1"></div>
  23. ? ? ? <div class="arm--2"></div>
  24. ? ? ? <div class="body"></div>
  25. ? ? ? <div class="muzzle"></div>
  26. ? ? ? <div class="eye--1"></div>
  27. ? ? ? <div class="eye--2"></div>
  28. ? ? ? <div class="nose"></div>
  29. ? ? ? <div class="mouth"></div>
  30. ? ? ? <div class="leg--1"></div>
  31. ? ? ? <div class="leg--2"></div>
  32. ? ? </div>
  33. ? </div>
  34. </div>

到此这篇关于七个基于JavaScript实现的情人节表白特效的文章就介绍到这了,更多相关JavaScript表白特效内容请搜索w3xue以前的文章或继续浏览下面的相关文章希望大家以后多多支持w3xue!

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号