可爱棉花糖卡通宠物效果代码-html代码-BFW代码库

可爱棉花糖卡通宠物效果代码

代码语言：html

所属分类：动画

代码描述：可爱棉花糖卡通宠物效果代码

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


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

<head>

  <meta charset="UTF-8">
  

  
  
<style>
body,
html {
  height: 100%;
	background: #f9e2f0;
  margin: 0;
	padding: 0;
}

.wrapper {
  width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

#creature {
  background: lightgray;
  border-radius: 120% 130% 40% 40%;
  position: relative;
  top: 0;
  animation: bounce 1s infinite alternate;
}

.ear {
  width: 60px;
  height: 100px;
  position: absolute;
  background: lightgray;
  top: -60px;
  border-radius: 84%/125% 134% 33% 40%;
  z-index: 2;
}

.ear-left {
  left: 30px;
  transform: rotate(0deg);
}

.ear-right {
  right: 32px;
}

.earinner {
  width: 30px;
  height: 60px;
  position: absolute;
  background: #88898c;
  top: -50px;
  border-radius: 84%/130% 100% 20% 20%;
  z-index: 2;
}

.earinner-left {
  left: 45px;
  transform: rotate(0deg);
}

.earinner-right {
  right: 45px;
}


.eye {
  background: #000;
  width: 12px;
  height: 12px;
  position: absolute;
  top: 50px;
  border-radius: 50%;
  z-index: 3;
  animation: blink 2s infinite alternate;
}

.eye-left {
  left: 55px;
}

.eye-right {
  right: 55px;
}

.cheek {
  background: #ff7bac;
  height: 12px;
  width: 30px;
  border-radius: 50%/60% 50%;
  position: absolute;
  top: 67px;
}

.cheek-left {
  left: 40px;
}

.cheek-right {
  right: 40px;
}

.mouth {
  width: 55px;
  height: 20px;
  background-color: #b91a5a;
  border-bottom-left-radius: 20px;
  border-bottom-right-.........完整代码请登录后点击上方下载按钮下载查看