CSS3中式餐具 | 茶具 | 杯子

CSS3 Tea Set

css3, cup

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

.stripe-bg {
    background: repeating-linear-gradient(0deg, white, white 5px, #F66 5px, #F66 6px);
}
html {
    background: #9CC;
    height: 100vh;
    overflow: hidden;
}
.tea-set {
    margin: 10vh auto;
    padding-top: 100px;
    width: 400px;
    border-bottom: 100px solid #663300;
}
.tea-set > *,
.tea-set cup {
    display: inline-block;
}
.cup {
    width: 60px;
    position: relative;
    margin-left: 33.33333333px;
}
.cup .body {
    height: 60px;
    width: 100%;
    background: repeating-linear-gradient(0deg, white, white 5px, #F66 5px, #F66 6px);
    border-top: 10px solid #F66;
    border-radius: 0 0 20px 20px;
    margin-bottom: -5px;
}
.cup .handle {
    height: 30px;
    width: 15px;
    border: 6px solid #F66;
    position: absolute;
    top: 15px;
}
.cup .left {
    left: -20px;
    border-radius: 60px 0 0 60px;
    border-right: 0;
}
.cup .right {
    right: -20px;
    border-radius: 0 60px 60px 0;
    border-left: 0;
}
.teapot-wrapper {
    width: 133.33333333px;
    margin: 0 0 -5px 40px;
}
.teapot-wrapper .teapot {
    width: 33.33333333px;
    left: 50px;
    position: relative;
}
.teapot-wrapper .teapot .body {
    background: linear-gradient(0deg, #F66, white);
    height: 133.33333333px;
}
.teapot-wrapper .teapot .body:before,
.teapot-wrapper .teapot .body:after {
    content: "";
    height: 133.33333333px;
    width: 100px;
    position: absolute;
    background: linear-gradient(0deg, #F66, white);
    border-radius: 50%;
}
.teapot-wrapper .teapot .body:before {
    left: -50px;
}
.teapot-wrapper .teapot .body:after {
    right: -50px;
}
.teapot-wrapper .teapot .spout {
    position: absolute;
    transform: rotate(210deg);
    border-radius: 0 0 20px 0;
    box-shadow: #F66 15px 10px 0 5px;
    height: 30px;
    width: 20px;
    left: 85px;
    top: 25px;
}
.teapot-wrapper .teapot .top {
    z-index: -1;
    position: absolute;
    top: -40px;
    left: -35px;
    width: 100px;
    height: 50px;
    background: repeating-linear-gradient(0deg, white, white 5px, #F66 5px, #F66 6px);
    border-top: #F66 solid 10px;
}
.teapot-wrapper .teapot .top:before,
.teapot-wrapper .teapot .top:after {
    content: "";
    height: 120%;
    width: 30%;
    position: absolute;
    background: #9CC;
    border-radius: 50%;
    top: -10%;
}
.teapot-wrapper .teapot .top:before {
    left: -14%;
}
.teapot-wrapper .teapot .top:after {
    right: -14%;
}
.teapot-wrapper .teapot .lid {
    z-index: -2;
    position: absolute;
    top: -76.66666667px;
    left: -35px;
    width: 100px;
    border-radius: 50px 50px 0 0;
    height: 50px;
    background: repeating-linear-gradient(0deg, white, white 5px, #F66 5px, #F66 6px);
}
.teapot-wrapper .teapot .lid .topper {
    margin: -5px auto;
    background: #F66;
    height: 10px;
    width: 20px;
    border-radius: 20px 20px 0 0;
}
.teapot-wrapper .teapot .handle {
    z-index: -1;
    height: 50px;
    width: 50px;
    border: 10px solid #F66;
    position: absolute;
    top: 15px;
    left: -80px;
    border-radius: 60px 0px 0px 60px;
    border-right: 0;
}

HTML

CSS3 Tea Set

css3, cup

编辑器支持Emmet

快捷键

CSS3 Tea Set

css3, cup

CSS3 一款中间带图标的响应式分隔线

CSS3 杯中猫

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：