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

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

不言

Libérer： 2018-08-22 10:43:11

original

3910 Les gens l'ont consulté

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

Comment utiliser du CSS pur pour obtenir leffet danimation dun bouton tridimensionnel avec un éclat métallique (code source ci-joint)

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>

Copier après la connexion

Le conteneur est affiché dans le centre :

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

Ajouter du gloss avec des pseudo éléments :

.box {
    position: relative;
}

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

Copier après la connexion

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

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

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

Copier après la connexion

Enfin, masquez le conteneur Contenu extérieur :

.box {
    overflow: hidden;
}

Copier après la connexion

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!