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:50%;
	background:#602f2d;
	box-shadow:13px 0 #602f2d
}
.bob .face {
	width:200px;
	height:200px;
	background:#fdd5b6;
	border:3px solid #602f2d;
	border-radius:50%;
	position:relative;
	z-index:50;
	box-shadow:15px 0 #f7c6a4 inset
}
.bob .ear {
	position:absolute;
	background:#fdd5b6;
	border:3px solid #602f2d;
	width:40px;
	height:40px;
	border-radius:50%;
	z-index:15;
	top:115px;
	left:-5px
}
.bob .ear:after,.bob .ear:before {
	content:'';
	position:absolute;
	background:#602f2d;
	border-radius:15px;
	height:3px;
	width:20px;
	top:12px;
	left:5px
}
.bob .ear:after {
	transform:rotate(127deg);
	width:7px;
	top:15px;
	left:7px
}
.bob .ear.rgt {
	left:auto;
	right:-5px
}
.bob .ear.rgt:after {
	transform:rotate(47deg);
	top:15px;
	left:18px
}
.bob .neck {
	position:relative;
	background:#fdd5b6;
	border:3px solid #602f2d;
	margin:0 auto 0;
	height:50px;
	width:70px;
	z-index:15;
	border-radius:0 0 50% 50%;
	top:-8px;
	box-shadow:10px 0 #f7c6a4 inset
}
.bob .mouth {
	position:absolute;
	border:3px solid #602f2d;
	background:#ec7374;
	width:80%;
	height:80%;
	left:0;
	top:0;
	bottom:0;
	right:0;
	margin:auto;
	border-radius:50%;
	overflow:hidden;
	-webkit-animation:1s openclose ease-in infinite;
	animation:1s openclose ease-in infinite
}
.bob .mouth:after,.bob .mouth:before {
	content:'';
	position:absolute;
	background:#cc5e64;
	border:5px solid #df6062;
	border-radius:50%;
	bottom:0;
	left:0;
	right:0;
	margin:auto;
	width:120px;
	height:120px;
	z-index:2
}
.bob .mouth:after {
	z-index:10;
	bottom:auto;
	top:25px;
	background:#ec7374;
	height:40px;
	width:40px;
	border-top-color:transparent
}
.bob .tongue {
	position:absolute;
	background:#602f2d;
	width:40px;
	height:40px;
	left:0;
	bottom:5px;
	right:0;
	margin:auto;
	border-radius:50%;
	z-index:5
}
.bob .tongue:after,.bob .tongue:before {
	content:'';
	position:absolute;
	background:#f9adba;
	border:3px solid #602f2d;
	border-radius:50px;
	top:22px;
	left:-4px;
	width:30px;
	height:40px;
	z-index:2
}
.bob .tongue:before {
	left:16px
}
.drops {
	background:#8ecbf9;
	border:2px solid #602f2d;
	width:20px;
	height:20px;
	border-radius:50px 50px 0 50px;
	position:absolute;
	transform:rotate(-15deg);
	top:150px;
	left:70px;
	z-index:100;
	-webkit-animation:2s drop-l ease-in infinite;
	animation:2s drop-l ease-in infinite
}
.drops:nth-child(2) {
	left:auto;
	rig.........完整代码请登录后点击上方下载按钮下载查看