js+css实现彩色气泡上浮升起动画效果代码-html代码-BFW代码库

js+css实现彩色气泡上浮升起动画效果代码

代码语言：html

所属分类：动画

代码描述：js+css实现彩色气泡上浮升起动画效果代码

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

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

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

  
  
<style>
body,
html {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: #282c34;
}

#wave-container {
	position: absolute;
	bottom: 0;
	width: 100%;
	overflow: hidden;
	line-height: 0;
	transform: rotate(180deg);
}

.wave {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0) 50%, #ffffff 50%);
	background-size: 50px 50px;
	position: absolute;
	width: 200%;
	height: 100px;
	background-repeat: repeat no-repeat;
	background-position: 0 bottom;
	transform-origin: center bottom;
	opacity: 0.5;
	animation: waveAnimation 30s linear infinite;
}

.wave:nth-child(1) {
	bottom: 0;
}

.wave:nth-child(2) {
	bottom: 10px;
	animation-delay: -15s;
}

@keyframes waveAnimation {
	0% {
		tra.........完整代码请登录后点击上方下载按钮下载查看