Maison > Article > interface Web > Comment utiliser du CSS pur pour obtenir l'effet spécial de ramasser de la bière pression (code source ci-joint)
Le contenu de cet article explique comment utiliser du CSS pur pour réaliser les effets spéciaux de la bière pression (code source ci-joint). J'espère qu'il le fera. être utile pour vous aider.
https://github.com/comehope/front-end-daily -challenges
définit dom. Le conteneur contient un élément .keg
représentant un tonneau de vin et un élément .glass
représentant un verre à bière. Le tonneau à vin a 2 éléments enfants, .handle
représente la poignée, .pipe
représente la sortie d'eau, et le verre à vin a 1 élément enfant .beer
représente la bière :
<div> <div> <span></span> <span></span> </div> <div> <span></span> </div> </div>
Affichage centré :
body { margin: 0; height: 100vh; display: flex; justify-content: center; background: linear-gradient( lightslategray 300px, #333 300px ); }
Définir les dimensions du conteneur et les attributs communs des pseudo-éléments :
.container { width: 700px; height: 300px; position: relative; } .container *::before, .container *::after { content: ''; position: absolute; }
Dessiner un tonneau de vin :
.keg { position: absolute; width: 90px; height: 200px; background: linear-gradient( to right, #777 70px, #555 70px ); bottom: 0; left: 310px; }
Dessiner une conduite d'eau et son support :
.keg .pipe { position: absolute; width: 10px; height: 40px; background-color: #ccc; top: 33px; left: 10px; } .keg .pipe::before { width: 40px; height: 20px; background: radial-gradient( circle at 10px 10px, #eee 7px, #ccc 7px, #ccc 10px, transparent 10px ), linear-gradient( #ccc 50%, #999 50% ); border-radius: 10px; top: -2px; left: -5px; }
Dessinez l'anse :
.keg .handle { position: absolute; border-style: solid; border-width: 50px 10px 0 10px; border-color: black transparent transparent transparent; top: -10px; left: 5px; } .keg .handle::before { width: 20px; height: 10px; background-color: #ccc; top: -60px; left: -10px; border-radius: 5px 5px 0 0; } .keg .handle::after { width: 10px; height: 20px; background-color: #ccc; top: -20px; left: -5px; }
Dessinez le verre à vin :
.glass { position: absolute; width: 70px; height: 100px; color: rgba(255, 255, 255, 0.3); background-color: currentColor; bottom: 0; left: 300px; border-radius: 5px; } .glass::before { width: 50px; height: 40px; border: 10px solid; top: 20px; right: -20px; border-radius: 0 40% 40% 0; clip-path: inset(0 0 0 72%); }
Tirez la bière et la mousse dans le verre :
.beer { position: absolute; width: 60px; height: 80px; background-color: rgba(255, 206, 84, 0.8); bottom: 15px; left: 5px; border-radius: 0 0 5px 5px; border-top: solid rgba(255, 206, 84, 0.8); } .beer::before { width: inherit; height: 15px; background-color: #eee; top: -15px; border-radius: 5px 5px 0 0; }
Continuer Descendez et animez.
Ajoutez l'effet d'animation de la poignée du verre à vin enfoncée :
.keg .handle { transform-origin: center 50px; animation: handle 5s infinite; } @keyframes handle { 10%, 60% { transform: rotate(0deg); } 20%, 50% { transform: rotate(-90deg); } }
Ajoutez l'effet d'animation de la bière remplie :
.beer { animation: fillup 5s infinite; } @keyframes fillup { 0%, 20% { height: 0px; border-width: 0px; } 40% { height: 40px; } 80%, 100% { height: 80px; border-width: 5px; } }
Ajoutez l'animation de mousse de bière montante Effet :
.beer::before { animation: wave 0.5s infinite alternate, fillup-foam 5s linear infinite; } @keyframes fillup-foam { 0%, 20% { top: 0; height: 0; } 60%, 100% { top: -15px; height: 15px; } } @keyframes wave { from { transform: skewY(-3deg); } to { transform: skewY(3deg); } }
Augmente l'effet de la bière coulant de la sortie d'eau :
.keg .pipe::after { width: 10px; background-color: rgba(255, 206, 84, 0.5); animation: flow 5s infinite; } @keyframes flow { 0%, 15% { top: 40px; height: 0; } 20% { height: 115px; } 40% { height: 75px; } 55% { top: 40px; height: 50px; } 60%, 100% { top: 80px; height: 0; } }
Enfin, augmente l'effet de glissement du verre :
.glass { animation: slide 5s ease infinite; } @keyframes slide { 0% { left: 0; filter: opacity(0); } 20%, 80% { left: 300px; filter: opacity(1); } 100% { left: 600px; filter: opacity(0); } }
Vous avez terminé !
Recommandations associées :
Comment utiliser du CSS pur pour implémenter un effet d'animation en sablier
Comment utiliser CSS et D3 pour implémenter un ensemble de lanternes (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!