纯CSS3实现的逼真的鸡蛋摇摆动画

Minimal Easter Egg 鸭蛋/鸡蛋/鹅蛋3D模型。

css3, 3d, egg

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    overflow: hidden;
    height: 100vh;
    background: -webkit-linear-gradient(0deg, #ebe9e6, #f6f6f7);
    background: linear-gradient(90deg, #ebe9e6, #f6f6f7);
}
egg,
egg:before,
egg:after {
    display: block;
    position: relative;
    content: "";
    width: 185px;
    height: 250px;
    border-radius: 50%;
    -webkit-animation: 5s ease-in-out infinite both;
    animation: 5s ease-in-out infinite both;
}
egg:after {
    -webkit-animation-name: tilt;
    animation-name: tilt;
    position: absolute;
    top: 0;
    background: -webkit-radial-gradient(25% 25%, circle, rgba(0, 0, 0, 0) 40%, #fcfcfb), -webkit-linear-gradient(0deg, #eae2d5, #e7dcc6, #fcfcfb, #fcfcfb);
    background: radial-gradient(circle at 25% 25%, rgba(0, 0, 0, 0) 40%, #fcfcfb), linear-gradient(90deg, #eae2d5, #e7dcc6, #fcfcfb, #fcfcfb);
    box-shadow: inset 3px -10px 10px -10px #e4dac8, -5px 25px 10px -25px #7a6653;
    -webkit-transform-origin: center bottom;
    -ms-transform-origin: center bottom;
    transform-origin: center bottom;
}
@-webkit-keyframes tilt {
    33% {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg);
    }
    66% {
        -webkit-transform: rotate(-2deg);
        transform: rotate(-2deg);
    }
}
@keyframes tilt {
    33% {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg);
    }
    66% {
        -webkit-transform: rotate(-2deg);
        transform: rotate(-2deg);
    }
}
egg:before {
    -webkit-animation-name: stretch;
    animation-name: stretch;
    background: -webkit-radial-gradient(circle at center bottom, #e5dccd, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
    background: radial-gradient(circle at center bottom, #e5dccd, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
    box-shadow: 0 0 15px #e5dccd;
    -webkit-transform-origin: center bottom;
    -ms-transform-origin: center bottom;
    transform-origin: center bottom;
}
@-webkit-keyframes stretch {
    from, to {
        -webkit-transform: rotate(-90deg) scaleY(5) scaleX(0.3);
        transform: rotate(-90deg) scaleY(5) scaleX(0.3);
    }
    33% {
        -webkit-transform: rotate(-90deg) scaleY(5.5) scaleX(0.28);
        transform: rotate(-90deg) scaleY(5.5) scaleX(0.28);
    }
    66% {
        -webkit-transform: rotate(-90deg) scaleY(4.5) scaleX(0.32);
        transform: rotate(-90deg) scaleY(4.5) scaleX(0.32);
    }
}
@keyframes stretch {
    from, to {
        -webkit-transform: rotate(-90deg) scaleY(5) scaleX(0.3);
        transform: rotate(-90deg) scaleY(5) scaleX(0.3);
    }
    33% {
        -webkit-transform: rotate(-90deg) scaleY(5.5) scaleX(0.28);
        transform: rotate(-90deg) scaleY(5.5) scaleX(0.28);
    }
    66% {
        -webkit-transform: rotate(-90deg) scaleY(4.5) scaleX(0.32);
        transform: rotate(-90deg) scaleY(4.5) scaleX(0.32);
    }
}

HTML

Minimal Easter Egg 鸭蛋/鸡蛋/鹅蛋3D模型。

css3, 3d, egg

编辑器支持Emmet

快捷键

Minimal Easter Egg 鸭蛋/鸡蛋/鹅蛋3D模型。

css3, 3d, egg

结合SVG滤镜和CSS3动画实现逼真的火焰动画

使用CSS3 PerspectiveTransform实现的逼真3D地球自转动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：