css模拟骨骼动画

html:

    <div class="item-1">
        <div class="item-2">
            <div class="item-3"></div>
        </div>
    </div>

css:

<style>
        .item-1, .item-2, .item-3 {
            width: 100vw;
            background: url(./img/1-1.png) no-repeat center;
            background-size: contain;
            transform-origin: 50% 0;
            display: inline-block;
            animation: ani-1 1s ease-in-out infinite;
        }
        .item-1 {
            height: calc(385px / 4);
            position: relative;
        }
        .item-2 {
            background-image: url(./img/1-2.png);
            height: calc(940px / 4);
            position: absolute;
            top: 100%;
        }
        .item-3 {
            background-image: url(./img/1-3.png);
            height: calc(314px / 4);
            position: absolute;
            top: calc(100% - 20px);
        }
        @keyframes ani-1 {
            0% { transform: rotate(5deg); }
            50% { transform: rotate(-5deg);}
            100% { transform: rotate(5deg);}
        }
    </style>

1-1.png

1-2.png

1-3.png