星巴克咖啡杯svg特效

css3 svg绘制逼真的星巴克logo饮料杯，3D阴影的咖啡杯ui特效。

HTML代码

CSS代码

.container {
    opacity: 0.9;
    width: 800px;
    height: 900px;
    background-position-x: -250px;
    background-position-y: 50px;
    background-size: 1300px;
    position: relative;
    overflow: hidden;

}

.cup {
    width: 395px;
    height: 550px;
    clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%);
    position: absolute;
    top: 180px;
    left: 202px;
    background: rgb(191, 190, 186);
    background: linear-gradient(90deg, rgba(191, 190, 186, 1) 0%, rgba(206, 204, 202, 1) 22%, rgba(234, 233, 230, 1) 66%, rgba(186, 186, 182, 1) 98%);
    opacity: 1;

    box-shadow: inset 114px -10px 46px 3px rgba(0, 0, 0, 0.75);
    z-index: 8;
}

.top {
    width: 422px;
    height: 150px;
    border-bottom: 5px solid #aeafa7;
    position: absolute;
    top: 80px;
    left: 190px;
    background: rgb(202, 202, 195);
    background: linear-gradient(90deg, rgba(202, 202, 195, 1) 0%, rgba(220, 219, 214, 1) 22%, rgba(238, 237, 233, 1) 47%, rgba(209, 207, 204, 1) 89%, rgba(161, 157, 148, 1) 100%);
    opacity: 1;
    overflow: hidden;
    border-radius: 50%;
    z-index: 11;
    box-shadow: 0px 13px 21px 0px rgba(0, 0, 0, 0.5);
}

.top-inner {
    width: 400px;
    height: 125px;
    border-right: 5px solid #8b887f;
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgb(246, 245, 241);
    background: linear-gradient(90deg, rgba(246, 245, 241, 1) 0%, rgba(247, 246, 244, 1) 33%, rgba(232, 228, 225, 1) 61%, rgba(149, 147, 139, 1) 80%, rgba(79, 74, 65, 1) 100%);
    opacity: 1;
    overflow: hidden;
    border-radius: 50%;
    z-index: 11;
}

.coffee {
    width: 400px;
    height: 125px;

    position: absolute;
    top: 55px;
    left: 10px;
    background: rgb(105, 91, 82);
    background: linear-gradient(90deg, rgba(105, 91, 82, 1) 0%, rgba(74, 65, 59, 1) 41%, rgba(52, 43, 36, 1) 69%, rgba(52, 30, 22, 1) 98%);
    opacity: 2;
    overflow: hidden;
    border-radius: 50%;
    z-index: 11;
    border-top: 5px solid #ba8c4e;
    box-shadow: 0px 1px 21px 0px #d3ac51, inset 0px -69px 41px 0px #231c16, inset 1px 7px 30px 13px #7d5238;
}


.bottom {
    width: 240px;
    height: 70px;
    z-index: 5;
    position: absolute;
    bottom: 145px;
    left: 280px;
    background: red;
    opacity: 1;
    overflow: hidden;
    border-radius: 0% 0% 50% 50% / 50% 50% 50% 50%;
    background: rgb(191, 190, 186);
    background: linear-gradient(90deg, rgba(191, 190, 186, 1) 0%, rgba(206, 204, 202, 1) 22%, rgba(234, 233, 230, 1) 66%, rgba(186, 186, 182, 1) 98%);
    box-shadow: inset 10px -28px 10px 3px rgba(0, 0, 0, 0.6), -63px 10px 80px 80px rgba(0, 0, 0, 0.4), -32px 17px 46px 7px rgba(0, 0, 0, 0.75);
}

.logo {
    position: absolute;
    top: 105px;
    left: 80px;
    opacity: 0.7;
}