css绘制一个可爱饺子眨眼动画效果代码-html代码-BFW代码库

css绘制一个可爱饺子眨眼动画效果代码

代码语言：html

所属分类：动画

代码描述：css绘制一个可爱饺子眨眼动画效果代码

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

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        *,
        *:after,
        *:before {
            box-sizing: border-box;
        }

:root {
            --bg: rgba(255, 255, 255, 1);
            --size: 100;
            --unit: calc((var(--size) /400) * 1vmin);
            --border-size: calc(5 * var(--unit));
            --border-color: rgba(0, 0, 0, 1);
            --dumpling: linen;
            --dumpling-shadow: antiquewhite;
            --transparent: rgba(0, 0, 0, 0);
        }

        body {
            display: grid;
            place-items: center;
            height: 100vh;
            width: 100vw;
            margin: 0;
            padding: 0;
            background: seashell;
        }

        .dumpling {
            height: calc(300 * var(--unit));
            width: calc(300 * var(--unit));

            position: relative;
        }

        .dumpling--top {
            height: 50%;
            width: 65%;

            position: absolute;
            top: 55%;
            left: 50%;
            transform: translate(-50%, -50%);

            border: var(--border-size)solid var(--border-color);
            border-radius: 50%;

            clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 50%);

            background: var(--dumpling);
        }

        .dumpling--bottom {
            height: 25%;
            width: 65%;

            position: absolute;
            top: 54.5%;
            left: 50%;
            transform: translate(-50%, -50%);

            border: var(--border-size)solid var(--border-color);
            border-radius: 50%;

            clip-path: polygon(0% 50%, 100% 50%, 100% 100%, 0% 100%);
            background: var(--dumpling);
        }

        .dumpling--spine {
            height: 70%;
            width: 85%;

            position: absolute;
            top: 55%;
            left: 50%;
            transform: translate(-50%, -50%);

            border: var(--border-size)solid var(--border-color);
            border-radius: 50%;

            clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 50%);

            /* background: conic-gradient(red, orange, yellow, green, blue); */
            background-repeat: none;
            background: linear-gradient(
            var(--transparent) calc(50% - var(--border-size)),
            var(--border-color) calc(50% - var(--border-size))
            ),
            repeating-conic-gradient(
            var(--border-color) 0deg 1deg,
            var(--dumpling) 1.5deg 15deg,
            var(--border-color) 15deg 16deg,
            var(--dumpling-shadow) 16.5deg 30deg
            );
        }

        .dumpling--top-face {
            height: 50%;
            width: 50%;

            position: absolute;
            top: 40%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .dumpling--face-eye {
            position: absolute;
            top: .........完整代码请登录后点击上方下载按钮下载查看