CSS3 口袋妖怪数码精灵蛋

Pokemon Go Egg

CSS3, egg

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
body {
    background: radial-gradient(#e6fbe7, #cdf7ed);
    display: flex;
    justify-content: center;
    align-items: center;
}
.title {
    position: absolute;
    top: 100px;
    font-family: 'Lato', sans-serif;
}
.egg {
    width: 106px;
    height: 135px;
    background: -webkit-radial-gradient(30% 20%, #FEFFEE, #D5CBA7);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    box-shadow: 5px 5px 60px -20px black;
    overflow: hidden;
    animation: egganim 14s ease-in-out 0s infinite;
    transform-origin: 50% 90%;
}
.greenpatch {
    position: relative;
    top: 60px;
    left: 45px;
    width: 40px;
    height: 50px;
    background: #93B16A;
    border-radius: 90% 70% 80% 100%;
    border: 2px solid #8daa64;
}
.greenpatch2 {
    position: relative;
    top: 50px;
    left: -10px;
    width: 40px;
    height: 50px;
    background: #7a9354;
    border-radius: 40% 90% 50% 50% / 60% 90% 10% 20%;
    border: 2px solid #8daa64;
}
.greenpatch3 {
    position: relative;
    top: -120px;
    left: -20px;
    width: 40px;
    height: 50px;
    background: #93B16A;
    border-radius: 40% 90% 50% 50% / 60% 50% 50% 50%;
    border: 2px solid #8daa64;
}
.greenpatch4 {
    position: relative;
    top: -170px;
    left: 70px;
    width: 40px;
    height: 30px;
    background: #7a9354;
    border-radius: 40% 90% 50% 50% / 60% 50% 50% 50%;
    border: 2px solid #8daa64;
}
.greenpatch5 {
    position: relative;
    top: -140px;
    left: 82px;
    width: 7px;
    height: 10px;
    background: #93B16A;
    border-radius: 40% 90% 50% 50% / 60% 50% 50% 50%;
    border: 2px solid #8daa64;
}
.shadow {
    position: absolute;
    top: 510px;
    width: 420px;
    height: 90px;
    background: radial-gradient(ellipse at center, #f7f5f4 0%, rgba(242, 243, 182, 0.83) 11%, rgba(203, 193, 116, 0.51) 32%, rgba(222, 250, 233, 0.21) 52%, rgba(222, 250, 233, 0) 66%);
    z-index: -1;
}
@keyframes egganim {
    0% {
        transform: rotateZ(0deg);
    }
    1% {
        transform: rotateZ(15deg);
    }
    2% {
        transform: rotateZ(0deg);
    }
    6% {
        transform: rotateZ(0deg);
    }
    7% {
        transform: rotateZ(-15deg);
    }
    8% {
        transform: rotateZ(0deg);
    }
    40% {
        transform: rotateZ(0deg);
    }
    41% {
        transform: rotateZ(-15deg);
    }
    42% {
        transform: rotateZ(0deg);
    }
    43% {
        transform: rotateZ(0deg);
    }
    44% {
        transform: rotateZ(15deg);
    }
    45% {
        transform: rotateZ(0deg);
    }
    77% {
        transform: rotateZ(0deg);
    }
    78% {
        transform: rotateZ(-15deg);
    }
    79% {
        transform: rotateZ(0deg);
    }
    80% {
        transform: rotateZ(0deg);
    }
    81% {
        transform: rotateZ(15deg);
    }
    82% {
        transform: rotateZ(0deg);
    }
    96% {
        transform: rotateZ(0deg);
    }
    97% {
        transform: rotateZ(-15deg);
    }
    98% {
        transform: rotateZ(0deg);
    }
}

HTML

Pokemon Go Egg

CSS3, egg

编辑器支持Emmet

快捷键

Pokemon Go Egg

CSS3, egg

CSS3 口袋妖怪游戏中的红白双色球图案

CSS3 ASCII码画的会动的小孩子

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：