Всплывающие пузырьки на JS

Пример:

HTML:

<div id="particle-canvas">		
	<canvas class="back"></canvas>
	<canvas class="mid"></canvas>
	<canvas class="front"></canvas>
</div>

</div>

CSS:

#particle-canvas {
	width: 100%;
	height: 500px;
	position: relative;
	overflow: hidden;
}	
canvas {
	position: absolute;
	top: 0;
	left: 0;
	height: 500px;
}
.back {
	z-index: 0;
	filter: blur(4px);
	background-image: radial-gradient(#337AB7, #2d6b9f);
}
.mid {
	z-index: 1;
	filter: blur(2px);
}
.front {
	z-index: 2;
}

#particle-canvas {

width: 100%;

height: 500px;

position: relative;

overflow: hidden;

}

canvas {

position: absolute;

top: 0;

left: 0;

height: 500px;

}

.back {

z-index: 0;

filter: blur(4px);

background-image: radial-gradient(#337AB7, #2d6b9f);

}

.mid {

z-index: 1;

filter: blur(2px);

}

.front {

z-index: 2;

}

JS:

Подключаем скрипт particle.js

Если нет желания использовать JS, можно использовать вариант всплывающих пузырьков на CSS

Найдено на codepen.io у пользователя Sean Free

Пример:

HTML:

CSS:

JS:

Смотрите также:

Добавить комментарий: