纯CSS动效——摇摆的娃娃

在codepen网站发现大神写的纯css动效一枚，摇摆的娃娃，不敢自己独享，发来给大家看看

CSS样式

* {
margin: 0;
padding: 0;
}

html,
body {
height: 100%;
background: #f0f0f0;
}

#wrap {
margin: -200px 0 0 -250px;
width: 500px;
height: 400px;
background: #86b1c2;
border: 20px solid #FFF;
box-sizing: border-box;
position: absolute;
top: 50%;
left: 50%;
}

.baby {
margin: -112px 0 0 -43px;
width: 86px;
height: 225px;
background: #e8dcd8;
border-radius: 43px;
box-shadow: -15px -10px 0px #65a9c1;
overflow: hidden;
position: absolute;
top: 50%;
left: 50%;
transform: rotate(-40deg);
-webkit-transform: rotate(-40deg);
animation: moving 1.2s ease-in-out infinite;
-webkit-animation: moving 1.2s ease-in-out infinite;
}

.baby .face {
margin: 10px 22px 0 8px;
width: 60px;
height: 66px;
background: #f9c19f;
border-radius: 50%;
position: relative;
animation: face 1.2s ease-in-out infinite;
-webkit-animation: face 1.2s ease-in-out infinite;
}

.baby .face:before {
content: "";
display: block;
width: 20px;
height: 10px;
background: #edb256;
border-bottom-left-radius: 400%;
border-bottom-right-radius: 200%;
position: absolute;
top: 0;
left: 40%;
transform: rotate(-15deg);
-webkit-transform: rotate(-15deg);
}

.baby .face .eyes {
margin-left: -30%;
width: 60%;
height: 10px;
position: absolute;
top: 20px;
left: 50%;
}

.baby .face .eyes:before {
content: "";
width: 9px;
height: 9px;
background: #1b414c;
border-radius: 50%;
float: left;
/*animation: eyes .5s linear infinite; -webkit-animation: eyes .5s linear infinite;*/
}

.baby .face .eyes:after {
content: "";
width: 9px;
height: 9px;
background: #1b414c;
border-radius: 50%;
float: right;
/*animation: eyes .5s linear infinite; -webkit-animation: eyes .5s linear infinite;*/
}

.baby .face .mouth {
margin-left: -16px;
width: 32px;
height: 18px;
background: #7e2e33;
border-radius: 10px;
position: absolute;
bottom: 10px;
left: 50%;
animation: mouth .3s ease-in-out infinite;
-webkit-animation: mouth .3s ease-in-out infinite;
}

.baby .face .mouth .tongue {
margin-left: -3px;
width: 6px;
height: 10px;
background: #ed5c56;
border-top-left-radius: 120%;
border-top-right-radius: 50%;
position: absolute;
bottom: 0;
left: 50%;
z-index: 1;
animation: tongue .3s ease-in-out infinite;
-webkit-animation: tongue .3s ease-in-out infinite;
}

.baby .blanket {
width: 200%;
height: 15px;
background: #cdd3d7;
transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);
position: absolute;
top: 45%;
left: -30px;
animation: blanket 1.2s ease-in-out infinite;
-webkit-animation: blanket 1.2s ease-in-out infinite;
}

.milk_bottle {
margin: -120px 0 0 60px;
position: absolute;
top: 50%;
left: 50%;
transform: rotate(-130deg);
-webkit-transform: rotate(-130deg);
animation: bottlemove 1.7s ease-in-out infinite;
-webkit-animation: bottlemove 1.7s ease-in-out infinite;
}

.milk_bottle .bottle {
margin-left: 3px;
width: 30px;
height: 40px;
background: #e8dcd8;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
box-shadow: 5px 5px 0 #65a9c1;
position: relative;
z-index: 4;
}

.milk_bottle .bottle:before {
content: "";
display: block;
width: 12px;
height: 2px;
background: #cdd3d7;
position: absolute;
top: 10px;
left: 5px;
animation: bottledetailmove 1.7s ease-in-out infinite;
-webkit-animation: bottledetailmove 1.7s ease-in-out infinite;
}

.milk_bottle .bottle:after {
content: "";
display: block;
width: 12px;
height: 2px;
background: #cdd3d7;
position: absolute;
top: 20px;
left: 5px;
animation: bottledetailmove 1.7s ease-in-out infinite;
-webkit-animation: bottledetailmove 1.7s ease-in-out infinite;
}

.milk_bottle .tube_bottom {
width: 36px;
height: 7px;
background: #f3cf9f;
border-radius: 5px;
box-shadow: 5px 5px 0 #65a9c1;
position: relative;
z-index: 3;
}

.milk_bottle .tube_middle {
margin: 0 auto;
width: 30px;
height: 7px;
background: #f1b980;
border-top-left-radius: 400%;
border-top-right-radius: 400%;
box-shadow: 5px 5px 0 #65a9c1;
}

.milk_bottle .tube_top {
margin: 0 auto;
width: 10px;
height: 7px;
background: #f1b980;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
box-shadow: 5px 5px 0 #65a9c1;
}

.pacifier {
margin: 80px 0 0 -90px;
position: absolute;
top: 50%;
left: 50%;
z-index: 3;
transform: rotate(20deg);
-webkit-transform: rotate(20deg);
}

.pacifier .pacifier_top {
width: 15px;
margin: 0 auto;
height: 20px;
background: #e8dcd8;
/* fallback */

background: linear-gradient(135deg, transparent 10px, #e8dcd8 0) top left, linear-gradient(225deg, transparent 10px, #e8dcd8 0) top right;
background-size: 50% 50%;
background-repeat: no-repeat;
background-image: radial-gradient(circle at -2px 7px, rgba(204, 0, 0, 0) 7px, #e8dcd8 5px), radial-gradient(circle at 10px 7px, rgba(204, 0, 0, 0) 7px, #e8dcd8 5px);
position: relative;
}

.pacifier .pacifier_top:before {
content: "";
display: block;
width: 15px;
height: 15px;
background: #e8dcd8;
border-radius: 50%;
position: absolute;
top: -10px;
left: 0;
}

.pacifier_middle {
width: 20px;
height: 5px;
background: #7e2e33;
border-radius: 5px;
position: absolute;
top: 10px;
left: -2px;
z-index: 2;
}

.pacifier_middle:after {
content: "";
display: block;
margin: 5px auto 0;
width: 7px;
height: 7px;
background: #7e2e33;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
}

.pacifier_bottom {
width: 18px;
height: 18px;
border: 3px solid #ffae00;
border-radius: 50%;
position: absolute;
top: 15px;
left: -4px;
z-index: 1;
}

.pacifier.shadow {
margin: 83px 0 0 -95px;
position: absolute;
top: 50%;
left: 50%;
z-index: 2;
transform: rotate(20deg);
-webkit-transform: rotate(20deg);
}

.pacifier.shadow .pacifier_top {
background: #65a9c1;
/* fallback */

background: linear-gradient(135deg, transparent 10px, #65a9c1 0) top left, linear-gradient(225deg, transparent 10px, #65a9c1 0) top right;
background-size: 50% 50%;
background-repeat: no-repeat;
background-image: radial-gradient(circle at -2px 7px, rgba(204, 0, 0, 0) 7px, #65a9c1 5px), radial-gradient(circle at 10px 7px, rgba(204, 0, 0, 0) 7px, #65a9c1 5px);
}

.pacifier.shadow .pacifier_top:before,
.pacifier.shadow .pacifier_middle,
.pacifier.shadow .pacifier_middle:after {
background: #65a9c1;
}

.pacifier.shadow .pacifier_bottom {
border: 3px solid #65a9c1;
}

@keyframes moving {
0% {
top: 50%;
left: 50%;
}
50% {
top: 49%;
left: 51%;
}
100% {
top: 50%;
left: 50%;
}
}

@-webkit-keyframes moving {
0% {
top: 50%;
left: 50%;
}
50% {
top: 49%;
left: 51%;
}
100% {
top: 50%;
left: 50%;
}
}

@keyframes face {
0% {
margin: 10px 22px 0 8px;
}
50% {
margin: 10px 8px 0 22px;
}
100% {
margin: 10px 22px 0 8px;
}
}

@-webkit-keyframes face {
0% {
margin: 10px 22px 0 8px;
}
50% {
margin: 10px 8px 0 22px;
}
100% {
margin: 10px 22px 0 8px;
}
}

@keyframes eyes {
0% {
height: 9px;
border-radius: 50%;
}
50% {
height: 5px;
border-radius: 400%;
}
100% {
height: 9px;
border-radius: 50%;
}
}

@-webkit-keyframes eyes {
0% {
height: 9px;
border-radius: 5px;
}
50% {
height: 5px;
border-radius: 400%;
}
100% {
height: 9px;
border-radius: 5px;
}
}

@keyframes mouth {
0% {
margin-left: -16px;
width: 32px;
height: 18px;
}
50% {
margin-left: -10px;
width: 20px;
height: 20px;
}
100% {
margin-left: -16px;
width: 32px;
height: 18px;
}
}

@-webkit-keyframes mouth {
0% {
margin-left: -16px;
width: 32px;
}
50% {
margin-left: -9px;
width: 18px;
}
100% {
margin-left: -16px;
width: 32px;
}
}

@keyframes tongue {
0% {
border-top-left-radius: 120%;
border-top-right-radius: 50%;
}
50% {
border-top-left-radius: 50%;
border-top-right-radius: 120%;
}
100% {
border-top-left-radius: 120%;
border-top-right-radius: 50%;
}
}

@-webkit-keyframes tongue {
0% {
border-top-left-radius: 120%;
border-top-right-radius: 50%;
}
50% {
border-top-left-radius: 50%;
border-top-right-radius: 120%;
}
100% {
border-top-left-radius: 120%;
border-top-right-radius: 50%;
}
}

@keyframes blanket {
0% {
top: 45%;
}
50% {
top: 50%;
}
100% {
top: 45%;
}
}

@-webkit-keyframes blanket {
0% {
top: 45%;
}
50% {
top: 50%;
}
100% {
top: 45%;
}
}

@keyframes bottlemove {
0% {
top: 50%;
transform: rotate(-130deg);
}
50% {
top: 47%;
transform: rotate(-115deg);
}
100% {
top: 50%;
transform: rotate(-130deg);
}
}

@-webkit-keyframes bottlemove {
0% {
top: 50%;
transform: rotate(-130deg);
}
50% {
top: 47%;
transform: rotate(-115deg);
}
100% {
top: 50%;
transform: rotate(-130deg);
}
}

@keyframes bottledetailmove {
0% {
left: 5px;
}
50% {
left: 15px;
}
100% {
left: 5px;
}
}

@-webkit-keyframes bottledetailmove {
0% {
left: 5px;
}
50% {
left: 15px;
}
100% {
left: 5px;
}
}

内容部分

<div id="wrap">

<div class="baby">

<div class="face">

<div class="eyes"></div>

<div class="mouth">

<div class="tongue"></div>

</div>

</div>

<div class="blanket"></div>

</div>

<div class="milk_bottle">

<div class="tube_top"></div>

<div class="tube_middle"></div>

<div class="tube_bottom"></div>

<div class="bottle"></div>

</div>

<div class="pacifier">

<div class="pacifier_top"></div>

<div class="pacifier_middle"></div>

<div class="pacifier_bottom"></div>

</div>

<div class="pacifier shadow">

<div class="pacifier_top"></div>

<div class="pacifier_middle"></div>

<div class="pacifier_bottom"></div>

</div>

</div>

付源码地址：http://codepen.io/parcon/pen/OVPKqg

做人要厚道，记得转载请注明出处

纯CSS动效——摇摆的娃娃

CSS样式

内容部分

文章评论