制作粽子

    * {
    	margin: 0;
    	padding: 0;
    }

    body {
    	color: #333;
    	height: 100vh;
    	margin: 0 auto;
    	display: flex;
    	justify-content: center;
    	align-items: center;
    	position: relative;
    }

    .zongzi-wrap {
    	position: relative;
    }

    .zongzi-body {
    	transform: rotate(-10deg);
    }

    /*  粽子外形 */
    .zongzi {
    	width: 0;
    	height: 0;
    	border-left: 120px solid transparent;
    	border-right: 120px solid transparent;
    	border-bottom: 200px solid #FFEDC8;
    	position: relative;

    }

    .round1,
    .round2,
    .round3 {
    	width: 238px;
    	height: 43px;
    	background: #FFEDC8;
    	border: 2px solid;
    	border-radius: 100% 100% 0 0/100px 100px 0 0;
    	transform: rotate(-59deg);
    	position: absolute;
    	left: -198px;
    	top: 67px;
    	z-index: -1;
    }

    .round2 {
    	left: -48px;
    	top: 64px;
    	transform: rotate(59deg);
    	z-index: -2;
    	width: 229px;
    }

    .round3 {
    	left: -126px;
    	top: 193px;
    	transform: rotate(180deg);
    	z-index: -3;
    	width: 236px;
    }

    /* 粽叶 */
    .ruoye {
    	position: absolute;
    }

    .ruoye {
    	position: relative;
    }

    .ruoye-left {
    	width: 234px;
    	height: 128px;
    	background: #87D15D;
    	border-radius: 0 0px 288px 86px/0 0 205px 103px;
    	transform: rotate(22deg);
    	position: absolute;
    	top: -79px;
    	left: -12px;
    	z-index: 2;
    }

    .ruoye-left::after {
    	content: "";
    	position: absolute;
    	right: -30px;
    	top: 36px;
    	background: #87D15D;
    	width: 112px;
    	height: 33px;
    	border-radius: 0 0 344px 326px/0 0 185px 211px;
    	transform: rotate(-51deg);
    }

    .ruoye-left .line1,
    .ruoye-left .line2,
    .ruoye-left .line3,
    .ruoye-left .line4 {
    	width: 234px;
    	height: 2px;
    	background: #49912C;
    	position: absolute;
    	top: -2px;
    	left: 3px;
    	z-index: 1;
    }

    .ruoye-left .line1-bg {
    	background: #333;
    	height: 3px;
    }

    .ruoye-left .line2 {
    	width: 242px;
    	top: 28px;
    	left: -2px;
    }

    .ruoye-left .line3 {
    	width: 233px;
    	top: 53px;
    	left: -2px;
    }

    .ruoye-left .line4 {
    	width: 211px;
    	top: 76px;
    	left: -2px;
    }

    .ruoye-right {
    	width: 100px;
    	height: 124px;
    	background: #87D15D;
    	border-radius: 0 0px 93px 66px/0 0 125px 70px;
    	transform: rotate(-24deg);
    	position: absolute;
    	right: -1px;
    	top: -102px;
    }

    .ruoye-right .line1,
    .ruoye-right .line2,
    .ruoye-right .line3,
    .ruoye-right .line4 {
    	width: 98px;
    	height: 2px;
    	background: #49912C;
    	position: absolute;
    	top: -2px;
    	left: 3px;
    	z-index: 1;
    }

    .ruoye-right .line1-bg {
    	background: #333;
    	height: 3px;
    }

    .ruoye-right .line2 {
    	width: 92px;
    	top: 20px;
    	left: 9px;
    }

    .ruoye-right .line3 {
    	width: 92px;
    	top: 40px;
    	left: 9px;
    }

    .ruoye-right .line4 {
    	width: 92px;
    	top: 60px;
    	left: 9px;
    }

    /* 眼睛 */
    .eye {
    	width: 20px;
    	height: 24px;
    	background: #27211C;
    	border-radius: 60%;
    	position: absolute;
    	top: 44px;
    	left: 80px;
    }

    .eye-right {
    	left: 136px;
    }

    .eye::after {
    	content: "";
    	position: absolute;
    	right: 5px;
    	top: 8px;
    	width: 5px;
    	height: 7px;
    	background: #FCF9F8;
    	border-radius: 50%;
    }

    /* 腮红 */
    .shy {
    	width: 24px;
    	height: 15px;
    	background: #FD8070;
    	border-radius: 50%;
    	position: absolute;
    	top: 73px;
    	left: 56px;
    }

    .shy-right {
    	top: 73px;
    	left: 152px;
    }

    .shy .line1,
    .shy .line2,
    .shy .line3 {
    	width: 2px;
    	height: 7px;
    	background: #FEAC99;
    	border-radius: 60%;
    	position: absolute;
    	left: 6px;
    	top: 4px;
    }

    .shy .line2 {
    	left: 11px;
    }

    .shy .line3 {
    	left: 16px;
    }

    /* 嘴巴 */
    .mouth {
    	width: 19px;
    	height: 28px;
    	background: #FABC9D;
    	border: 2px solid #2A160E;
    	border-radius: 2px 16px 37px 13px/2px 8px 47px 40px;
    	position: absolute;
    	top: 73px;
    	left: 107px;
    	overflow: hidden;
    }

    .mouth .round {
    	width: 18px;
    	height: 20px;
    	background: #FA756A;
    	border-radius: 38%;
    	position: absolute;
    	top: 10px;
    	left: 0;
    }

    /* 手 */
    .hand {
    	width: 3px;
    	height: 80px;
    	background: #2A160E;
    	transform: rotate(-52deg);
    	position: absolute;
    	left: 25px;
    	top: 12px;
    	z-index: -3;
    }

    .hand .round {
    	width: 14px;
    	height: 18px;
    	background: #2A160E;
    	border-radius: 0px 28px 12px;
    	position: absolute;
    	left: -14px;
    	top: -13px;
    	z-index: 2;
    	transform: rotate(155deg);
    }

    .hand-right {
    	left: 200px;
    	top: -19px;
    	transform: rotate(27deg);
    }

    .hand-right .round {
    	transform: rotate(-92deg);
    	left: 2px;
    }

    /* 脚 */
    .leg {
    	width: 3px;
    	height: 80px;
    	background: #2A160E;
    	transform: rotate(3deg);
    	position: absolute;
    	left: 112px;
    	top: 202px;
    	z-index: -3;
    }

    .leg::after {
    	content: "";
    	width: 27px;
    	height: 15px;
    	background: #2A160E;
    	border-radius: 60%;
    	position: absolute;
    	left: -1px;
    	bottom: -4px;
    	z-index: 2;
    	transform: rotate(-3deg);
    }

    .leg-right {
    	left: 166px;
    	top: 183px;
    	transform: rotate(-36deg);
    }

    .leg-right::after {
    	transform: rotate(-4deg);
    }

    /* 阴影 */
    .z-shadow {
    	width: 220px;
    	height: 16px;
    	background: #CECECE;
    	border-radius: 60%;
    	position: absolute;
    	top: 271px;
    	left: 25px;
    	z-index: -4;
    }

    /* 心-不规则 */
    .i-heart {
    	position: relative;
    	transform: rotate(-20deg);
    }

    .i-heart::before {
    	content: "";
    	width: 10px;
    	height: 10px;
    	border-radius: 50%;
    	background: #F1D6D5;
    	position: absolute;
    	left: -44px;
    	top: -17px;
    	z-index: 5;
    }

    .i-heart-l,
    .i-heart-r {
    	position: absolute;
    	top: -30px;
    	left: -50px;
    	width: 42px;
    	height: 80px;
    	background: #FF5E46;
    	border: 2px solid #120105;
    	border-radius: 60%;
    	transform: rotate(-31deg);
    }

    .i-heart-r {
    	top: -28px;
    	left: -29px;
    	transform: rotate(15deg);
    	width: 42px;
    	height: 74px;
    }

    .i-heart .mask {
    	position: absolute;
    	left: -38px;
    	top: -15px;
    	width: 28px;
    	height: 57px;
    	background: #FF5E46;
    	border-radius: 60%;
    }

    .i-heart .mask::after {
    	content: "";
    	position: absolute;
    	left: 8px;
    	top: 40px;
    	width: 24px;
    	height: 20px;
    	background: #FF5E46;
    	border-radius: 60%;
    }

    .i-heart-pos1 {
    	transform: rotate(-41deg);
    	top: -91px;
    	left: -28px;
    	z-index: -4;
    }

    .i-heart-pos2 {
    	transform: rotate(-41deg) scale(0.7);
    	top: -273px;
    	left: -88px;
    }

    .i-heart-pos2::before,
    .i-heart-pos3::before,
    .i-heart-pos4::before,
    .i-heart-pos5::before {
    	left: -2px;
    }

    .i-heart-pos3 {
    	top: -222px;
    	left: 70px;
    	transform: rotate(30deg) rotateY(180deg) scale(0.7);
    	z-index: -4;
    }

    .i-heart-pos4 {
    	top: -150px;
    	left: 110px;
    	transform: rotate(30deg) rotateY(180deg) scale(0.4);
    	z-index: -4;
    }

    .i-heart-pos5 {
    	top: -44px;
    	left: 71px;
    	transform: rotate(30deg) rotateY(180deg) scale(0.7);
    }


    /* 爱心动画 */
    .i-heart-pos1 {
    	animation: blow 0.8s ease-in-out infinite alternate;
    	transform-origin: right center;
    }

    @keyframes blow {
    	0% {
    		top: -135px;
    		left: -17px;
    		transform: rotate(-28deg) scale(1);
    		opacity: 0.5;
    	}

    	100% {
    		top: -150px;
    		left: 17px;
    		transform: rotate(-28deg) scale(1.2);
    		opacity: 1;
    	}
    }

    .i-heart-pos2 {
    	animation: blow2 0.8s ease-in-out infinite alternate;
    	transform-origin: center center;
    }

    @keyframes blow2 {
    	0% {
    		top: -273px;
    		left: -88px;
    		transform: rotate(-41deg) scale(0.7);
    		opacity: 0.5;
    	}

    	100% {
    		top: -288px;
    		left: -70px;
    		transform: rotate(-41deg) scale(0.8);
    		opacity: 1;
    	}
    }

    .i-heart-pos3 {
    	animation: blow3 0.8s ease-in-out infinite alternate;
    	transform-origin: center center;
    }

    @keyframes blow3 {
    	0% {
    		top: -222px;
    		left: 70px;
    		transform: rotate(30deg) rotateY(180deg) scale(0.7);
    		opacity: 0.5;
    	}

    	100% {
    		top: -232px;
    		left: 57px;
    		transform: rotate(30deg) rotateY(180deg) scale(0.8);
    		opacity: 1;
    	}
    }

    .i-heart-pos4 {
    	animation: blow4 0.8s ease-in-out infinite alternate;
    	transform-origin: center center;
    }

    @keyframes blow4 {
    	0% {
    		top: -150px;
    		left: 110px;
    		transform: rotate(30deg) rotateY(180deg) scale(0.4);
    		opacity: 0.5;
    	}

    	100% {
    		top: -155px;
    		left: 104px;
    		transform: rotate(30deg) rotateY(180deg) scale(0.5);
    		opacity: 1;
    	}
    }

    .i-heart-pos5 {
    	animation: blow5 0.8s ease-in-out infinite alternate;
    	transform-origin: center center;
    }

    @keyframes blow5 {
    	0% {
    		top: -44px;
    		left: 71px;
    		transform: rotate(30deg) rotateY(180deg) scale(0.7);
    		opacity: 0.5;
    	}

    	100% {
    		top: -54px;
    		left: 62px;
    		transform: rotate(30deg) rotateY(180deg) scale(0.8);
    		opacity: 1;
    	}
    }

    /* 手动画 */
    .hand-left {
    	animation: reach 0.75s ease-in-out infinite alternate;
    	transform-origin: right bottom;
    }

    @keyframes reach {
    	0% {
    		transform: rotate(-52deg);
    	}

    	100% {
    		transform: rotate(-152deg);
    	}
    }

    .hand-right {
    	animation: reach2 0.75s ease-in-out infinite alternate;
    	transform-origin: left bottom;
    }

    @keyframes reach2 {
    	0% {
    		transform: rotate(27deg);
    	}

    	100% {
    		transform: rotate(134deg);
    	}
    }

    /* 脚动画 */
    .leg-left {
    	transform-origin: center top;
    	animation: jump 0.75s ease-in-out infinite alternate;
    }

    @keyframes jump {
    	0% {
    		top: 202px;
    		transform: rotate(3deg);
    	}

    	100% {
    		top: 188px;
    		transform: rotate(-12deg);
    	}
    }

    .leg-right {
    	transform-origin: center top;
    	animation: jump2 0.75s ease-in-out infinite alternate;
    }

    @keyframes jump2 {
    	0% {
    		top: 183px;
    		transform: rotate(-36deg);
    	}

    	100% {
    		top: 203px;
    		transform: rotate(-3deg);
    	}
    }

    .zongzi-body {
    	animation: jump3 0.75s ease-in-out infinite alternate;
    }

    @keyframes jump3 {
    	0% {
    		transform: rotate(-10deg) translateY(0);
    	}

    	100% {
    		transform: rotate(-6deg) translateY(-15px);
    	}
    }


    /* 子 */
     .container {
            display: inline-block;
        }

        .typed-out {
            overflow: hidden;
            border-right: .15em solid orange;
            white-space: nowrap;
            animation:
                typing 1.4s steps(20, end) forwards;
            font-size: 1.6rem;
            width: 0;

        }

        @keyframes typing {
            from {
                width: 0
            }

            to {
                width: 100%
            }
        }