Comment créer un pop up d'animation avec un modal à l'aide de css?
J'ai déjà créé le modal dans le css, mais quand j'ai essayer de changer de transition, de sorte qu'elle apparaît plus comme un modal au lieu de s'atténuer, il ne fonctionne pas. J'ai essayé de modifier la durée et le type de transition, mais il ne semble pas s'appliquer. Suis-je à l'aide de la mauvaise transition?
Voir violon: https://jsfiddle.net/mtbh24uL/
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}
Mon objectif: avoir plus d'un effet pop up comme un vrai javascript modal. En gros, j'ai besoin de créer un modaux comme vous voyez dans l'image ci-dessous. Je ne suis pas sûr de ce que la meilleure approche est ou le meilleur plugin.
- Désolé, mais quel est votre objectif?
- mon but est de l'animation de la modale à être plus comme un réel javascript modal. Plus effet pop up.
- des conseils ou des conseils seraient appréciés.
Vous devez vous connecter pour publier un commentaire.
Vous pouvez définir un CSS animation et appeler cette animation lorsque vous cliquez sur le bouton. Vous pouvez réaliser cela avec l'ajout du code CSS suivant. Ce n'est qu'un exemple pour vous donner une idée approximative de la façon dont votre effet pourrait ressembler. À partir de ce point vous pouvez même optimiser et de contrôler l'animation.
CSS
CSS:
HTML:
En réponse à l'obtention de la courbe de la flèche, vous pouvez utiliser l' :après ou :avant de pseudo-élément. Quelque chose comme cela pour obtenir l'effet souhaité:
CSS