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

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

代码语言：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.........完整代码请登录后点击上方下载按钮下载查看