css+div实现彩色模糊圆点渐变背景动画效果代码-html代码-BFW代码库

css+div实现彩色模糊圆点渐变背景动画效果代码

代码语言：html

所属分类：背景

代码描述：css+div实现彩色模糊圆点渐变背景动画效果代码

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

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

<head>
  <meta charset="UTF-8">
  

  
  
  
<style>
.blobs{
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  right:0;
  background:white;
  margin:auto;
  filter:blur(20px) contrast(2);
  animation:demonstration 10s linear infinite;
  overflow: hidden;
}


.blob{
  background:purple;
  position:absolute;
  left:75%;
  top:50%;
  margin-top:-100px;
  margin-left:-100px;
  border-radius:100%;
}

.big-blob{
	width: 150vw;
	height: 150vw;
	left: -50vw;
	bottom: 0vw;
	opacity: 0.6;
	filter:blur(10vw) contrast(1);
	background: blue;
}

@keyframes blob-anim-1{
  0%{
	transform:translate(5vw, -7vw);
  }
  50%{
	 transform:translate(6vw, 2vw);
  }
  100%{
	transform:translate(-3vw, 5vw);
  }
}
.blob:nth-child(2){
  animation:blob-anim-2 ease-in-out 2s infinite alternate;
  width:10vw;
  height:8vw;
}

@keyframes blob-anim-2{
  0%{
	transform:translate(3vw, 7vw);
  }
  50%{
	 transform:translate(-6vw, 4vw);
  }
  100%{
	transform:translate(3vw, -5vw);
  }
}
.blob:nth-child(2){
  animation:blob-anim-2 ease-in-out 2s infinite alternate;
  width:15vw;
  height:11vw;
}

@keyframes blob-anim-3{
  0%{
	transform:translate(-15vw, -10vw);
	opacity: 0.5;
  }
  50%{
	 transform:translate(5vw, -3vw);
	 opacity: 1;
  }
  100%{
	transform:translate(-7vw, 6vw);
	opacity: 0.8;
  }
}
.blob:nth-child(3){
  animation:blob-anim-3 ease-in-out 2s infinite alternate;
  background: pink;
  width: 23vw;
  height.........完整代码请登录后点击上方下载按钮下载查看