css布局实现卡通方块狗狗摇尾巴动画效果代码-html代码-BFW代码库

css布局实现卡通方块狗狗摇尾巴动画效果代码

代码语言：html

所属分类：动画

代码描述：css布局实现卡通方块狗狗摇尾巴动画效果代码

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


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

<head>

  <meta charset="UTF-8">

  
  
  
  
<style>
body {
	height: 100vh;
	margin: 0;
	background: lightsteelblue;
	display: grid;
	place-items: center;
}

.dog {
	width: 30rem;
	height: 30rem;
	background: white;
	position: relative;
	border-radius: 50%;
}

.head {
	width: 5rem;
	height: 6.5rem;
	background: #af691a;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
}

.patch {
	width: 2.5rem;
	height: 3.3rem;
	background: #e6b89d;
	border-bottom-right-radius: 20px;
}

.nose {
	width: 1.5rem;
	height: 1.5rem;
	background: #252525;
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	border-top-left-radius: 12px;
	border-top-right-radius: 12px;
}

.eye {
	width: 1rem;
	height: 1.2rem;
	background: white;
	border-radius: 50%;
	position: absolute;
	top: 30%;
}

.eye::after {
	content: "";
	position: absolute;
	background: lightsteelblue;
	width: 0.3rem;
	height: 0.3rem;
	border-radius: 50%;
	right: 0.1rem;
	top: 0.2rem;
}

.eye-left {
	left: 20%;
}

.eye-right {
	right: 20%;
}

.eyebrow {
	width: 1rem;
	height: 0.5rem;
	background: #efd6ba;
	border-radius: 40%;
	position: absolute;
	top: 14%;
}

.eyebrow-left {
	left: 20%;
}

.eyebrow-right {
	right: 20%;
}

.tongue {
	height: 1.7rem;
	width: 1.7rem;
	background: pink;
	position: absolute;
	top: 100%;
	left: 50%;
	border-bottom-left-radius: 12px;
	border-bottom-right-radius: 12px;
}

.ear {
	width: 1.5rem;
	height: 3.5rem;
	background: #a35709;
	position: absolute;
}

.ear-left {
	right: 100%;
}

.ear-right {
	left: 100%;
}

.body {
	width: 12rem;
	height: 14rem;
	background: #a35709;
	position: absolute;
	left: 50%;
	top: calc(50% + 7.5rem);
	transform: translate(-50%, -50%);
.........完整代码请登录后点击上方下载按钮下载查看