七個(gè)基于JavaScript實(shí)現(xiàn)的情人節(jié)表白特效
更新時(shí)間：2022年01月24日 11:40:13 作者：白大鍋
情人節(jié)將至 程序員證明自己不是直男的時(shí)候到啦 我們也有自己的專屬代碼浪漫。本文將介紹七個(gè)利用JavaScript實(shí)現(xiàn)的情人節(jié)表白特效，需要的可以參考一下
七夕情人節(jié)送花動(dòng)畫告白特效
效果展示
代碼展示:
<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>
<!-- 太陽(yáng) -->
<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>
<!-- 鳥(niǎo) -->
<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>
玫瑰花盛開(kāi)動(dòng)畫告白特效
效果展示:
代碼展示:
<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旋轉(zhuǎn)相冊(cè)
效果展示:
代碼展示:
<div class="hovertreeinfo">
?? ??? ??? ?<h2></h2>
?? ??? ?</div>
?? ??? ?<!-- 僅自動(dòng)播放音樂(lè) -->
?? ??? ?<!--<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">
?? ??? ?//--創(chuàng)建頁(yè)面監(jiān)聽(tīng)，等待微信端頁(yè)面加載完畢 觸發(fā)音頻播放
?? ??? ?document.addEventListener('DOMContentLoaded', function () {
?? ??? ??? ?function audioAutoPlay() {
?? ??? ??? ??? ?var audio = document.getElementById('audio');
?? ??? ??? ??? ??? ?audio.play();
?? ??? ??? ??? ?document.addEventListener("WeixinJSBridgeReady", function () {
?? ??? ??? ??? ??? ?audio.play();
?? ??? ??? ??? ?}, false);
?? ??? ??? ?}
?? ??? ??? ?audioAutoPlay();
?? ??? ?});
?? ??? ?//--創(chuàng)建觸摸監(jiān)聽(tīng)，當(dāng)瀏覽器打開(kāi)頁(yè)面時(shí)，觸摸屏幕觸發(fā)事件，進(jìn)行音頻播放
?? ??? ?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>點(diǎn)擊愛(ài)心散開(kāi)動(dòng)畫告白特效
效果展示:
代碼展示:
<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情人節(jié)動(dòng)畫表白特效
效果展示:
代碼展示:
<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>
到此這篇關(guān)于七個(gè)基于JavaScript實(shí)現(xiàn)的情人節(jié)表白特效的文章就介紹到這了,更多相關(guān)JavaScript表白特效內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本篇文章主要介紹了詳解webpack性能優(yōu)化——DLL，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10
在瀏覽網(wǎng)頁(yè)或使用應(yīng)用程序時(shí),圖片加載失敗是一個(gè)常見(jiàn)的問(wèn)題,下面這篇文章主要介紹了前端圖片加載錯(cuò)誤的多種原因分析的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-03-03
javascript產(chǎn)生隨機(jī)數(shù)方法匯總
這篇文章主要介紹了javascript產(chǎn)生隨機(jī)數(shù)方法匯總的相關(guān)資料,需要的朋友可以參考下2016-01-01
H5喚醒APP實(shí)現(xiàn)方法及注意點(diǎn)總結(jié)
目前通過(guò)H5頁(yè)面喚起App的場(chǎng)景十分常見(jiàn),比如常見(jiàn)的分享功能,這篇文章主要給大家介紹了關(guān)于H5喚醒APP實(shí)現(xiàn)方法及注意點(diǎn)的相關(guān)資料,需要的朋友可以參考下2021-06-06
這篇文章主要為大家詳細(xì)介紹了Bootstrap fileinput文件上傳組件的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
webpack 中實(shí)現(xiàn)模塊化的核心就是 __webpack_require__ 函數(shù)，無(wú)論是commonjs模塊化還是es 模塊都是通過(guò)該函數(shù)來(lái)導(dǎo)入的，這篇文章主要介紹了webpack模塊化的原理,需要的朋友可以參考下2023-02-02
在JavaScript中使用for循環(huán)的方法詳解
在本文中，我們將學(xué)習(xí) JavaScript 中提供，的 for 循環(huán)，我們將了解如何在 JavaScript 中使用 for...in 循環(huán)語(yǔ)句、其語(yǔ)法、工作原理示例、何時(shí)使用或避免使用它以及我們可以使用哪些其他類型的循環(huán),需要的朋友可以參考下2023-07-07
我們已經(jīng)知道，null?沒(méi)有任何的屬性值，并且無(wú)法獲取其實(shí)體（existence）值。所以?null.property?返回的是錯(cuò)誤（error）而不是?undefined?。2008-09-09
火狐下取本地全路徑使用js代碼實(shí)現(xiàn)，感興趣的朋友可以參考下哈，希望可以幫助到你2013-04-04
javascript中利用柯里化函數(shù)實(shí)現(xiàn)bind方法【推薦】
下面小編就為大家?guī)?lái)一篇javascript中利用柯里化函數(shù)實(shí)現(xiàn)bind方法【推薦】。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧2016-04-04