扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >七个基于JavaScript实现的情人节表白特效
  • 706

0
分享到

七个基于JavaScript实现的情人节表白特效

2024-04-02 19:04:59 706人浏览 八月长安
摘要

目录七夕情人节送花动画告白特效玫瑰花盛开动画告白特效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表白特效内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

--结束END--

本文标题: 七个基于JavaScript实现的情人节表白特效

本文链接: https://lsjlt.com/news/163560.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 七个基于JavaScript实现的情人节表白特效
    目录七夕情人节送花动画告白特效玫瑰花盛开动画告白特效3d旋转相册点击爱心散开动画告白特效雷电打出告白文字特效粒子组合告白文字特效小熊拉手CSS3情人节动画表白特效七夕情人节送花动画告...
    99+
    2024-04-02
  • 怎么用JavaScript实现情人节表白特效
    本篇内容主要讲解“怎么用JavaScript实现情人节表白特效”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“怎么用JavaScript实现情人节表白特效”吧!七夕情人节送花动画告白特效效果展示代...
    99+
    2023-06-28
  • 基于JavaScript实现动态雨滴特效
    目录演示技术栈源码设置画布js部分演示 技术栈 介绍一下画布吧： HTML5 标签用于绘制图像（通过脚本，通常是 JavaScript）。 不过， 元素本身并没有绘制能力（它仅仅是...
    99+
    2024-04-02
  • 基于JavaScript实现新年贺卡特效
    目录动图演示主要代码css样式Javascirpt动图演示 一款超级炫酷的2022新年快乐html网页特效，霓虹的城市夜景和绚烂的烟花很是特别，该html页面还有交互效果，点击鼠标就...
    99+
    2024-04-02
  • 基于JavaScript实现雪花许愿墙特效
    目录导语效果预览功能要点介绍代码部分雪花逻辑部分（index.js）逻辑文件 （script.js）样式部分（style.css）骨架部分（html）效果演示导语 歌谣 歌谣 新的一...
    99+
    2024-04-02
  • 如何实现基于css3的列表toggle特效
    这篇文章主要讲解了“如何实现基于css3的列表toggle特效”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“如何实现基于css3的列表toggle特效”吧！...
    99+
    2024-04-02
  • 基于JavaScript如何实现动态雨滴特效
    今天小编给大家分享一下基于JavaScript如何实现动态雨滴特效的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。演示技术栈介...
    99+
    2023-07-02
  • 怎么用JS代码实现情人节爱心满屏飘落特效
    今天小编给大家分享一下怎么用JS代码实现情人节爱心满屏飘落特效的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们...
    99+
    2024-04-02
  • 如何基于JavaScript实现网红太空人表盘
    这篇文章主要介绍如何基于JavaScript实现网红太空人表盘，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！一、效果展示用javascript写的一个太空人表盘。http://xiazai.jb51.net/2021...
    99+
    2023-06-14
  • 基于JavaScript实现网红太空人表盘的完整代码
    一、效果展示 用javascript写的一个太空人表盘。 http://xiazai.jb51.net/202103/yuanma/Watch_jb51.rar  二...
    99+
    2024-04-02
  • 基于Android开发支持表情的实现详解
    最近项目需要支持表情，表情的添加和解析实现基本上是参照Android自身的SmileyParser，具体就不多讲了，直接贴上代码： 代码如下:public class Smil...
    99+
    2022-06-06
    android开发 Android
  • 基于Matlab实现水波倒影特效的制作
    目录1.使用效果2.图像翻转及白化3.波纹图像构造4.扭曲置换5.图像拼接6.完整代码1.使用效果 2.图像翻转及白化 导入图像： % 图片导入 oriPic=imread('...
    99+
    2024-04-02
  • 基于JS实现十种酷炫的网页特效
    目录1、鼠标点击弹出爱心2、鼠标点击弹出文字3、鼠标点击弹出烟花波纹4、鼠标小星星拖尾跟随5、鼠标粒子随心拖尾跟随6、鼠标笑脸跟随+仙女棒+泡泡+雪花+点击烟花效果（自由组合）7、樱...
    99+
    2024-04-02
  • 基于JS怎么实现酷炫的网页特效
    这篇文章主要介绍了基于JS怎么实现酷炫的网页特效的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇基于JS怎么实现酷炫的网页特效文章都会有所收获，下面我们一起来看看吧。1、鼠标点击弹出爱心代码<!DOCTYP...
    99+
    2023-06-30
  • 十个利用JavaScript实现的爱心动画特效
    目录3d爱心跳动特效效果展示代码展示线条合成的爱心动画特效效果展示代码展示520爱心背景表白网页动画特效效果展示代码展示爱心签到墙效果展示代码展示粉色的情人节爱心飞出ui特效效果展示...
    99+
    2024-04-02
  • 基于Redis的List实现特价商品列表功能
    目录 1、场景分析2、分析3 、具体实现3.1 ProductListService类3.2 商品的数据接口的定义和展示及分页3.3 定时任务4、解决商品列表存在的缓存击穿...
    99+
    2024-04-02
  • 基于JS实现动态跟随特效的示例代码
    目录演示技术栈源码css部分js部分演示 技术栈 这次用到了关于css的一些功能，和jQuery。 CSS3中添加的新属性animation是用来为元素实现动画效果的，但是anim...
    99+
    2024-04-02
  • javascript中怎么实现一个基于DOM的模板引擎
    本篇内容主要讲解“javascript中怎么实现一个基于DOM的模板引擎”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“javascript中怎么实现一个基于DO...
    99+
    2024-04-02
  • Java个人博客系统--基于Springboot的设计与实现+测试
    目录 一、项目概述 应用技术 接口实现：  数据库定义： 数据库建表： 博客表数据库相关操作： 添加项⽬公共模块 加密MD5 页面展示：http://121.41.168.121:8080/blog_login.html  项目源码：h...
    99+
    2023-09-04
    java spring boot 开发语言
  • 基于JS实现手持弹幕功能+文字抖动特效的方法
    这篇文章主要介绍了基于JS实现手持弹幕功能+文字抖动特效的方法，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。前段时间抖音上有个抖动弹幕挺火的，于是决定仿写一个，话不多说，先看...
    99+
    2023-06-14
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作