div+css实现海底气泡冒泡动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：div+css实现海底气泡冒泡动画效果代码

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

<html lang="zh">

<head>
 
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <style>
        .m-title {
	font-family:'Exo 2',sans-serif;
	font-size:8.5vw;
	color:white;
	padding:5rem 0;
	text-shadow:0 4px 48px rgba(255,255,255,0.2)
}
.container {
	position:relative;
	display:flex;
	align-content:center;
	justify-content:center;
	background-image:linear-gradient(to bottom,#00c9ff 0,#92fe9d 100%),url(//repo.bfw.wiki/bfwrepo/image/5e4c71cd307e7.png);
	background-blend-mode:multiply;
	background-size:cover;
	overflow:hidden
}
.bubbles-container {
	position:absolute;
	top:0;
	left:50%;
	width:100%;
	max-width:15rem;
	transform:translateX(-50%);
	opacity:.75;
	overflow:visible
}
.bubbles {
	width:100%;
	height:auto
}
.bubbles circle {
	stroke:white;
	fill:none
}
.bubbles>g>g:nth-of-type(3n) circle {
	stroke:#87f5fb
}
.bubbles>g>g:nth-of-type(4n) circle {
	stroke:#8be8cb
}
.bubbles-large {
	overflow:visible
}
.bubbles-large>g {
	transform:translateY(2048px);
	opacity:0;
	will-change:transform,opacity
}
.bubbles-large g:nth-of-type(1) {
	animation:up 6.5s infinite
}
.bubbles-large g:nth-of-type(1) g {
	transform:translateX(350px)
}
.bubbles-large g:nth-of-type(1) circle {
	animation:wobble 3s infinite ease-in-out
}
.bubbles-large g:nth-of-type(2) {
	animation:up 5.25s 250ms infinite
}
.bubbles-large g:nth-of-type(2) g {
	transform:translateX(450px)
}
.bubbles-large g:nth-of-type(2) circle {
	animation:wobble 3s infinite ease-in-out
}
.bubbles-large g:nth-of-type(3) {
	animation:up 6s 750ms infinite
}
.bubbles-large g:nth-of-type(3) g {
	transform:translateX(700px)
}
.bubbles-large g:nth-of-type(3) circle {
	animation:wobble 3s infinite ease-in-out
}
.bubbles-large g:nth-of-type(4) {
	animation:up 5.5s 1.5s infinite
}
.bubbles-large g:nth-of-type(4) g {
	transform:translateX(500px)
}
.bubbles-large g:nth-of-type(4) circle {
	animation:wobble 3s infinite ease-in-out
}
.bubbles-large g:nth-of-type(5) {
	animation:up 6.5s 4s infinite
}
.bubbles-large g:nth-of-type(5) g {
	transform:translateX(675px)
}
.bubbles-large g:nth-of-type(5) circle {
	animation:wobble 3s infinite ease-in-out
}
.bubbles-small {
	overflow:visible
}
.bubbles-small>g {
	transform:translateY(2048px);
	opacity:0;
	will-change:transform,opacity
}
.bubbles-small g circle {
	transform:scale(0)
}
.bubbles-small g:nth-of-type(1) {
	animation:up 5.25s infinite
}
.bubbles-small g:nth-of-type(1) g {
	transform:translateX(350px)
}
.bubbles-small g:nth-of-type(1) circle {
	animation:wobble 3s infinite ease-in-out
}
.bubbles-small g:nth-of-type(2) {
	animation:up 5.75s infinite
}
.bubbles-small g:nth-of-type(2) g {
	transform:translateX(750px)
}
.bubbles-small g:nth-of-type(2) circle {
	animation:wobble 3s infinite ease-in-out
}
.bubbles-small g:nth-of-type(3) {
	animation:up 5.25s 250ms infinite
}
.bubbles-small g:nth-of-type(3) g {
	transform:translateX(350px)
}
.bubbles-small g:nth-of-type(3) circle {
	animation:wobble 3s 250ms infinite ease-in-out
}
.bubbles-small g:nth-of-type(4) {
	animation:up 5.75s 325ms infinite
}
.bubbles-small g:nth-of-type(4) g {
	transform:translateX(180px)
}
.bubbles-small g:nth-of-type(4) circle {
	animation:wobble 3s 325ms infinite ease-in-out
}
.bubbles-small g:nth-of-type(5) {
	animation:up 6s 125ms infinite
}
.bubbles-small g:nth-of-type(5) g {
	transform:translateX(350px)
}
.bubbles-small g:nth-of-type(5) circle {
	animation:wobble 3s 250ms infinite ease-in-out
}
.bubbles-small g:nth-of-type(6) {
	animation:up 5.13s 250ms infinite
}
.bubbles-small g:nth-of-type(6) g {
	transform:translateX(650px)
}
.bubbles-small g:nth-of-type(6) circle {
	animation:wobble 3s 125ms infinite ease-in-out
}
.bubbles-small g:nth-of-type(7) {
	animation:up 6.25s 350ms infinite
}
.bubbles-small g:nth-of-type(7) g {
	transform:transl.........完整代码请登录后点击上方下载按钮下载查看