超炫酷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 href="http://www.miitbeian.gov.cn/" 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模糊的圆点背景动画特效

图形阴影绘制的属性

给图形绘制阴影

您的项目需求