把下面代码放到想放到的地方
<div id="thumbnail_canvas"><canvas id="header_canvas"></canvas></div>
css样式 根据自己网站需求添加样式
*气泡*/ #thumbnail_canvas{ } /*气泡*/ #header_canvas{ }/*气泡*/ 然后在你的主题根目录加入下面的js 建议新建个文件引入,避免js冲突
/*! * vuex v3.6.2 canvas js * (c) 2021 Evan You * @license MIT *//* Copyright (C) 2019 一为忆 bubble.js, http://www.iowen.cn */ (function() { var canvas, ctx, width, height, bubbles, animateHeader = true; initHeader(); function initHeader() { canvas = document.getElementById('header_canvas'); window_resize(); ctx = canvas.getContext('2d'); //建立泡泡 bubbles = []; var num = width * 0.1;//气泡数量 for (var i = 0; i < num; i++) { var c = new Bubble(); bubbles.push(c); } animate(); } function animate() { if (animateHeader) { ctx.clearRect(0, 0, width, height); for (var i in bubbles) { bubbles[i].draw(); } } requestAnimationFrame(animate); } function window_resize() { //canvas铺满窗口 //width = window.innerWidth; //height = window.innerHeight; //如果需要铺满内容可以换下面这个 var panel = document.getElementById('thumbnail_canvas'); width=panel.offsetWidth; height=panel.offsetHeight; canvas.width = width; canvas.height = height; } window.onresize = function(){ window_resize(); } function Bubble() { var _this = this; (function() { _this.pos = {}; init(); })(); function init() { _this.pos.x = Math.random() * width; _this.pos.y = height + Math.random() * 100; _this.alpha = 0.1 + Math.random() * 0.8;//气泡透明度 _this.alpha_change = 0.0002 + Math.random() * 0.0006;//气泡透明度变化速度 _this.scale = 0.2 + Math.random() * 1.6;//气泡大小 _this.scale_change = Math.random() * 0.003;//气泡大小变化速度 _this.speed = 0.1 + Math.random() * 0.5;//气泡上升速度 } //气泡 this.draw = function() { if (_this.alpha <= 0) { init(); } _this.pos.y -= _this.speed; _this.alpha -= _this.alpha_change; _this.scale += _this.scale_change; ctx.beginPath(); ctx.arc(_this.pos.x, _this.pos.y, _this.scale * 10, 0, 2 * Math.PI, false); ctx.fillStyle = 'rgba(255,255,255,' + _this.alpha + ')'; ctx.fill(); }; } })();
⚠️
wp百科网上的部份代码及教程来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。
无意侵害您的权益,请发送邮件至 aqiang-212@qq.com 或点击右侧 私信:wpbkw 反馈,我们将尽快处理。
无意侵害您的权益,请发送邮件至 aqiang-212@qq.com 或点击右侧 私信:wpbkw 反馈,我们将尽快处理。