Mettre en œuvre des annonces swing gauche et droite sur la page d'accueil

Cette fois, je vais vous présenter la mise en œuvre des publicités swinging à gauche et à droite dans la page front-end. Quelles sont les précautions à prendre pour mettre en œuvre les publicités swinging à gauche et à droite dans la page front-end. Voici un cas pratique, prenons. un regard.

Interprétation du code

Définissez dom, le conteneur contient un tableau d'affichage, une ficelle pour accrocher le tableau d'affichage et 3 punaises pour fixer la corde :

<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>

Centré affichage :

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

Définissez la taille globale du tableau d'affichage :

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

Définissez le style du tableau :

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

Définissez le style du texte avec effet gravure :

.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);
}

Dessinez la ficelle :

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

Dessinez les punaises en haut de la ficelle :

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

Dessinez les punaises à gauche et les côtés droits du tableau :

.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;
}

Enfin, laissez le panneau trembler :
(Ceci a été modifié selon la suggestion de Xiao Leilei d'utiliser la punaise supérieure comme axe de rotation, ce qui est meilleur que l'effet original)

.signboard {
    animation: swing 1.5s ease-in-out infinite alternate;
    transform-origin: 200px 13px;
}
@keyframes swing {
    from {
        transform: rotate(10deg);
    }
    to {
        transform: rotate(-10deg);
    }
}

Le tour est joué !

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée des étapes pour utiliser les interfaces en JS

Explication détaillée des étapes à mettre en évidence le li sélectionné dans l'implémentation de React

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!