css实现婴儿啼哭动画效果代码-html代码-BFW代码库

css实现婴儿啼哭动画效果代码

代码语言：html

所属分类：动画

代码描述：css实现婴儿啼哭动画效果代码

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

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

<head>
    <meta charset="UTF-8">
<style>
*,*:after,*:before {
	box-sizing:border-box
}
body {
	text-align:center;
	background:#03a9f4
}
.conatiner {
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	width:900px
}
.circle {
	border-radius:50%;
	padding:0;
	display:inline-block;
	position:relative;
	height:375px
}
.circle:after {
	content:'';
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	border:40px solid #fffbdf;
	z-index:50;
	border-radius:50%
}
.holder {
	overflow:hidden;
	width:366px;
	height:345px;
	border-radius:50%;
	position:relative
}
.bob {
	position:absolute;
	display:inline-block;
	left:50%;
	z-index:10;
	transform:translateX(-50%);
	-webkit-animation:2s updown ease-in infinite;
	animation:2s updown ease-in infinite;
	top:100%
}
.bob .nose {
	position:relative;
	background:#fdd5b6;
	border:3px solid #602f2d;
	margin:0 auto;
	height:35px;
	width:35px;
	z-index:15;
	border-radius:50% 50% 0 0;
	top:8px
}
.bob .nose:after {
	content:'';
	position:absolute;
	left:5px;
	top:12px;
	height:7px;
	width:7px;
	border-radius:.........完整代码请登录后点击上方下载按钮下载查看