CSS3可爱的熊猫和竹子

CSS3 Panda and plants 可用于动物园网站。

css3, animal

《three.js使用多个渐变torus模拟光环光晕》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

html,
body {
    background: #FEF2D8;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
*,
*:before,
*:after {
    box-sizing: border-box;
    position: relative;
}
body {
    background: #BBD149;
}
.background {
    position: relative;
    width: 550px;
    height: 300px;
}
.plant-1 {
    left: 5px;
}
.plant-2 {
    left: 75px;
}
.bowl {
    position: absolute;
    top: 200px;
    left: 250px;
    width: 60px;
    height: 30px;
    border-radius: 100%;
    background: #FEE225;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
}
.cable {
    position: absolute;
    top: -110px;
    left: 30px;
    width: 3px;
    height: 110px;
    background: #74B530;
}
.leaf {
    width: 30px;
    height: 20px;
    background: #115635;
}
.leaf-1 {
    position: absolute;
    border-bottom-right-radius: 30px;
    border-top-left-radius: 30px;
    left: 2px;
    animation: fly 1s infinite;
}
.leaf-2 {
    position: absolute;
    top: 25px;
    left: -30px;
    border-bottom-left-radius: 30px;
    border-top-right-radius: 30px;
    animation: fly 1s infinite;
}
.leaf-3 {
    position: absolute;
    top: 50px;
    left: 2px;
    border-bottom-right-radius: 30px;
    border-top-left-radius: 30px;
    animation: fly .9s infinite;
}
.leaf-4 {
    position: absolute;
    top: 75px;
    left: -30px;
    border-bottom-left-radius: 30px;
    border-top-right-radius: 30px;
    animation: fly 1s infinite;
}
.leaf-5 {
    position: absolute;
    top: -20px;
    left: -25px;
    border-bottom-left-radius: 30px;
    border-top-right-radius: 30px;
    animation: fly .7s infinite;
}
.panda {
    position: absolute;
    top: 100px;
    left: 175px;
}
.head {
    width: 60px;
    height: 60px;
    background: #fff;
    border-radius: 100%;
    animation: own 2s .5s infinite;
}
.head::after {
    position: absolute;
    top: -10px;
    left: -5px;
    width: 30px;
    height: 30px;
    background: #333;
    border-radius: 100%;
    content: "";
    animation: ear 2s .5s infinite;
}
.head::before {
    position: absolute;
    top: -10px;
    left: 35px;
    width: 30px;
    height: 30px;
    background: #333;
    border-radius: 100%;
    content: "";
    animation: ear 2s .5s infinite;
}
.face {
    width: 60px;
    height: 60px;
    background: #fff;
    border-radius: 100%;
    z-index: 2;
}
.eye {
    width: 20px;
    height: 27px;
    background: #333;
    border-radius: 100%;
}
.eye::after {
    position: absolute;
    content: "";
    top: 10px;
    left: 7px;
    width: 5px;
    height: 5px;
    background: #fff;
    border-radius: 100%;
    animation: blink 2.3s .6s infinite;
}
.eye-left {
    position: absolute;
    top: 10px;
    left: 7px;
    transform: rotate(30deg);
}
.eye-right {
    position: absolute;
    top: 10px;
    left: 33px;
    transform: rotate(-30deg);
}
.nose {
    top: 35px;
    left: 22px;
    width: 15px;
    height: 10px;
    background: #333;
    border-radius: 100%;
}
.body {
    top: -5px;
    left: 0px;
    width: 60px;
    height: 75px;
    background: #fff;
    border-radius: 100%;
}
.arm {
    width: 23px;
    height: 55px;
    background: #333;
    border-radius: 100%;
}
.arm-right {
    position: absolute;
    top: -5px;
    left: 45px;
    transform: rotate(-30deg);
    animation: arm-right 2.3s .6s infinite;
}
.arm-left {
    position: absolute;
    top: -5px;
    left: -10px;
    transform: rotate(30deg);
    animation: arm-left 2.3s .6s infinite;
}
.leg {
    width: 25px;
    height: 50px;
    background: #333;
    border-radius: 100%;
}
.leg-left {
    position: absolute;
    top: 25px;
    left: -3px;
    transform: rotate(10deg);
    animation: leg-left 2.3s .6s infinite;
}
.leg-right {
    position: absolute;
    top: 25px;
    left: 35px;
    transform: rotate(-10deg);
    animation: leg-right 2.3s .6s infinite;
}
@keyframes fly {
    50% {
        transform: rotate(10deg)
    }
}
@keyframes own {
    50% {
        transform: rotate(-10deg)
    }
}
@keyframes ear {
    50% {
        transform: translateY(5px)
    }
}
@keyframes leg-left {
    50% {
        transform: rotate(-10deg)
    }
}
@keyframes leg-right {
    50% {
        transform: rotate(10deg)
    }
}
@keyframes arm-left {
    50% {
        transform: rotate(40deg)
    }
}
@keyframes arm-right {
    50% {
        transform: rotate(-40deg)
    }
}
@keyframes blink {
    25%, 65% {
        background: #333;
    }
    60%,
    70% {
        background: #fff;
    }
}

HTML

CSS3 Panda and plants 可用于动物园网站。

css3, animal

编辑器支持Emmet

快捷键

CSS3 Panda and plants 可用于动物园网站。

css3, animal

纯CSS3构建的竹林和国宝熊猫图

CSS3可爱的小松鼠和坚果

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：