CSS3 食物熊猫网站标识

Source: http://foodpanda.hu

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    background: #f17250;
}
.foodpanda {
    width: 240px;
    height: 238px;
    background: #231f20;
    -webkit-border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;
    margin: 50px 0 0 108px;
    position: relative;
}
.foodpanda:after {
    content: "";
    width: 240px;
    height: 240px;
    background: #fff;
    -webkit-border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;
    margin: 100px;
    position: absolute;
    -webkit-transform: scale(0.88, 0.88);
    margin: -1px 0 0 0;
}
.ear-left {
    background: #231f20;
    width: 60px;
    height: 70px;
    position: absolute;
    margin: -5px 0 0 115px;
    -webkit-border-radius: 60px/70px;
    transform: rotate(35deg);
}
.ear-right {
    background: #231f20;
    width: 60px;
    height: 70px;
    position: absolute;
    margin: -5px 0 0 280px;
    -webkit-border-radius: 60px/70px;
    transform: rotate(-35deg);
}
.eye-right {
    background: #231f20;
    width: 65px;
    height: 85px;
    position: absolute;
    margin: 60px 0 0 240px;
    -webkit-border-radius: 65px/80px;
    transform: rotate(-30deg);
    z-index: 1;
}
.eye-left {
    background: #231f20;
    width: 65px;
    height: 85px;
    position: absolute;
    margin: 60px 0 0 150px;
    -webkit-border-radius: 65px/80px;
    transform: rotate(30deg);
    z-index: 1;
}
.nose:before {
    position: absolute;
    content: "";
    width: 55px;
    height: 100px;
    background: #fff;
    -webkit-border-radius: 0px 50px 30px 30px;
    transform: rotate(25deg);
    top: 100px;
    left: 0;
    -webkit-transform-origin: 100% 100%;
}
.nose:after {
    position: absolute;
    content: "";
    position: absolute;
    width: 54px;
    height: 100px;
    background: #fff;
    -webkit-border-radius: 50px 0px 30px 30px;
    -webkit-transform-origin: 100% 100%;
    top: 77px;
    left: 56px;
    transform: rotate(-25deg);
}
.nose {
    position: absolute;
    margin: 5px 0 0 176px;
    z-index: 4;
    -webkit-transform: scale(0.9, 0.85);
}
.iris:before {
    content: "";
    background: #fff;
    position: absolute;
    width: 30px;
    height: 30px;
    margin: 85px 0 0 252px;
    -webkit-border-radius: 20px;
    transform: rotate(-30deg);
    z-index: 3;
}
.iris:after {
    content: "";
    background: #fff;
    position: absolute;
    width: 30px;
    height: 30px;
    margin: 85px 0 0 173px;
    -webkit-border-radius: 20px;
    transform: rotate(-30deg);
    z-index: 3;
}
.iris-bug:before {
    content: "";
    background: #231f20;
    position: absolute;
    width: 18px;
    height: 18px;
    margin: 91px 0 0 258px;
    -webkit-border-radius: 20px;
    transform: rotate(-30deg);
    z-index: 3;
}
.iris-bug:after {
    content: "";
    background: #231f20;
    position: absolute;
    width: 18px;
    height: 18px;
    margin: 91px 0 0 179px;
    -webkit-border-radius: 20px;
    transform: rotate(-30deg);
    z-index: 3;
}
.mouth {
    background: #231f20;
    width: 92px;
    height: 83px;
    position: absolute;
    margin: 124px 0 0 183px;
    -webkit-border-radius: 90px/83px;
    z-index: 2;
}
.mouth-inner {
    background: #fff;
    width: 50px;
    height: 50px;
    position: absolute;
    margin: 143px 0 0 204px;
    -webkit-border-radius: 50px/50px;
    z-index: 3;
}
.nose-s:before {
    position: absolute;
    content: "";
    width: 55px;
    height: 100px;
    background: #231f20;
    -webkit-border-radius: 0px 50px 30px 30px;
    transform: rotate(30deg);
    top: 100px;
    left: 0;
    -webkit-transform-origin: 100% 100%;
}
.nose-s:after {
    position: absolute;
    content: "";
    position: absolute;
    width: 54px;
    height: 100px;
    background: #231f20;
    -webkit-border-radius: 50px 0px 30px 30px;
    -webkit-transform-origin: 100% 100%;
    top: 73px;
    left: 67px;
    transform: rotate(-30deg);
}
.nose-s {
    position: absolute;
    margin: 65px 0 0 190px;
    z-index: 4;
    -webkit-transform: scale(0.6, 0.6);
}
.nose-top {
    position: absolute;
    width: 32px;
    height: 27px;
    background: #231f20;
    -webkit-border-radius: 50% 50% 50% 50%/35% 35% 70% 70%;
    margin: 125px 0 0 213px;
    z-index: 4;
}
.nose-bottom {
    width: 7px;
    height: 25px;
    background: #231f20;
    position: absolute;
    z-index: 4;
    margin: 145px 0 0 225px;
}
#content {
    width: 500px;
    height: 400px;
    margin: 0 auto;
}
p {
    font-family: "Lobster", cursive;
    color: #fff;
    font-size: 3em;
    float: left;
    margin: 0 0 0 100px;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6);
}

HTML

Source: http://foodpanda.hu

编辑器支持Emmet

快捷键

Source: http://foodpanda.hu

纯CSS绘制的购物袋（可用于电商网站）

CSS3 情人节礼物 - 红玫瑰

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：