超炫酷HTML5模糊的圓點背景動畫特效

次為大家分享的是一款最近多人使用的純HTML代碼動畫頁面源碼。

NAME：HTML5模糊的圓點背景動畫特效

小編覺得當做網站背景圖肯定很高大尚！

下面就來欣賞一下效果圖吧！

注意！前方高能代碼！

<!doctype html>

<html>

<head>

<title>PHP學習群：646724664</title>

<style>

body {

background: #000;

overflow: hidden;

}

canvas {

bottom: 0;

left: 0;

position: absolute;

right: 0;

top: 0;

}

#c1 {

opacity: 0;

}

#c2 {

background: #000;

}

</style>

</head>

<body>

var c1 = document.getElementById( 'c1' ),

ctx1 = c1.getContext( '2d' ),

c2 = document.getElementById( 'c2' ),

ctx2 = c2.getContext( '2d' ),

twopi = Math.PI * 2,

parts = [],

sizeBase,

cw,

opt,

hue,

count;

function rand( min, max ) {

return Math.random() * ( max - min ) + min;

}

function hsla( h, s, l, a ) {

return 'hsla(' + h + ',' + s + '%,' + l + '%,' + a + ')';

}

function create() {

sizeBase = cw + ch;

count = Math.floor( sizeBase * 0.3 ),

hue = rand( 0, 360 ),

opt = {

radiusMin: 1,

radiusMax: sizeBase * 0.04,

blurMin: 10,

blurMax: sizeBase * 0.04,

hueMin: hue,

hueMax: hue + 100,

saturationMin: 10,

saturationMax: 70,

lightnessMin: 20,

lightnessMax: 50,

alphaMin: 0.1,

alphaMax: 0.5

}

ctx1.clearRect( 0, 0, cw, ch );

ctx1.globalCompositeOperation = 'lighter';

while( count-- ) {

var radius = rand( opt.radiusMin, opt.radiusMax ),

blur = rand( opt.blurMin, opt.blurMax ),

x = rand( 0, cw ),

y = rand( 0, ch ),

hue = rand(opt.hueMin, opt.hueMax ),

saturation = rand( opt.saturationMin, opt.saturationMax ),

lightness = rand( opt.lightnessMin, opt.lightnessMax ),

alpha = rand( opt.alphaMin, opt.alphaMax );

ctx1.shadowColor = hsla( hue, saturation, lightness, alpha );

ctx1.shadowBlur = blur;

ctx1.beginPath();

ctx1.arc( x, y, radius, 0, twopi );

ctx1.closePath();

ctx1.fill();

}

parts.length = 0;

for( var i = 0; i < Math.floor( ( cw + ch ) * 0.03 ); i++ ) {

parts.push({

radius: rand( 1, sizeBase * 0.03 ),

x: rand( 0, cw ),

y: rand( 0, ch ),

angle: rand( 0, twopi ),

vel: rand( 0.1, 0.5 ),

tick: rand( 0, 10000 )

});

}

function init() {

resize();

create();

loop();

}

function loop() {

requestAnimationFrame( loop )

ctx2.clearRect( 0, 0, cw, ch );

ctx2.globalCompositeOperation = 'source-over';

ctx2.shadowBlur = 0;

ctx2.drawImage( c1, 0, 0 );

ctx2.globalCompositeOperation = 'lighter';

var i = parts.length;

ctx2.shadowBlur = 15;

ctx2.shadowColor = '#fff';

while( i-- ) {

var part = parts[ i ];

part.x += Math.cos( part.angle ) * part.vel;

part.y += Math.sin( part.angle ) * part.vel;

part.angle += rand( -0.05, 0.05 );

ctx2.beginPath();

ctx2.arc( part.x, part.y, part.radius, 0, twopi );

ctx2.fillStyle = hsla( 0, 0, 100, 0.075 + Math.cos( part.tick * 0.02 ) * 0.05 );

ctx2.fill();

if( part.x - part.radius > cw ) { part.x = -part.radius }

if( part.x + part.radius < 0 ) { part.x = cw + part.radius }

if( part.y - part.radius > ch ) { part.y = -part.radius }

if( part.y + part.radius < 0 ) { part.y = ch + part.radius }

part.tick++;

}

function resize() {

cw = c1.width = c2.width = window.innerWidth,

ch = c1.height = c2.height = window.innerHeight;

create();

}

function click() {

create()

}

window.addEventListener( 'resize', resize );

window.addEventListener( 'click', click );

init();</script>

<a target="_blank" >粵ICP備17135247號-1</a>

</body>

</html>

學習中有什么問題可以一起交流討論，PHP編程群： 646724664

HTML5 中，我們除了上一節講過的可以對圖形設置平移、旋轉、縮放，還可以給圖形添加陰影效果。添加陰影的時候只需要利用圖形上下文對象的幾個關于陰影繪制的屬性就可以實現啦。

圖形陰影繪制的屬性

shadowOffsetX 屬性和 shadowOffsetY 屬性分別用于設置陰影在 X 軸和 Y 軸的延伸距離，屬性值為正值表示向下或向右延伸，負值表示向上或向左延伸。

shadowBlur 屬性用于設置陰影的模糊度，當我們不希望圖形的陰影太清晰時，可以使用這個屬性。屬性值為必須為正值，否則無效喲，一般設定在 0到10 之間。

shadowColor 屬性值用于設置陰影的顏色，屬性值可以為任意標準的 CSS 顏色值，默認顏色為黑色。

給圖形繪制陰影

例如給一個粉色的矩形繪制陰影。

示例：

繪制向右偏移 10 像素的陰影：

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>HTML5學習(9xkd.com)</title>
        </head>
        <body>
            <canvas id="mycanvas" width="300" height="200" style="border: 1px solid #000;"></canvas>
            <script>
                var can = document.getElementById("mycanvas");
                var ctx = can.getContext("2d");
                ctx.shadowOffsetX = 10;
                ctx.shadowBlur = 10;
                ctx.shadowColor="#000";
                ctx.fillStyle = "pink";  // 填充顏色
                ctx.fillRect(50, 50, 150, 70);
            </script>
        </body>
    </html>

在瀏覽器中的演示效果：

可以看到上圖中，陰影的位置向右偏移，如果想要陰影向左偏移，可以將shadowOffsetX 的值設置為負數。

示例：

如果要繪制向上偏移 20 像素的陰影，則不需要設置 shadowOffsetX，而是設置 shadowOffsetY 屬性，正值為向下偏移，負值為向上偏移：

var can = document.getElementById("mycanvas");
var ctx = can.getContext("2d");
ctx.shadowOffsetY = -20;
ctx.shadowBlur = 10;
ctx.shadowColor="rgba(0, 0, 0, 0.7)"; // 設置透明度
ctx.fillStyle = "pink";  // 填充顏色
ctx.fillRect(50, 50, 150, 70);

在瀏覽器中的演示效果：

可以看到這張截圖中，矩形的陰影顏色要比上面示例中淡一點。這是因為我們在給陰影設置顏色時，指定了一個透明度，用到了 rgba() 函數，函數中第四個參數用于設置透明度，值為 0~1 之間的小數，0表示完全透明，1表示不透明。

示例：

給四個邊設置陰影：

var can = document.getElementById("mycanvas");
var ctx = can.getContext("2d");
ctx.shadowBlur = 10;
ctx.shadowColor="rgba(0, 0, 0, 0.7)"; // 設置透明度
ctx.fillStyle = "pink";   // 填充顏色
ctx.fillRect(50, 50, 150, 70);

在瀏覽器中的演示效果：

在實際應用中，其實我們會經常用到陰影，例如給導航欄添加陰影、給按鈕添加陰影、給圖片添加陰影等，這樣看上去就會更立體一些，增加層次感。

了解更多可查看鏈接：https://www.9xkd.com/

自己是一名從事了多年開發的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個月整理了一份最適合2019年學習的web前端學習干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關注我的頭條號并在后臺私信我：前端，即可免費獲取

Html5-CSS之五大居中方式

你是不是也對元素居中的知識點很是模糊？是不是苦于找不到一個總結的通俗易懂的說明？是不是自己懶得去總結？恭喜你，搜到這篇博客！這是鄙人在前端的學習與實踐中總結出的元素的五大居中方式，黏貼了代碼并對代碼做了解釋，希望對迷茫的有所幫助！

下面的居中示例中，統一使用了同一個div作為父元素和p作為子元素

設置一個div,并且設置了div的寬高邊框，div里面設置一個塊元素p，設置了它的寬高和背景色

css居中方式1

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>五大居中1</title>
<style>
*{margin:0;}
div{width:200px;height:300px;border:2px solid #000;margin:200px auto;
text-align:center;font-size:0;
}
div p{width:100px;height:100px;background:#666;
display:inline-block;vertical-align:middle;
}
div:after{content:"";display:inline-block;height:100%;vertical-align:middle;}
</style>
</head>
<body>
<div>
	<p></p>
</div>
</body>
</html>

這里利用了偽元素讓子元素p在div盒子里左右水平居中只需要在它的父元素div里加text-align:center;垂直方向居中需要在父元素后面加了一個偽元素，并使得樣式為inline-block;height:100%;就是和父元素一樣高，vertical-align:middle;垂直居中，也就是p元素相對與偽元素居中，由于偽元素和div一樣高，所以相當于p元素在div里垂直居中。

css居中方式2

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>五大居中2</title>
<style>
*{margin:0;}
div{position:relative;width:300px;height:400px;border:1px solid #000;margin:100px auto;}
p{position:absolute;left:0;bottom:0;right:0;top:0;margin:auto;width:100px;height:100px;background:#f99;}
</style>
</head>
<body>
<div>
	<p></p>
</div>
</body>
</html>

這里利用了定位居中

子元素p設置position：absolute脫離文檔流,默認以html作為父元素，所以我們給父元素div設置position:relative;使得p以div為父元素做位置的變動，left:0;tight:0;top:0;bottom:0;（只有設置了定位的元素才可以使用這種方式來移動），最后margin:auto;就會水平和垂直都居中。

css居中方式3

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>五大居中3</title>
<style>
*{margin:0;}
div{display:flex;justify-content:center;align-items:center;width:300px;height:400px;border:1px solid #000;margin:100px auto;}
p{width:100px;height:100px;background:#f99;}
</style>
</head>
<body>
<div>
	<p></p>
</div>
</body>
</html>

這里利用了彈性盒居中

父元素div設置成彈性盒樣式，justify-content:center;主軸居中

align-items:center;垂直居中（而且這兩個只能設置在父元素上，彈性盒知識）

css居中方式4

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>五大居中4</title>
<style>
*{margin:0;}
div{position:relative;width:300px;height:400px;border:1px solid #000;margin:100px auto;}
p{width:100px;height:100px;background:#f99;position:absolute;
left:50%;top:50%;margin:-50px 0 0 -50px;}
</style>
</head>
<body>
<div>
	<p></p>
</div>
</body>
</html>

利用定位線左上角居中，然后左移子元素寬度的一半，再上移子元素高度的一半。

css居中方式5

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>五大居中5</title>
<style>
*{margin:0;}
div{position:relative;width:300px;height:400px;border:1px solid #000;margin:100px auto;}
p{position:absolute;width:100px;height:100px;background:#f99;left:50%;top:50%;
	transform:translate(-50%,-50%);}
</style>
</head>
<body>
<div>
	<p></p>
</div>
</body>
</html>

利用動畫移動屬性transform

結語

相信看了上面的有關Html5、css的元素五大居中方式，你們就可以解決自己的小問題了，但是也要養成一個總結的好習慣。好記性不如爛筆頭！以前留下來的話語總是有他的道理。Come on！

原文鏈接：https://blog.csdn.net/qq_38110274/article/details/102756968

在線咨詢

上一篇：處理來路的最強神器—-Voluum追蹤系統
下一篇：聊一聊JavaScript和Java、C#的“箭頭函數”

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

超炫酷HTML5模糊的圓點背景動畫特效

NAME：HTML5模糊的圓點背景動畫特效

圖形陰影繪制的屬性

給圖形繪制陰影

您的項目需求