CSS3 小猪储蓄罐

钱币掉落动画+小猪点头致谢动画

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 1650
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    background: black;
}
.contenedor {
    position: relative;
    width: 700px;
    height: 700px;
    border-radius: 100%;
    background: #23016d;
    background: -moz-linear-gradient(top, #23016d 0%, #573099 100%);
    background: -webkit-linear-gradient(top, #23016d 0%, #573099 100%);
    background: linear-gradient(to bottom, #23016d 0%, #573099 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#23016d', endColorstr='#573099', GradientType=0);
    margin: 90px auto;
    overflow: hidden;
}
.chan {
    position: absolute;
    margin: 30px 30px;
}
.body {
    position: absolute;
    width: 330px;
    height: 291px;
    border-radius: 100%;
    background: #e8a6b0;
    margin: 172px 152px;
}
.body3 {
    position: absolute;
    width: 300px;
    height: 271px;
    border-radius: 100%;
    background: #eb9ea9;
    margin: 185px 159px;
}
.cabeza {
    position: absolute;
    width: 221px;
    height: 212px;
    -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    background: #e8a6b0;
    border: 3px solid #FCB3B3;
    margin: 142px 330px;
    animation: baja7 3s linear infinite;
    -moz-animation: baja7 3s linear infinite;
    -webkit-animation: baja7 3s linear infinite;
}
.orejas {
    position: absolute;
    width: 90px;
    height: 90px;
    border-radius: 30px 30px 30px 90px;
    background: #F78A9E;
    transform: rotate(112deg);
    -moz- transform: rotate(112deg);
    -webkit-transform: rotate(112deg);
    margin: -12px -12px;
}
.orejas::before {
    content: "";
    position: absolute;
    width: 90px;
    height: 90px;
    border-radius: 30px 30px 30px 90px;
    background: #F78A9E;
    transform: rotate(45deg);
    -moz- transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    margin: -152px -50px;
}
.ojos {
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 100%;
    background: white;
    margin: 102px 30px
}
.ojos::before {
    content: "";
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 100%;
    background: white;
    margin: 0px 132px
}
.iris {
    position: absolute;
    width: 19px;
    height: 19px;
    border-radius: 100%;
    background: black;
    margin: 9px 9px;
    animation: baja3 3s linear infinite;
    -moz-animation: baja3 3s linear infinite;
    -webkit-animation: baja3 3s linear infinite;
}
.iris::before {
    content: "";
    position: absolute;
    width: 19px;
    height: 19px;
    border-radius: 100%;
    background: black;
    margin: 0px 124px
}
.hocico {
    position: absolute;
    width: 102px;
    height: 75px;
    border-radius: 100%;
    background: #F78A9E;
    margin: 121px 60px
}
.nariz {
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 100%;
    background: black;
    margin: 30px 30px;
}
.nariz::before {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 100%;
    background: black;
    margin: 0px 30px;
}
.legs {
    position: absolute;
    width: 70px;
    height: 90px;
    background: #eb9ea9;
    border-radius: 0 0 30px 30px;
    border-bottom: 30px solid black;
    margin: 412px 251px;
    transform: rotate(12deg);
    -moz-transform: rotate(12deg);
    -webkit-transform: rotate(12deg);
}
.legs::before {
    content: "";
    position: absolute;
    width: 70px;
    height: 90px;
    background: #eb9ea9;
    border-bottom: 30px solid black;
    border-radius: 0 0 30px 30px;
    margin: -30px 121px;
    transform: rotate(-24deg);
    -moz-transform: rotate(-24deg);
    -webkit-transform: rotate(-24deg);
}
.legs3 {
    position: absolute;
    width: 70px;
    height: 90px;
    background: #eb9ea9;
    border-radius: 0 0 30px 30px;
    border-bottom: 30px solid black;
    margin: 370px 152px;
    transform: rotate(12deg);
    -moz-transform: rotate(12deg);
    -webkit-transform: rotate(12deg);
}
.cola {
    position: absolute;
    width: 70px;
    height: 70px;
    border-radius: 100%;
    border-left: 12px solid #FCB3B3;
    border-bottom: 12px solid #FCB3B3;
    margin: 212px 112px
}
.cola::before {
    content: "";
    position: absolute;
    width: 25px;
    height: 21px;
    border-radius: 100%;
    border: 7px solid #FCB3B3;
    margin: 3px -3px
}
.cola::after {
    content: "";
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 100%;
    border-right: 12px solid #FCB3B3;
    margin: -30px -30px
}
.coin {
    position: absolute;
    width: 70px;
    height: 70px;
    border-radius: 100%;
    background: #E0A80F;
    border: 7px solid #DDB349;
    margin: -121px 251px;
    animation: baja 3s linear infinite;
    -moz-animation: baja 3s linear infinite;
    -webkit-animation: baja 3s linear infinite;
}
@keyframes baja {
    0%, 25% {
        margin: -121px 251px;
    }
    75%,
    85%,
    100% {
        margin: 231px 251px;
    }
}
@-moz-keyframes baja {
    0%, 25% {
        margin: -121px 251px;
    }
    75%,
    85%,
    100% {
        margin: 231px 251px;
    }
}
@-webkit-keyframes baja {
    0%, 25% {
        margin: -121px 251px;
    }
    75%,
    85%,
    100% {
        margin: 231px 251px;
    }
}
@keyframes baja3 {
    0%, 25% {
        margin: 7px 9px;
    }
    45% {
        margin: 3px 9px;
    }
    75%,
    85%,
    100% {
        margin: 9px 9px;
    }
}
@-moz-keyframes baja3 {
    0%, 25% {
        margin: 7px 9px;
    }
    45% {
        margin: 3px 9px;
    }
    75%,
    85%,
    100% {
        margin: 9px 9px;
    }
}
@-webkit-keyframes baja3 {
    0%, 25% {
        margin: 7px 9px;
    }
    45% {
        margin: 3px 9px;
    }
    75%,
    85%,
    100% {
        margin: 9px 9px;
    }
}
@keyframes baja7 {
    0%, 25%, 35%, 45%, 55%, 65% {
        margin: 142px 330px;
    }
    75%,
    85% {
        margin: 152px 330px;
    }
    95%,
    100% {
        margin: 142px 330px;
    }
}
@-moz-keyframes baja7 {
    0%, 25%, 35%, 45%, 55%, 65% {
        margin: 142px 330px;
    }
    75%,
    85% {
        margin: 152px 330px;
    }
    95%,
    100% {
        margin: 142px 330px;
    }
}
@-webkit-keyframes baja7 {
    0%, 25%, 35%, 45%, 55%, 65% {
        margin: 142px 330px;
    }
    75%,
    85% {
        margin: 152px 330px;
    }
    95%,
    100% {
        margin: 142px 330px;
    }
}

HTML

钱币掉落动画+小猪点头致谢动画

编辑器支持Emmet

快捷键

钱币掉落动画+小猪点头致谢动画

CSS3 嵌套的正方形动画

CSS3 文本字符组成的表情图案

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：