jquery crée un magnifique message d'invite de couche contextuelle effect

jquery crée un magnifique message d'invite de couche contextuelle effect_jquery

WBOY

Libérer： 2016-05-16 16:24:44

original

1408 Les gens l'ont consulté

Aujourd'hui, je vous propose un message d'invite de couche contextuelle sympa basé sur jquery. Cette page d'exemple s'initialise avec un bouton Go. Lorsque vous cliquez sur le bouton Aller, la couche contextuelle d'invite s'anime. Le rendu est le suivant :

Code d'implémentation.

code html :

Copier le code Le code est le suivant :

ALLER

              ✔
            Succès
                        Vérifiez votre courrier électronique pour une confirmation de réservation. À bientôt !

D'accord

Copier le code

Le code est le suivant :

  corps, html

        {

            hauteur : 100%;

            taille de police : 20 px ;

            famille de polices : Source Sans Pro ;

        >

        .b, .bb

        {

            position : absolue ;

            largeur : 100 % ;

            hauteur : 100%;

            arrière-plan : url("kje4L5j.jpg");

            pièce jointe d'arrière-plan : corrigé ;

            taille du fond : couverture ;

            position d'arrière-plan : centre ;

        >

        .bb

        {

            arrière-plan : url("bDBs0et.jpg");

            pièce jointe d'arrière-plan : corrigé ;

            taille du fond : couverture ;

            position d'arrière-plan : centre ;

            affichage : aucun ;

        >

        #allez

        {

            position : absolue ;

            haut : 30px ;

            gauche : 50%;

            transformer : traduire (-50 %, 0 %);

            couleur : blanc ;

            bordure : 0;

            arrière-plan : #71c341;

            largeur : 100 px ;

            hauteur : 30px ;

            rayon de bordure : 6 px ;

            taille de police : 1rem;

            transition : facilité d'arrière-plan 0,2 s ;

            contour : aucun ;

        >

        #go:survoler

        {

            arrière-plan : #8ecf68;

        >

        #go:actif

        {

            arrière-plan : #5a9f32;

        >

        .message

        {

            position : absolue ;

            haut : -200px ;

            gauche : 50%;

            transformer : traduire (-50 %, 0 %);

            largeur : 300 px ;

            fond : blanc ;

            rayon de bordure : 8 px ;

            remplissage : 30 px ;

            text-align: center;

            poids de la police : 300 ;

            couleur : #2c2928;

            opacité : 0 ;
            transition : top 0,3 s cube-bézier (0,31, 0,25, 0,5, 1,5), opacité 0,2 s, facilité d'entrée et de sortie ;

        >

        .message .check

        {

            position : absolue ;

            haut : 0 ;

            gauche : 50%;

            transformer : traduire (-50 %, -50 %) échelle (4);

            largeur : 120 px ;

            hauteur : 110px ;

            arrière-plan : #71c341;

            couleur : blanc ;

            taille de police : 3,8rem ;

            rembourrage supérieur : 10 px ;

            rayon de bordure : 50 % ;

            opacité : 0 ;

            transition : transformation 0,2s 0,25s cube-bézier (0,31, 0,25, 0,5, 1,5), opacité 0,1s 0,25s facilité d'entrée-sortie ;

        >

        .message .scaledown

        {

            transformer : traduire (-50 %, -50 %) échelle (1);

            opacité : 1 ;

        >

        .messagep

        {

            taille de police : 1.1rem ;

            marge : 25px 0px;

            remplissage : 0 ;

        >

        .message p:ntième-enfant(2)

        {

            taille de police : 2,3rem ;

            marge : 40px 0px 0px 0px ;

        >

        .message #ok

        {

            position : relative ;

            couleur : blanc ;

            bordure : 0;

            arrière-plan : #71c341;

            largeur : 100 % ;

            hauteur : 50px ;

            rayon de bordure : 6 px ;

            taille de police : 1,2rem ;

            transition : facilité d'arrière-plan 0,2 s ;

            contour : aucun ;

        >

        .message #ok:survol

        {

            arrière-plan : #8ecf68;

        >

        .message #ok:actif

        {

            arrière-plan : #5a9f32;

        >

        .viens

        {

            haut : 150 px ;

            opacité : 1 ;

        >

Les utilisateurs de jQuery ont des problèmes avec jQuery.直接使用到自己的项目中去。