纯css布局实现一个狗狗摇尾巴动画-html代码-BFW代码库

纯css布局实现一个狗狗摇尾巴动画

代码语言：html

代码描述：纯css布局实现一个狗狗摇尾巴动画

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
body{
  background-color:#7DC387;
  padding:0;
  margin:0;
}
.dog-container{
  background-color:#fad06c;
  width:120px;
  height:70px;
  
  position:absolute;
  top:40%;
  left:40%;
  border-radius:10px 10px 10px 100px;
}
.body{
  background-color:#fad06c;
  width:170px;
  height:90px;
  position:relative;
  top:65px;
  left:80px;
  border-radius:10px 10px 10px 55px;
}
.legA,.legB,.legC,.legD{
  background-color:#fad06c;
  width:19px;
  height:55px;
  position:relative;
}
.legA{
  left:100px;
  top:50px;
  border-radius:0px 0px 10px 10px;
}
.legB{
  left:130px;
  bottom:9px;
   border-radius:0px 0px 10px 10px;
 background-color:#ffb838;
  z-index:-1;
}
.legC{
  left:205px;
  bottom:60px;
  background-color:#ffb838;
  z-index:-1;
  border-radius:0px 0px 10px 10px;
}
.legD{
  left:231px;
  bottom:114px;
  border-radius:0px 0px 10px 10px;
}
.tail{
  width:0;
  height:0;
  border-left:10px solid transparent;
   border-left:9px solid transparent;
  border-bottom:100px solid #fad06c;
  position:relative;
  bottom:320px;
  left:230px;
  transform:rotate(30deg);
  transform-origin:bottom;
  animation:animate 1s infinite;
  border-radius: 7px;
}
@keyframes animate{
  50%{
    transform:rotate(15deg);
 .........完整代码请登录后点击上方下载按钮下载查看