css实现发光泡泡漂浮动画效果代码-html代码-BFW代码库

css实现发光泡泡漂浮动画效果代码

代码语言：html

所属分类：动画

代码描述：css实现发光泡泡漂浮动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
<style>
body {
	background:#0d1135;
	margin:0;
	overflow:hidden
}
.bubble {
	mix-blend-mode:lighten;
	position:absolute;
	top:0;
	left:0
}
.bubble::before,.bubble::after {
	content:"";
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0
}
.bubble::before {
	background:#0d1135
}
.bubble::after {
	mix-blend-mode:color-dodge
}
.bubble:nth-child(0) {
	-webkit-animation:anim-0 26s infinite alternate .4s ease-in-out;
	animation:anim-0 26s infinite alternate .4s ease-in-out;
	transform:translate3d(85vw,18vh,0);
	width:95px;
	height:95px
}
.bubble:nth-child(0)::after {
	background:radial-gradient(#ffff82,#ffce72 40%,rgba(250,76,43,0) 70%)
}
@-webkit-keyframes anim-0 {
	33% {
	transform:translate3d(71vw,94vh,0)
}
66% {
	transform:translate3d(51vw,26vh,0)
}
100% {
	transform:translate3d(83vw,84vh,0)
}
}@keyframes anim-0 {
	33% {
	transform:translate3d(71vw,94vh,0)
}
66% {
	transform:translate3d(51vw,26vh,0)
}
100% {
	transform:translate3d(83vw,84vh,0)
}
}.bubble:nth-child(1) {
	-webkit-animation:anim-1 38s infinite alternate .2s ease-in-out;
	animation:anim-1 38s infinite alternate .2s ease-in-out;
	transform:translate3d(39vw,48vh,0);
	width:132px;
	height:132px
}
.bubble:nth-child(1)::after {
	background:radial-gradient(#fa4c2b,#6aff6e 40%,#010104 70%)
}
@-webkit-keyframes anim-1 {
	33% {
	transform:translate3d(64vw,13vh,0)
}
66% {
	transform:translate3d(53vw,6vh,0)
}
100% {
	transform:translate3d(68vw,32vh,0)
}
}@keyframes anim-1 {
	33% {
	transform:translate3d(64vw,13vh,0)
}
66% {
	transform:translate3d(53vw,6vh,0)
}
100% {
	transform:translate3d(68vw,32vh,0)
}
}.bubble:nth-child(2) {
	-webkit-animation:anim-2 25s infinite alternate .6s ease-in-out;
	animation:anim-2 25s infinite alternate .6s ease-in-out;
	transform:translate3d(81vw,42vh,0);
	width:88px;
	height:88px
}
.bubble:nth-child(2)::after {
	background:radial-gradient(#fa4c2b,#6aff6e 40%,#010104 70%)
}
@-webkit-keyframes anim-2 {
	33% {
	transform:translate3d(28vw,88vh,0)
}
66% {
	transform:translate3d(7vw,67vh,0)
}
100% {
	transform:translate3d(74vw,55vh,0)
}
}@keyframes anim-2 {
	33% {
	transform:translate3d(28vw,88vh,0)
}
66% {
	transform:translate3d(7vw,67vh,0)
}
100% {
	transform:translate3d(74vw,55vh,0)
}
}.bubble:nth-child(3) {
	-webkit-animation:anim-3 45s infinite alternate .5s ease-in-out;
	animation:anim-3 45s infinite alternate .5s eas.........完整代码请登录后点击上方下载按钮下载查看