css3でpacdo beanのアニメーション効果を実現

1. 予備知識

z インデックス属性

z-index属性は要素の重なり順、つまり要素レベルを設定するために使用され、z-index値が大きいほど要素のレベルが高くなります。要素が重なると、上位の要素が下位の要素に重なるため、下位の要素の重なっている部分が見えにくくなります。

z-index属性は、それが設定されている要素position: relative | absolute | fixed、および親要素に属性 set が設定されている子要素に対してのみ機能しdisplay: flex、他の要素には影響しません。

元のリンク: http://t.csdn.cn/QHVOd

box-shadow プロパティ

box-shadow プロパティを介してボックスの影を設定します。box-shadow には 4 つの値があります。

最初の値は水平オフセット (水平シャドウ) です。つまり、シャドウが元のボックスから右にオフセットされる距離 (値が負の場合は左) です。
2 番目の値は垂直オフセット (垂直シャドウ) です。元のボックスからシャドウが下方向 (値が負の場合は上方向) にどのくらいオフセットされているかを示します。
3 番目の値はブラー半径 (シャドウサイズ)、つまりシャドウに適用されるブラーの量です。
4 番目の値は影の基本色です。任意の長さと色の単位を使用してこれらの値を定義できます。

元リンク: CSS Learning 15: Box Shadow_css Shadow_Far and Near 2021 Blog-CSDN Blog

2. コード

インデックス.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>

スタイル.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);
    }
}