CSS3 外婆卡通肖像蛋糕

CSS3 Homemade Grandma's Cake

css3, cake

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

* {
    box-sizing: border-box;
    position: relative;
}
*::after,
*::before {
    box-sizing: border-box;
    content: "";
    position: absolute;
}
body {
    height: 100vh;
    width: 100vw;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: #87d1ff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 0;
    overflow: hidden;
}
.grandma-cake {
    height: 50vmin;
    width: 50vmin;
    color: #f7c247;
}
.top {
    height: 9.99%;
    width: 70.05%;
    background-color: #947774;
    position: absolute;
    top: 30.2%;
    -webkit-transform: rotateX(10deg) skew(-56.5deg);
    transform: rotateX(10deg) skew(-56.5deg);
    -webkit-transform-origin: bottom center;
    transform-origin: bottom center;
}
.side {
    height: 40%;
    width: 62%;
    color: #f5cb68;
    background-color: currentcolor;
    background-image: -webkit-linear-gradient(top, #947774 15%, #e2b48f 15%, #dfa577 25%, currentcolor 25%, currentcolor 65%, #e2b48f 65%, #e2b48f 72.5%, #947774 72.5%, #947774 92.5%, #e2b48f 92.5%);
    background-image: linear-gradient(to bottom, #947774 15%, #e2b48f 15%, #dfa577 25%, currentcolor 25%, currentcolor 65%, #e2b48f 65%, #e2b48f 72.5%, #947774 72.5%, #947774 92.5%, #e2b48f 92.5%);
    left: 70%;
    position: absolute;
    top: 40%;
    -webkit-transform: rotateY(75.95deg) skewY(-9deg);
    transform: rotateY(75.95deg) skewY(-9deg);
    -webkit-transform-origin: left center;
    transform-origin: left center;
}
.front {
    height: 40%;
    width: 70%;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: currentcolor;
    background-image: -webkit-linear-gradient(top, #7e5955 15%, #dfa577 15%, #dfa577 25%, currentcolor 25%, currentcolor 65%, #dfa577 65%, #dfa577 72.5%, #7e5955 72.5%, #7e5955 92.5%, #dfa577 92.5%);
    background-image: linear-gradient(to bottom, #7e5955 15%, #dfa577 15%, #dfa577 25%, currentcolor 25%, currentcolor 65%, #dfa577 65%, #dfa577 72.5%, #7e5955 72.5%, #7e5955 92.5%, #dfa577 92.5%);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    z-index: 1;
}
.front::after {
    /* shadow */
    
    height: 36.5%;
    width: 100%;
    background-image: -webkit-linear-gradient(left, #71aacd, #79b8df);
    background-image: linear-gradient(to right, #71aacd, #79b8df);
    border-radius: 0 0 2vmin .5vmin;
    bottom: -36.5%;
    left: 0;
    -webkit-transform: skewX(-70deg);
    transform: skewX(-70deg);
    -webkit-transform-origin: top center;
    transform-origin: top center;
}
.front::before {
    /* side shadow */
    
    height: 16%;
    width: 216.4%;
    background-image: -webkit-linear-gradient(top, #6da2c4, #71aacd);
    background-image: linear-gradient(to bottom, #6da2c4, #71aacd);
    border-radius: 100% 0 0 40%;
    bottom: -40.1%;
    left: -56.05%;
    -webkit-transform: rotateY(75deg) skewY(-5.5deg);
    transform: rotateY(75deg) skewY(-5.5deg);
    -webkit-transform-origin: left center;
    transform-origin: left center;
}
.face {
    height: 40%;
    width: 30%;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.glasses {
    height: 40%;
    width: 100%;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #ff84cb;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.glasses .left,
.glasses .right {
    height: 100%;
    width: 40%;
    background-color: rgba(238, 238, 238, 0.4);
    box-shadow: 0 0 0 0.6vmin #ff84cb, 0 0 0 0.9vmin #d472aa;
    z-index: 1;
}
.glasses .left::before,
.glasses .right::before {
    /* eye */
    
    height: 1.4vmin;
    width: 1.4vmin;
    background-color: #282828;
    border-radius: 100%;
    top: calc(50% - .7vmin);
}
.glasses .left {
    border-radius: 20% 100% 40% 100%;
}
.glasses .left::before {
    right: .6vmin;
}
.glasses .bridge {
    height: 20%;
    width: 20%;
    background-color: currentcolor;
    border: 0.2vmin solid #d472aa;
    border-width: .2vmin 0;
    box-sizing: content-box;
    top: 20%;
}
.glasses .right {
    border-radius: 100% 20% 100% 40%;
}
.glasses .right::before {
    left: .6vmin;
}
.smile {
    height: 20%;
    width: 18%;
    border: 0.6vmin solid #282828;
    border-top-color: transparent;
    border-radius: 100%;
}
.left-arm,
.right-arm {
    background-color: currentcolor;
    border-radius: 1vmin;
    color: #282828;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-transform-origin: bottom center;
    transform-origin: bottom center;
}
.left-arm::before,
.right-arm::before {
    /* hand */
    
    height: 3vmin;
    width: 3vmin;
    background-color: currentcolor;
    border-radius: 100%;
    left: -1.25vmin;
    top: -1.5vmin;
}
.left-arm {
    height: 40%;
    width: 1vmin;
    -webkit-animation: 1.5s infinite ease-in forwards alternate left-arm;
    animation: 1.5s infinite ease-in forwards alternate left-arm;
    left: 10%;
    top: 30%;
    -webkit-transform: rotateZ(-30deg);
    transform: rotateZ(-30deg);
}
.right-arm {
    height: 30%;
    width: 1vmin;
    -webkit-animation: .4s infinite ease-in-out forwards alternate right-arm;
    animation: .4s infinite ease-in-out forwards alternate right-arm;
    position: absolute;
    right: 20%;
    top: 25%;
    -webkit-transform: rotateZ(30deg);
    transform: rotateZ(30deg);
}
.right-arm .cane {
    height: 100%;
    width: 1.5vmin;
    background-color: #cf432d;
    left: -1.5vmin;
    position: absolute;
    top: calc(-100% - 1vmin);
}
.right-arm .cane::before {
    /* cane handle */
    
    height: 6vmin;
    width: 6vmin;
    border: 1.5vmin solid #cf432d;
    border-color: transparent #cf432d #cf432d transparent;
    border-radius: 100%;
    bottom: -2.9vmin;
    -webkit-transform: rotateZ(45deg);
    transform: rotateZ(45deg);
}
.right-arm .cane::after {
    /* cane rubber cover */
    
    height: 1.5vmin;
    width: 1.5vmin;
    background-color: #282828;
    border-radius: 1.5vmin 1.5vmin 0 0;
    /* for the curved start of the handle */
    
    box-shadow: 4.5vmin 14.25vmin 0 0 #cf432d;
    top: -.75vmin;
}
/* Animation */

@-webkit-keyframes left-arm {
    to {
        -webkit-transform: rotateZ(-35deg);
        transform: rotateZ(-35deg);
    }
}
@keyframes left-arm {
    to {
        -webkit-transform: rotateZ(-35deg);
        transform: rotateZ(-35deg);
    }
}
@-webkit-keyframes right-arm {
    to {
        -webkit-transform: rotateZ(35deg);
        transform: rotateZ(35deg);
    }
}
@keyframes right-arm {
    to {
        -webkit-transform: rotateZ(35deg);
        transform: rotateZ(35deg);
    }
}

HTML

CSS3 Homemade Grandma's Cake

css3, cake

编辑器支持Emmet

快捷键

CSS3 Homemade Grandma's Cake

css3, cake

HTML5 CSS3 愤怒的小鸟卡通形象

CSS3 萌萌的猫头鹰肖像

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：