css绘制鸡蛋效果-html代码-BFW代码库

代码语言：html

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">

    <style>
        html {
            height: 100%;
        }
        body {
            background: radial-gradient(#CCC, #222);
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
            overflow: hidden;
        }
        .title {
            position: fixed;
            left: 0;
            right: 0;
            bottom: 50%;
            margin-bottom: 14vw;
            text-align: center;
            font-weight: 100;
            font-size: 3vw;
            color: #FFF;
            opacity: 0.25;
        }
        .egg-wrapper + .title::before {
            content: "css egg";
        }
        .egg-wrapper + .egg-wrapper + .title::before {
            content: "css eggs";
        }
        input {
            position: fixed;
            z-index: 1;
            bottom: 50%;
            width: 15vw;
            height: 20vw;
            cursor: pointer;
            opacity: 0;
            margin-bottom: -10vw;
        }
        .stage {
            position: absolute;
            z-index: -2;
            width: 100vw;
            height: 150vw;
            perspective: 50vw;
            transition: filter 2s;
        }
        .stage .light {
            width: 100%;
            height: 100%;
            background: #FFF;
            border-radius: 50%;
            transform: rotateX(80deg);
        }
        .egg-wrapper {
            position: relative;
            width: 15vw;
            height: 20vw;
            margin: 0 0.3vw;
            border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;
        }
        .egg-wrapper:not(.rotate) {
            animation-name: move;
            animation-duration: 3s;
            animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
            animation-iteration-count: infinite;
        }
        .egg-wrapper.rotate {
            transform: scale(1, -1);
            z-index: -1;
            opacity: 1;
            margin-top: -1vw;
            opacity: 0.25;
            -webkit-mask-image: linear-gradient(tobottom, rgba(0, 0, 0, 0) 0%, black 100%);
        }
        .egg-wrapper .egg {
            position: relative;
            width: 100%;
            height: 100%;
            border-radius: inherit;
            overflow: hidden;
            background: #DDD;
            transform: translate3d(0, 0, 0) rotate(0deg);
            transform-origin: center 60% !important;
            animation-name: wobble;
            animation-duration: 3s;
            animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
            animation-iteration-count: infinite;
        }
        .egg-wrapper .egg .fill {
            position: absolute;
            left: -12%;
            top: -10%;
            width: 130%;
            height: 124%;
            border-radius: inherit;
            box-shadow: inset 0 0 0 2.5vw #FFF;
            opacity: 0.4;
            transition: filter 2s;
        }
        .egg-wrapper .egg .shading {
            position: absolute;
            left: 10%;
            top: 27%;
            width: 60%;
            height: 85%;
            background: #000;
            border-radius: inherit;
            transform: rotate(-20deg);
            opacity: 0.25;
            transition-property: filter, opacity;
            transition-duration: 2s;
        }
        .egg-wrapper .egg .key {
            position: absolute;
            left: 55%;
            top: 5%;
            width: 35%;
            height: 55%;
            background: #F4F4F4;
            border-radius: inherit;
            transform: rotate(-20deg);
            transition-property: filter, background;
            transition-duration: 2s;
        }
        .egg-wrapper .egg .highlight {
            position: absolute;
            left: 70%;
            top: 5%;
            width: 20%;
            height: 30%;
            background: #FFF;
            border-radius: inherit;
            transform: rotate(-20deg);
            transition: filter 2s;
        }
        .egg-wrapper .egg .egg-shadow {
            position: absolute;
            right: -33%;
            top: 36%;
            width: 40%;
            height: 50%;
            border-radius: 50%;
            background: #000;
            opacity: 0.2;
            transition-property: filter, opacity;
            transition-duration: 2s;
            animation-name: move;
            animation-duration: 3s;
            animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
            animation-iteration-count: infinite;
        }
        .egg-wrapper .shadow {
            position: absolute;
            left: 8.6vw;
            top: 3.5vw;
            width: 100%;
            height: 100%;
            border-radius: inherit;
            perspective: 50vw;
            transition-property: filter, opacity;
            transition-duration: 2s;
        }
        .egg-wrapper .shadow .main {
            position: absolute;
            right: 0;
            width: 400%;
            height: 88%;
            border-radius: inherit;
            transform-origin: center bottom;
            transform: rotateX(90deg) rotateZ(90deg);
            opacity: 0.57;
        }
        .egg-wrapper .shadow .main::before {
            content: "";
            display: block;
            width: 100%;
            height: 100%;
            border-radius: inherit;
            backgroun.........完整代码请登录后点击上方下载按钮下载查看

css绘制鸡蛋效果

网友评论0

css使用details标签实现水平折叠面板效果代码

svg+css文字排版布局艺术效果代码

div+css布局实现波浪背景动画卡片效果代码

css布局实现砖头墙文字效果代码

div+Css布局实现拟态立体质感checkbox开关切换效果代码

div+Css布局实现checkbox播放与停止播放滑动切换按钮代码

div+css布局实现拍照按钮点击效果代码

div+Css布局耳机盒子效果代码

div+css布局实现立体质感radio播放按键按下切换单选效果代码

css实现div丁字形布局代码