Implement left and right swing ads in the front-end page

This time I will bring you the left and right swing ads on the front-end page. What are the precautions for realizing the left and right swing ads on the front-end page? Here is a practical case, let’s take a look.

Code Interpretation

Define dom, the container contains a bulletin board, a string to hang the bulletin board and 3 push pins to fix the rope:

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

Centered display:

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 bulletin board:

.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 engraving 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 thumbtacks on the top of the string:

.pin {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    position: absolute;
}
.pin.top {
    background: gray;
    left: 187px;
}

Draw the thumbtacks 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, make the sign shake:
(This has been modified according to Xiao Leilei's suggestion to use the top pushpin as the axis of rotation, 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);
    }
}

Done!

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Detailed explanation of the steps for using interfaces in JS

React implementation of selected li highlighting steps

The above is the detailed content of Implement left and right swing ads in the front-end page. For more information, please follow other related articles on the PHP Chinese website!