悬浮的小猪

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>css制作粉红猪</title>
<style>
.pig {/*背景*/
   width: 400px;
   height: 400px;
   background-color: #acf;
   margin: 50px auto;
   position: relative;
}
.pigt {/*猪头*/
   animation:move 3s 6 alternate;
   animation-fill-mode: forwards;/*动画结束后定格到结束位置*/
   width: 300px;
   height: 300px;
   border-radius: 100%;
   background-color: #fa9;
   position: absolute;

   margin: 12.5% 12.5%;
   box-shadow: 0 0 6em #a34 inset;
   background: radial-gradient(circle, #fa9, #f77, #a34);
}
.pigt:before {/*小猪猪的左耳*/
   content: "";
   animation:movel 3s 6 alternate;
   width: 130px;
   height: 60px;
   background-color: #9b2231;
   box-shadow: 0 0 2em #670f21 inset;
   background: radial-gradient(circle, #9b2231, #7f192a, #670f21);
   position: absolute;
   left: -75px;
   /*border-radius: 10% 90%;*/
   border-radius: 70% 40% 70% 40% /40% 70% 40% 70%;/*;*/
   transform-origin: 100% 100%;
   transform: rotate(-70deg);
}
.pigt:after {/*小猪猪的右耳*/
   content: "";
   animation:mover 3s 6 alternate;
   width: 130px;
   height: 60px;
   background-color: #9b2231;
   box-shadow: 0 0 2em #670f21 inset;
   background: radial-gradient(circle, #9b2231, #7f192a, #670f21);
   position: absolute;
   right: -75px;
   border-radius: 40% 70% 40% 70%/70% 40% 70% 40%;
   transform-origin: 0 100%;
   transform: rotate(70deg);
}
.pigel {/*左眼*/
   width: 100px;
   height: 50px;
   background: #fff;
   position: absolute;
   right: 60%;
   top: 20%;
   border-radius: 50%;
   transform-origin: 100% 50%;
   transform: rotate(-80deg);
   box-shadow: 0.2em 0em 0.2em 0.1em #BCBCBC inset;
}
.pigel:after {
   content: "";
   width: 45px;
   height: 30px;
   background-color: #000;
   position: absolute;
   right: 15%;
   top: 30%;
   border-radius: 50%;
   transform: rotate(-10deg);
}
.piger {/*右眼*/
   width: 100px;
   height: 50px;
   background: #fff;
   position: absolute;
   left: 60%;
   top: 20%;
   border-radius: 50%;
   transform-origin: 0 50%;
   transform: rotate(80deg);
   box-shadow: -0.2em 0em 0.2em 0.1em #BCBCBC inset;
}
.piger:after {
   content: "";
   width: 45px;
   height: 30px;
   background-color: #000;
   position: absolute;
   left: 15%;
   top: 30%;
   border-radius: 50%;
   transform: rotate(10deg);
}
.pign {/*鼻子nose*/
   width: 80px;
   height: 50px;
   background-color: #febaa3;
   position: absolute;
   left: 37%;
   top: 60%;
   border-radius : 50px 50px 50px 50px / 27px 27px 27px 27px;
   box-shadow: 0 0 10px #d55259;
}
.pign:before {
   content: "";
   width: 8px;
   height: 30px;
   background-color: #651025;
   position: absolute;
   left: 30%;
   top: 20%;
   border-radius: 50%;
}
.pign:after {
   content: "";
   width: 8px;
   height: 30px;
   background-color: #651025;
   position: absolute;
   right: 30%;
   top: 20%;
   border-radius: 50%;
}
@keyframes move{
   0%{transform:translateY(-30px)}
   100%{transform:translateY(30px)}
   }
@keyframes mover{
   0%{transform:rotate(70deg)}
   100%{transform:rotate(30deg)}
   }
@keyframes movel{
   0%{transform:rotate(-70deg)}
   100%{transform:rotate(-30deg)}
   }
</style>
</head>

猜你喜欢