css实现一个开心的笑脸泡泡气泡上下浮动动画效果代码-html代码-BFW代码库

css实现一个开心的笑脸泡泡气泡上下浮动动画效果代码

代码语言：html

所属分类：动画

代码描述：css实现一个开心的笑脸泡泡气泡上下浮动动画效果代码

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

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

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

  
  
<style>
body {
	height: 100vh;
	margin: 0;
	display: grid;
	place-items: center;
	background: rgb(222, 191, 244);
	background: linear-gradient(
		213deg,
		rgba(222, 191, 244, 1) 0%,
		rgba(255, 178, 178, 1) 50%,
		rgba(255, 215, 158, 1) 100%
	);
}


.bubble {
	height: 200px;
	width: 200px;
	background: rgb(250,255,255);
background: radial-gradient(at 60px 60px, rgba(250,255,255,1) 0%, rgba(0,255,241,0.1) 20%,rgba(0,255,241,0.3) 200%);
	border-radius: 50%;
	animation: float 5s infinite;
	transition: 1s;
}

.cute-face{
	width: 80px;
	height: 40px;
	position: relative;
	top: 35%;
	left: 50%;
	transform: translate(-50%,-50%);
}

.eye-cont{
	display: flex;
}
.eye{
	background: #333;
	height: 30px;
	width: 20px;
	border-radius: 50%;
	margin: 5px auto;
	top: 20%;
	position: relative;
}

.whites{
	position: relative;
	height: 12px;
	width: 7px;
	left: 58%;
	top: 20%;
	background: white;
	border-radius: 50%;
}

.blush{
	height: 10px;
	width: 22px;
	bac.........完整代码请登录后点击上方下载按钮下载查看