Mettre en œuvre des annonces swing gauche et droite sur la page d'accueil-js tutoriel-php.cn

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

php中世界最好的语言

Libérer： 2018-05-24 14:07:39

original

2148 Les gens l'ont consulté

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>

Copier après la connexion

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

Copier après la connexion

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

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

Copier après la connexion

Définissez le style du tableau :

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

Dessinez les punaises en haut de la ficelle :

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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!