Comment utiliser du CSS pur pour obtenir l'effet d'animation d'un bouton tridimensionnel avec un éclat métallique (code source ci-joint)

Le contenu de cet article explique comment utiliser du CSS pur pour réaliser l'effet d'animation de boutons tridimensionnels avec un éclat métallique (code source ci-joint). J'espère qu'il a une certaine valeur de référence. cela vous sera utile.

Aperçu de l'effet

Téléchargement du code source

https://github.com/comehope/front-end-daily-challenges/ tree/master/004-metallic-glossy-3d-button-effects

Interprétation du code

Définir un conteneur dans le dom :

<div class="box">BUTTON</div>

Le conteneur est affiché dans le centre :

html, body {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: skyblue;
}

Définissez le style 2D du bouton Afin de faciliter l'ajustement de la taille du bouton, des variables sont utilisées :

.box {
    background: linear-gradient(to right, gold, darkorange);
    color: white;
    --width: 250px;
    --height: calc(var(--width) / 3);
    width: var(--width);
    height: var(--height);
    text-align: center;
    line-height: var(--height);
    font-size: calc(var(--height) / 2.5);
    font-family: sans-serif;
    letter-spacing: 0.2em;
    border: 1px solid darkgoldenrod;
    border-radius: 2em;
}

Définissez le style 3D du bouton. :

.box {
    transform: perspective(500px) rotateY(-15deg);
    text-shadow: 6px 3px 2px rgba(0, 0, 0, 0.2);
    box-shadow: 2px 0 0 5px rgba(0, 0, 0, 0.2);
}

Définir l'effet d'animation du bouton Passer la souris :

.box:hover {
    transform: perspective(500px) rotateY(15deg);
    text-shadow: -6px 3px 2px rgba(0, 0, 0, 0.2);
    box-shadow: -2px 0 0 5px rgba(0, 0, 0, 0.2);
}

.box {
    transition: 0.5s;
}

Ajouter du gloss avec des pseudo éléments :

.box {
    position: relative;
}

.box::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, transparent, white, transparent);
    left: 0;
}

Définir l'effet d'animation de gloss :

.box::before {
    left: -100%;
    transition: 0.5s;
}

.box:hover::before {
    left: 100%;
}

Enfin, masquez le conteneur Contenu extérieur :

.box {
    overflow: hidden;
}

Terminé !

Recommandations associées :

Comment utiliser du CSS pur pour obtenir un effet d'animation de saut de texte (code source joint)

Comment utiliser CSS pour obtenir un dégradé Effet de bordures animées (avec code)

Comment utiliser CSS et le mode de mélange de couleurs pour obtenir un effet d'animation de chargeur (avec code)

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!