css3 realizes the animation effect of pacdo beans

1. Preliminary knowledge

z-index attribute

z-indexThe attribute is used to set the stacking order of elements, or element level. z-indexThe larger the value, the higher the level of the element. When elements overlap, higher-level elements will overlap lower-level elements, so that the overlapping parts of lower-level elements are obscured.

z-indexThe attribute can only work on the element where it is set position: relative | absolute | fixedand the child elements whose parent element has the attribute set display: flex. It has no effect on other elements.

Original link: http://t.csdn.cn/QHVOd

box-shadow property

Set the box shadow via the box-shadow property. box-shadow has four values:

The first value is the horizontal offset (horizontal shadow): that is, the distance to the right that the shadow is offset from the original box (or left if the value is negative).
The second value is the vertical offset (vertical shadow): how far the shadow is offset downwards (or upwards, if the value is negative) from the original box.
The third value is the blur radius (shadow size): the amount of blur applied in the shadow.
The fourth value is the base color of the shadow. You can use any length and color units to define these values.

Original link: CSS Learning 15: Box Shadow_css Shadow_Far and Near 2021 Blog-CSDN Blog

2. Code

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div class="eat-peas">
        <div class="head">
            <div class="eye"></div>
        </div>
        <div class="pea"></div>
    </div>
</body>
</html>

style.css

body {
    margin: 0;
}
.eat-peas {
    width: 600px;
    height: 200px;
    /* background-color: antiquewhite; */
    margin: 150px auto 0;
    position: relative;
}
.eat-peas .head {
    width: 200px;
    height: 200px;
    /* border: 2px solid blue; */
    border-radius: 50%;
    /* 超出圆的部分设置为隐藏 */
    overflow: hidden;
    position: relative;
    /* 提高head的层级 */
    z-index: 2;
}
/* 首尾元素 */
.eat-peas .head::before {
    content: "";
    display: block;
    width: 200px;
    height: 100px;
    background-color: tomato;
    /* 设置旋转基点 */
    transform-origin: bottom center;
    /* 往上旋转30度 */
    transform: rotate(0deg);
    /* alternate往上走了以后 在动画的下一个周期 逆向动画 */
    animation: rotate1 0.4s ease infinite alternate;
}
.eat-peas .head::after {
    content: "";
    display: block;
    width: 200px;
    height: 100px;
    background-color: tomato;
    transform-origin: top center;
    transform: rotate(0deg);
    animation: rotate2 0.4s ease infinite alternate;
}
.eye {
    width: 20px;
    height: 20px;
    background-color: black;
    border: 2px solid white;
    border-radius: 50%;
    position: absolute;
    top:20px;
    left: 75px;
}
.eat-peas .pea {
    width: 40px;
    height: 40px;
    background-color: tomato;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 150px;
    margin-top: -20px;
    /* 盒子阴影：水平偏移 竖直阴影 模糊程度 背景颜色*/
    box-shadow: 70px 0px 0px tomato,70px 0px 0px tomato,140px 0px 0px tomato,210px 0px 0px tomato,280px 0px 0px tomato,350px 0px 0px tomato;
    animation: move 0.8s ease infinite;
}


/* animation动画 */
@keyframes rotate1 {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(-30deg);
    }
}

@keyframes rotate2 {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(30deg);
    }
}

@keyframes move {
    from {
        transform: translateX(0px);
    }
    to {
        transform: translateX(-70px);
    }
}