Effect preview

Online demo

Press the "click preview" button on the right to preview on the current page, and click the link to preview in full screen.

https://codepen.io/comehope/pen/wjZoGV

Interactive video tutorial

This video is interactive. You can pause the video at any time and edit the code in the video.

Please use chrome, safari, edge to open and watch.

https://scrimba.com/c/cD8yKHb

Source code download

Please download all the source code of the daily front-end combat series from github:

https://github.com/comehope/front-end-daily-challenges

Code interpretation

The dom is defined, and the container contains the bulletin board, the string for hanging the bulletin board and the three studs for fixing the rope:

<div class="signboard">
    <div class="sign">THANKS</div>
    <div class="strings"></div>
    <div class="pin top"></div>
    <div class="pin left"></div>
    <div class="pin right"></div>
</div>

Center:

html, body {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at center 60%, white, sandybrown);
}

Define the overall size of the billboard:

.signboard {
    width: 400px;
    height: 300px;
}

Set the style of the board:

.signboard {
    position: relative;
}

.sign {
    width: 100%;
    height: 200px;
    background: burlywood;
    border-radius: 15px;
    position: absolute;
    bottom: 0;
}

Set the text style with sculpting effect:

.sign {
    color: saddlebrown;
    font-family: sans-serif;
    font-weight: bold;
    text-align: center;
    line-height: 200px;
    text-shadow: 0 2px 0 rgba(255, 255, 255, 0.3),
                0 -2px 0 rgba(0, 0, 0, 0.7);
}

Draw the string:

.strings {
    width: 150px;
    height: 150px;
    border: 5px solid brown;
    position: absolute;
    border-right: none;
    border-bottom: none;
    transform: rotate(45deg);
    top: 38px;
    left: 122px;
}

Draw the pin at the top of the string:

.pin {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    position: absolute;
}

.pin.top {
    background: gray;
    left: 187px;
}

Draw the pushpins on the left and right sides of the board:

.pin.left,
.pin.right {
    background: brown;
    top: 110px;
    box-shadow: 0 2px 0 rgba(255, 255, 255, 0.3);
}

.pin.left {
    left: 80px;
}

.pin.right {
    right: 80px;
}

Finally, let the sign shake:
(here, as suggested by Xiaolei, it has been modified to use the top pushpin as the rotation axis, which is better than the original effect.)

.signboard {
    animation: swing 1.5s ease-in-out infinite alternate;
    transform-origin: 200px 13px;
}

@keyframes swing {
    from {
        transform: rotate(10deg);
    }

    to {
        transform: rotate(-10deg);
    }
}

be accomplished!

Original address: https://segmentfault.com/a/119000014983030