如何給頁面設定透明背景加上粒子背景特效
阿新 • • 發佈：2018-12-09
在css樣式中新增如下樣式即可
filter:alpha(opacity=60); //60就是60%的透明度
opacity:0.6; //0.6也是60%的透明度意思比如我在最近專案中的hui-admin框架中設定了透明然後加上了粒子背景特效，整個頁面看上去就會特別炫酷哦~~
效果圖：
下面再分享一個最近我專案中所使用到的粒子背景js程式碼吧
<!-- 粒子背景樣式引入 --> <script type="text/javascript" src="canvas-particle.js"></script> <script type="text/javascript"> window.onload = function() { var config = { //配置 vx: 4, //小球x軸速度,正為右，負為左 vy: 4, //小球y軸速度 height: 2, //小球高寬，其實為正方形，所以不宜太大 width: 2, count: 200, //點個數 color: "121, 162, 185", //點顏色 stroke: "130,255,255", //線條顏色 dist: 6000, //點吸附距離 e_dist: 20000, //滑鼠吸附加速距離 max_conn: 10 //點到點最大連線數 } CanvasParticle(config); //呼叫 } </script>
只需要在需要使用粒子背景的地方 新增 id="zhengqing_background" 即可使用哦 (溫馨小提示：可根據自己的樣式修改哦)
ex:我的專案中
下面是需要引入的粒子樣式程式碼： canvas-particle.js
var CanvasParticle = (function(){ function getElementByTag(name){ return document.getElementsByTagName(name); } function getELementById(id){ return document.getElementById(id); } // 根據傳入的config初始化畫布 function canvasInit(canvasConfig){ canvasConfig = canvasConfig || {}; var html = getElementByTag("html")[0]; // 獲取body作為背景 // var body = getElementByTag("body")[0]; // 獲取特定div作為背景 // zhengqing_background是你想要將其作為背景的div的ID var body = document.getElementById("zhengqing_background"); var canvasObj = document.createElement("canvas"); var canvas = { element: canvasObj, points : [], // 預設配置 config: { vx: canvasConfig.vx || 4, vy: canvasConfig.vy || 4, height: canvasConfig.height || 2, width: canvasConfig.width || 2, count: canvasConfig.count || 100, color: canvasConfig.color || "121, 162, 185", stroke: canvasConfig.stroke || "130,255,255", dist: canvasConfig.dist || 6000, e_dist: canvasConfig.e_dist || 20000, max_conn: 10 } }; // 獲取context if(canvas.element.getContext("2d")){ canvas.context = canvas.element.getContext("2d"); }else{ return null; } body.style.padding = "0"; body.style.margin = "0"; // body.replaceChild(canvas.element, canvasDiv); body.appendChild(canvas.element); canvas.element.style = "position: fixed; top: 0; left: 0; z-index: -1;"; canvasSize(canvas.element); window.onresize = function(){ canvasSize(canvas.element); } body.onmousemove = function(e){ var event = e || window.event; canvas.mouse = { x: event.clientX, y: event.clientY } } document.onmouseleave = function(){ canvas.mouse = undefined; } setInterval(function(){ drawPoint(canvas); }, 40); } // 設定canvas大小 function canvasSize(canvas){ // 獲取視窗的寬高 // canvas.width = window.innerWeight || document.documentElement.clientWidth || document.body.clientWidth; // canvas.height = window.innerWeight || document.documentElement.clientHeight || document.body.clientHeight; // 獲取特定div的寬高 var width = document.getElementById("zhengqing_background").style.width; var height = document.getElementById("zhengqing_background").style.height; width = parseInt(width); height = parseInt(height); canvas.width = width || window.innerWeight || document.documentElement.clientWidth || document.body.clientWidth; canvas.height = height || window.innerWeight || document.documentElement.clientHeight || document.body.clientHeight; } // 畫點 function drawPoint(canvas){ var context = canvas.context, point, dist; context.clearRect(0, 0, canvas.element.width, canvas.element.height); context.beginPath(); context.fillStyle = "rgb("+ canvas.config.color +")"; for(var i = 0, len = canvas.config.count; i < len; i++){ if(canvas.points.length != canvas.config.count){ // 初始化所有點 point = { x: Math.floor(Math.random() * canvas.element.width), y: Math.floor(Math.random() * canvas.element.height), vx: canvas.config.vx / 2 - Math.random() * canvas.config.vx, vy: canvas.config.vy / 2 - Math.random() * canvas.config.vy } }else{ // 處理球的速度和位置，並且做邊界處理 point = borderPoint(canvas.points[i], canvas); } context.fillRect(point.x - canvas.config.width / 2, point.y - canvas.config.height / 2, canvas.config.width, canvas.config.height); canvas.points[i] = point; } drawLine(context, canvas, canvas.mouse); context.closePath(); } // 邊界處理 function borderPoint(point, canvas){ var p = point; if(point.x <= 0 || point.x >= canvas.element.width){ p.vx = -p.vx; p.x += p.vx; }else if(point.y <= 0 || point.y >= canvas.element.height){ p.vy = -p.vy; p.y += p.vy; }else{ p = { x: p.x + p.vx, y: p.y + p.vy, vx: p.vx, vy: p.vy } } return p; } // 畫線 function drawLine(context, canvas, mouse){ context = context || canvas.context; for(var i = 0, len = canvas.config.count; i < len; i++){ // 初始化最大連線數 canvas.points[i].max_conn = 0; // point to point for(var j = 0; j < len; j++){ if(i != j){ dist = Math.round(canvas.points[i].x - canvas.points[j].x) * Math.round(canvas.points[i].x - canvas.points[j].x) + Math.round(canvas.points[i].y - canvas.points[j].y) * Math.round(canvas.points[i].y - canvas.points[j].y); // 兩點距離小於吸附距離，而且小於最大連線數，則畫線 if(dist <= canvas.config.dist && canvas.points[i].max_conn <canvas.config.max_conn){ canvas.points[i].max_conn++; // 距離越遠，線條越細，而且越透明 context.lineWidth = 0.5 - dist / canvas.config.dist; context.strokeStyle = "rgba("+ canvas.config.stroke + ","+ (1 - dist / canvas.config.dist) +")" context.beginPath(); context.moveTo(canvas.points[i].x, canvas.points[i].y); context.lineTo(canvas.points[j].x, canvas.points[j].y); context.stroke(); } } } // 如果滑鼠進入畫布 // point to mouse if(mouse){ dist = Math.round(canvas.points[i].x - mouse.x) * Math.round(canvas.points[i].x - mouse.x) + Math.round(canvas.points[i].y - mouse.y) * Math.round(canvas.points[i].y - mouse.y); // 遇到滑鼠吸附距離時加速，直接改變point的x，y值達到加速效果 if(dist > canvas.config.dist && dist <= canvas.config.e_dist){ canvas.points[i].x = canvas.points[i].x + (mouse.x - canvas.points[i].x) / 20; canvas.points[i].y = canvas.points[i].y + (mouse.y - canvas.points[i].y) / 20; } if(dist <= canvas.config.e_dist){ context.lineWidth = 1; context.strokeStyle = "rgba("+ canvas.config.stroke + ","+ (1 - dist / canvas.config.e_dist) +")"; context.beginPath(); context.moveTo(canvas.points[i].x, canvas.points[i].y); context.lineTo(mouse.x, mouse.y); context.stroke(); } } } } return canvasInit; })();
溫馨小提示：也可去jQuery外掛庫去下載粒子背景特效哦：http://www.jq22.com/jquery-info9450