Tutoriels Email

Effets Textes

Effets CSS Textes

Utilisation du symbole magique .$

Le symbole magique .$ permet d’appliquer du code CSS sur un composant de WA-Fusion.
! On peut appliquer plusiers codes CSS au même bouton
Exemple: ombre + zoom + movement, etc

Faites un Copier-Coller des codes CSS dans vos projets

Adapter à votre besoin : taillle (px), couleurs (#320126) , scale (1;1)...

< Cliquez sur l'image pour l'agrandir

Tutoriel vidéo

EFFET COULEUR SURVOL

Lorem ipsum.
Dolor sit amet, consectetur
adipiscing

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént. (Bouton)

.$ {
                                    -webkit-transition-duration: 0.5s;
                                    -webkit-transition-timing-function: linear;
                                    box-shadow:0px 0 0 #ac38e2 inset;}
                                    .$:hover{-webkit-box-shadow: -900px 0 0 #80b1b5 inset;}

REMUER TEXTE

Lorem ipsum.
Dolor sit amet, consectetur
adipiscing

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént. (texte)

.$ {animation: wiggle 2s linear infinite;}
                                    @keyframes wiggle {
                                    0%, 7% {transform: rotateZ(0);}
                                    15% {transform: rotateZ(-15deg);}
                                    20% {transform: rotateZ(10deg);}
                                    25% { transform: rotateZ(-10deg);}
                                    30% {transform: rotateZ(6deg);}
                                    35% {transform: rotateZ(-4deg);}
                                    40%, 100% {transform: rotateZ(0);}}

SOULIGNER TEXTE "VAGUE"

Lorem ipsum.
Dolor sit amet, consectetur
adipiscing elit, sed do .

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént. (texte)

.$ { text-decoration-line: underline;
                                    text-decoration-color: #666;
                                    text-decoration-style: wavy;
                                    }

UP DOWN TEXTE

Lorem ipsum.
Dolor sit amet, consectetur
adipiscing

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént. (texte)

.$ {animation: hu__hu__ infinite 2s ease-in-out}
                                    @keyframes hu__hu__ {50% { transform: translateY(30px)}}

OMBRE TEXTE

Lorem ipsum.
Dolor sit amet, consectetur
adipiscing

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént. (texte)

.$ {filter:drop-shadow(1px 1px 2px #ac38e2);}

ZOOM TEXTE

Lorem ipsum.
Dolor sit amet, consectetur
adipiscing

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént. (texte)

.$ :hover{-webkit-transform: scale(1.1);transform: scale(1.1);}

SOULIGNER "POINTILLES"

Lorem ipsum.
Dolor sit amet, consectetur
adipiscing elit, sed do .

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént. (texte)

.$ { text-decoration-line: underline;
                                    text-decoration-color: red;
                                    text-decoration-style: dotted;
                                    }

INCLINAISON GAUCHE

Lorem ipsum.
Dolor sit amet, consectetur
adipiscing elit, sed do .

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént. (texte)

.$:hover{
                                    -webkit-transform: rotate(-10deg);}

INCLINAISON DROITE

Lorem ipsum.
Dolor sit amet, consectetur
adipiscing elit, sed do .

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént. (texte)

.$:hover{
                                    -webkit-transform: rotate(10deg);}

FOND TEXTE MULTI COLOR

Lorem ipsum.
Dolor sit amet, consectetur
adipiscing elit, sed do .

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént. (texte)

.$ {padding: 50px;
                                    animation: element 4s infinite;}
                                    @keyframes element {
                                    0% { background-color: #ac38e2; }
                                    50% { background-color: #4b2cdd; }
                                    100% { background-color: #d5dce8; }
                                    }

DÉFILER TEXTE "FLASH"

Lorem ipsum Dolor

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént. (texte)

.$ { position: relative;
                                    text-transform: uppercase;
                                    letter-spacing: 2px;
                                    background: linear-gradient(90deg, #dc143c, #fff, #000);
                                    background-repeat: no-repeat;
                                    background-size: 80%;
                                    animation: animate 6s infinite;
                                    -webkit-background-clip: text;
                                    -webkit-text-fill-color: rgba(255, 255, 255, 0)
                                    animation: animate 3s infinite;
                                    -webkit-background-clip: text;
                                    -webkit-text-fill-color: rgba(255, 255, 255, 0);}
                                    @keyframes animate { 0% {background-position: -500%; }
                                    100% { background-position: 500%;} }

OMBRE MULTICOLOR

Lorem ipsum

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént. (texte)

.$ {text-shadow:#ffae00 2px 2px 0,
                                    #ff00c0 3px 3px 0,
                                    #aa0306 5px 5px 0;}

SOULIGNER "TIRETS"

Lorem ipsum.
Dolor sit amet, consectetur
adipiscing elit, sed do .

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént. (texte)

.$ { text-decoration-line: underline;
                                    text-decoration-color: red;
                                    text-decoration-style: dashed;
                                    }

DÉFILEMENT TXT

Faire défiler un texte HTML+CSS

CODE HTML
<div class="marquee">
<p>Votre Texte à défiler ICI</p>
</div>

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént. (texte)

.$ {
                                    	line-height: 50px;
                                    	background-color: white;
                                    	color: #4b2cdd;
                                        white-space: nowrap;
                                        overflow: hidden;
                                        box-sizing: border-box;
                                        font-family: "Ropa sans";
                                        font-size: 20px;
                                    }
                                    .marquee p {
                                        display: inline-block;
                                        padding-left: 100%;
                                        animation: marquee 7s linear infinite;
                                    }
                                    @keyframes marquee {
                                        0%   { transform: translate(0, 0); }
                                        100% { transform: translate(-100%, 0); }
                                    }

OMBRE 3D

L O R E M

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént. (texte)

.$ {font-family: "Ropa sans";text-shadow: white 0.006em 0.006em 0.007em,
                                    #9c9c9c 1px 1px 1px,
                                    #9c9c9c 1px 2px 1px,
                                    #9c9c9c 1px 3px 1px,
                                    #9c9c9c 1px 4px 1px,
                                    #9c9c9c 1px 5px 1px,
                                    #9c9c9c 1px 6px 1px;}

ANIMATION

Lorem ipsum.
Dolor sit amet, consectetur

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént. (texte)

.${
                                    text-transform: uppercase;
                                    background-image: linear-gradient(
                                    -225deg,
                                    #231557 0%,
                                    #44107a 29%,
                                    #ff1361 67%,
                                    #fff800 100%
                                    );
                                    background-size: auto auto;
                                    background-clip: border-box;
                                    background-size: 200% auto;
                                    color: #fff;
                                    background-clip: text;
                                    text-fill-color: transparent;
                                    -webkit-background-clip: text;
                                    -webkit-text-fill-color: transparent;
                                    animation: textclip 2s linear infinite;
                                    display: inline-block;
                                    }
                                    @keyframes textclip {
                                    to {
                                    background-position: 200% center;
                                    }
                                    }

ANIMATION TXT SURVOL

L O R E M I P S

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént. (texte)

.$ :hover{
                                    text-transform: uppercase;
                                    background-image: linear-gradient(
                                    -225deg,
                                    #231557 0%,
                                    #44107a 29%,
                                    #ff1361 67%,
                                    #fff800 100%
                                    );
                                    background-size: auto auto;
                                    background-clip: border-box;
                                    background-size: 200% auto;
                                    color: #fff;
                                    background-clip: text;
                                    text-fill-color: transparent;
                                    -webkit-background-clip: text;
                                    -webkit-text-fill-color: transparent;
                                    animation: textclip 2s linear infinite;
                                    display: inline-block;
                                    }
                                    @keyframes textclip {
                                    to {
                                    background-position: 200% center;
                                    }
                                    }

EFFETS " 3D " TEXTES

Fusion

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént. (texte)

.$ {text-transform: uppercase;
                                        font-weight: 700;
                                           text-shadow: 1px 1px 1px #919191,
                                            1px 2px 1px #919191,
                                            1px 3px 1px #919191,
                                            1px 4px 1px #919191,
                                            1px 5px 1px #919191,
                                            1px 6px 1px #919191,
                                            1px 7px 1px #919191,
                                            1px 8px 1px #919191,
                                            1px 9px 1px #919191,
                                            1px 10px 1px #919191,
                                        1px 18px 6px rgba(16,16,16,0.4),
                                        1px 22px 10px rgba(16,16,16,0.2),
                                        1px 25px 35px rgba(16,16,16,0.2),
                                        1px 30px 60px rgba(16,16,16,0.4);
                                    }

TXT VERTICAL

Lorem

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént. (texte)

.$ {
                                    writing-mode: vertical-rl;
                                    text-orientation: upright;
                                    }

VERTICAL À DROITE

Lorem ipsum

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént. (texte)

.$ { writing-mode: vertical-rl;}

VERTICAL À GAUCHE

Lorem ipsum

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént. (texte)

.$ { writing-mode: vertical-lr;}

ANIMATION BRILLANT

Lorem ipsum.
Dolor sit amet, consectetur

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént. (texte)

                                    .$ {
                                      background: linear-gradient(90deg, #000, #fff, #000);
                                      background-repeat: no-repeat;
                                      background-size: 80%;
                                      animation: animate 7s linear infinite;
                                      -webkit-background-clip: text;
                                      -webkit-text-fill-color: rgba(255, 255, 255, 0);
                                    }
                                    
                                    @keyframes animate {
                                      0% {
                                        background-position: -500%;
                                      }
                                      100% {
                                        background-position: 500%;
                                      }
                                    }

TXT CLIGNOTANT

⚠ ATTENTION

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént. (texte)

                                    .$ {
                                      animation: blur .75s ease-out infinite;
                                      text-shadow: 0px 0px 5px #fff, 0px 0px 7px #fff;
                                    }
                                    
                                    @keyframes blur {
                                      from {
                                        text-shadow:0px 0px 10px #fff,
                                          0px 0px 10px #fff, 
                                          0px 0px 25px #fff,
                                          0px 0px 25px #fff,
                                          0px 0px 25px #fff,
                                          0px 0px 25px #fff,
                                          0px 0px 25px #fff,
                                          0px 0px 25px #fff,
                                          0px 0px 50px #fff,
                                          0px 0px 50px #fff,
                                          0px 0px 50px #7B96B8,
                                          0px 0px 150px #7B96B8,
                                          0px 10px 100px #7B96B8,
                                          0px 10px 100px #7B96B8,
                                          0px 10px 100px #7B96B8,
                                          0px 10px 100px #7B96B8,
                                          0px -10px 100px #7B96B8,
                                          0px -10px 100px #7B96B8;
                                      }
                                    }

RELIEF OMBRÉ

FUSION

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént. (texte)

                                    .$ {text-shadow: 0 1px 0 #ccc,
                                                   0 2px 0 #c9c9c9,
                                                   0 3px 0 #bbb,
                                                   0 4px 0 #b9b9b9,
                                                   0 5px 0 #aaa,
                                                   0 6px 1px rgba(0,0,0,.1),
                                                   0 0 5px rgba(0,0,0,.1),
                                                   0 1px 3px rgba(0,0,0,.3),
                                                   0 3px 5px rgba(0,0,0,.2),
                                                   0 5px 10px rgba(0,0,0,.25),
                                                   0 10px 10px rgba(0,0,0,.2),
                                                   0 20px 20px rgba(0,0,0,.15);
                                    }

OMBRE LIGNÉS

LUIS

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént. (texte)

                                    .$ {
                                    	    text-transform: uppercase;
                                           text-shadow:
                                        0 1px #808d93,
                                        -1px 0 #cdd2d5,
                                        -1px 2px #808d93,
                                        -2px 1px #cdd2d5,
                                        -2px 3px #808d93,
                                        -3px 2px #cdd2d5,
                                        -3px 4px #808d93,
                                        -4px 3px #cdd2d5,
                                        -4px 5px #808d93,
                                        -5px 4px #cdd2d5,
                                        -5px 6px #808d93,
                                        -6px 5px #cdd2d5,
                                        -6px 7px #808d93,
                                        -7px 6px #cdd2d5,
                                        -7px 8px #808d93,
                                        -8px 7px #cdd2d5;
                                    }

EFFETS " 3D BIS "

Luis

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént. (texte)

.$ {text-transform: uppercase;
                                          letter-spacing: .6em !important;
                                     text-shadow: 
                                          -1px -1px 1px #efede3, 
                                          0px 1px 0 #2e2e2e, 
                                          0px 2px 0 #2c2c2c, 
                                          0px 3px 0 #2a2a2a, 
                                          0px 4px 0 #282828, 
                                          0px 5px 0 #262626, 
                                          0px 6px 0 #242424, 
                                          0px 7px 0 #222, 
                                          0px 8px 0 #202020, 
                                          0px 9px 0 #1e1e1e, 
                                          0px 10px 0 #1c1c1c, 
                                          0px 11px 0 #1a1a1a, 
                                          0px 12px 0 #181818, 
                                          0px 13px 0 #161616, 
                                          0px 14px 0 #141414, 
                                          0px 15px 0 #121212,
                                    
                                          2px 20px 5px rgba(0, 0, 0, 05),
                                          5px 23px 5px rgba(0, 0, 0, 0.2),
                                          8px 27px 8px rgba(0, 0, 0, 0.3),
                                          8px 28px 35px rgba(0, 0, 0, 0.6);
                                     }

EFFET "OMBRE 3D ÉLÉGANTE"

Luis

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént. (texte)

.$ {text-shadow: 
                                          1px -1px 0 #767676, 
                                          -1px 2px 1px #737272, 
                                          -2px 4px 1px #767474, 
                                          -3px 6px 1px #787777, 
                                          -4px 8px 1px #7b7a7a, 
                                          -5px 10px 1px #7f7d7d, 
                                          -6px 12px 1px #828181, 
                                          -7px 14px 1px #868585, 
                                          -8px 16px 1px #8b8a89, 
                                          -9px 18px 1px #8f8e8d, 
                                          -10px 20px 1px #949392, 
                                          -11px 22px 1px #999897, 
                                          -12px 24px 1px #9e9c9c, 
                                          -13px 26px 1px #a3a1a1, 
                                          -14px 28px 1px #a8a6a6, 
                                          -15px 30px 1px #adabab, 
                                          -16px 32px 1px #b2b1b0, 
                                          -17px 34px 1px #b7b6b5, 
                                          -18px 36px 1px #bcbbba, 
                                          -19px 38px 1px #c1bfbf, 
                                          -20px 40px 1px #c6c4c4, 
                                          -21px 42px 1px #cbc9c8, 
                                          -22px 44px 1px #cfcdcd, 
                                          -23px 46px 1px #d4d2d1, 
                                          -24px 48px 1px #d8d6d5, 
                                          -25px 50px 1px #dbdad9, 
                                          -26px 52px 1px #dfdddc, 
                                          -27px 54px 1px #e2e0df, 
                                          -28px 56px 1px #e4e3e2;
                                      }

OMBRE 3D FANTÔME

fusion

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént. (texte)

                                    .$ {
                                        text-shadow:0px 0px 0 rgb(137,156,213),1px 1px 0 rgb(129,148,205),2px 2px 0 rgb(120,139,196),3px 3px 0 rgb(111,130,187),4px 4px 0 rgb(103,122,179),5px 5px 0 rgb(94,113,170),6px 6px 0 rgb(85,104,161),7px 7px 0 rgb(76,95,152),8px 8px 0 rgb(68,87,144),9px 9px 0 rgb(59,78,135),10px 10px 0 rgb(50,69,126),11px 11px 0 rgb(42,61,118),12px 12px 0 rgb(33,52,109),13px 13px 0 rgb(24,43,100),14px 14px 0 rgb(15,34,91),15px 15px 0 rgb(7,26,83),16px 16px 0 rgb(-2,17,74),17px 17px 0 rgb(-11,8,65),18px 18px 0 rgb(-19,0,57),19px 19px 0 rgb(-28,-9,48), 20px 20px 0 rgb(-37,-18,39),21px 21px 20px rgba(0,0,0,1),21px 21px 1px rgba(0,0,0,0.5),0px 0px 20px rgba(0,0,0,.2);
                                    }

"TEXTE INVISIBLE"

fusion

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént. (texte)

.
                                    .$ {text-shadow: #000000 .07em .07em 0;
                                    }

"OMBRE FANTÔME"

fusion

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént. (texte)

                                    .$ {
                                    	    text-transform: uppercase;
                                           text-shadow: 
                                        1px 0px 1px #ccc, 0px 1px 1px #eee, 
                                        2px 1px 1px #ccc, 1px 2px 1px #eee,
                                        3px 2px 1px #ccc, 2px 3px 1px #eee,
                                        4px 3px 1px #ccc, 3px 4px 1px #eee,
                                        5px 4px 1px #ccc, 4px 5px 1px #eee,
                                        6px 5px 1px #ccc, 5px 6px 1px #eee,
                                        7px 6px 1px #ccc;
                                    }

TXT SCROLL

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
Section 1.10.32 du "De Finibus Bonorum et Malorum" de Ciceron (45 av. J.-C.)

"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént. (texte)

..$ { width: 300px;
                                    height: 200px;
                                    overflow-y: scroll !important;
                                    scrollbar-color: rebeccapurple #62a2d9 !important;
                                    scrollbar-width: thin !important; }

TEXTE OUTLINE

LUIS

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént. (texte)

                                    	.$ {
                                    text-transform: uppercase;
                                    text-shadow:  black  .05em  0  0,
                                                   black   0  .05em 0,
                                                   black -.05em 0  0,
                                                   black  0  -.05em 0;
                                    }

OMBRE DISTINGUÉ

Santos

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént. (texte)

                                    	.$ {text-shadow: 0 -3px 0 #333,
                                        0 6px 8px rgba(0,0,0,.4),
                                        0 9px 10px rgba(0,0,0,.15),
                                        0 30px 10px rgba(0,0,0,.18),
                                        0 15px 10px rgba(0,0,0,.21);
                                    }

OMBRE VINTAGE

Luis

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént. (texte)

                                    .$ {
                                          text-shadow: 5px 5px 0px #eb452b, 
                                                      10px 10px 0px #efa032, 
                                                      15px 15px 0px #46b59b, 
                                                      20px 20px 0px #017e7f, 
                                                      25px 25px 0px #052939, 
                                                      30px 30px 0px #c11a2b, 
                                                      35px 35px 0px #c11a2b, 
                                                      40px 40px 0px #c11a2b, 
                                                      45px 45px 0px #c11a2b;
                                    }

TA DA !!

fusion

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént. (texte)

.$ {
                                        display: inline-block;
                                        animation: move .5s linear infinite alternate;
                                    }
                                    @keyframes move{
                                        0%{
                                            opacity: 0;
                                            transform: scale(0);
                                        }
                                        50%{
                                            opacity: 1;
                                            transform: scale(1.3);
                                        }
                                        100%{
                                            opacity: 1;
                                            transform: scale(1);
                                        }
                                    }

OMBRE UP DOWN

HOLA

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént. (texte)

.${
                                        animation: shadow 0.7s alternate infinite;
                                    }
                                    @keyframes shadow{
                                        0%{ text-shadow: 0 0 7px #0e84b4; }
                                        100%{ text-shadow: 2px 5px 10px white, 0 10px 1px #0e84b4; }
                                    }
                                    @media only screen and (max-width: 990px){
                                        .text-effect{ font-size: 70px; }
                                    }
                                    @media only screen and (max-width: 767px){
                                        .text-effect{ font-size: 60px; }
                                    }
                                    @media only screen and (max-width: 576px){
                                        .text-effect{ font-size: 40px; }
                                    }

PAPILLON

Fusion

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént. (texte)

.${
                                        animation: animate 1.25s infinite linear;
                                    }
                                    @keyframes animate{
                                        0%, 100%{ transform: scaleY(0); }
                                        50%{ transform: scaleY(1.5); }
                                    }
                                    @media only screen and (max-width: 990px){
                                        .text-effect{ font-size: 70px; }
                                    }
                                    @media only screen and (max-width: 767px){
                                        .text-effect{ font-size: 60px; }
                                    }
                                    @media only screen and (max-width: 576px){
                                        .text-effect{ font-size: 40px; }
                                    }

ROTATION

FUSION

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént. (texte)

                                    .$ {
                                        display: inline-block;
                                        animation: wobble 5s ease-in-out infinite;
                                    }
                                    @keyframes wobble{
                                        from, to{
                                            text-shadow: 5px 0 #999;
                                            transform: perspective(500px) rotateY(-45deg);
                                        }
                                        50%{
                                            text-shadow: -5px 0 #999;
                                            transform: perspective(500px) rotateY(45deg);
                                        }
                                    }
                                    @media only screen and (max-width: 990px){
                                        .text-effect{ font-size: 80px; }
                                    }
                                    @media only screen and (max-width: 767px){
                                        .text-effect{ font-size: 60px; }
                                    }
                                    @media only screen and (max-width: 576px){
                                        .text-effect{ font-size: 45px; }
                                    }

FANTOMAS

ola

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént. (texte)

                                    .$ {
                                       filter: drop-shadow(0 0 1px black)drop-shadow(0 0 1px black)drop-shadow(0 0 1px black);
                                        animation: bg-shift .5s linear infinite alternate, fade-in-out 4s ease-in-out forwards infinite;
                                    }
                                    @keyframes bg-shift{
                                        from{ background-position: 0 -30px; }
                                        to{ background-position: 0 30px;  }
                                    }
                                    @keyframes fade-in-out{
                                        0%{ filter:drop-shadow(0 0 1px black)drop-shadow(0 0 1px black)drop-shadow(0 0 1px black)blur(200px); }
                                        25%{ filter:drop-shadow(0 0 1px black)drop-shadow(0 0 1px black)drop-shadow(0 0 1px black)blur(0); }
                                        75%{ filter:drop-shadow(0 0 1px black)drop-shadow(0 0 1px black)drop-shadow(0 0 1px black)blur(0); }
                                        100%{ filter:drop-shadow(0 0 1px black)drop-shadow(0 0 1px black)drop-shadow(0 0 1px black)blur(200px); }
                                    }
                                    @media only screen and (max-width: 990px){
                                        .text-effect{ font-size: 80px; }
                                    }
                                    @media only screen and (max-width: 767px){
                                        .text-effect{ font-size: 60px; }
                                    }
                                    @media only screen and (max-width: 576px){
                                        .text-effect{ font-size: 45px; }
                                    }

LÉVITATION

fusion

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént. (texte)

                                    .$ {animation: looperFrames 4s linear infinite;
                                    }
                                    @keyframes looperFrames{
                                        0% { transform: translateY(0px)rotate(-5deg); }
                                        25% { transform: translateY(18px); }
                                        50% { transform: translateY(0px) rotate(5deg); }
                                        75% { transform: translateY(-18px); }
                                        100% { transform: translateY(0px) rotate(-5deg); }
                                    }

APPARITON MAGIQUE

WWW.WAFUSION.FR

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént. (Bouton)

.$ {
                                      
                                    font-size: 4rem;
                                    hyphens: auto;
                                    color: #fff;
                                    animation: text-transform 4s ease-in-out forwards; 
                                    letter-spacing: -2rem;
                                    }
                                    	
                                    @keyframes text-transform{
                                      0% {
                                      
                                        letter-spacing: -2rem;
                                        filter: blur(10px);
                                      }
                                     
                                      50% {
                                        filter: blur(5px);
                                      }
                                    	
                                      100% {
                                        letter-spacing: 1rem;
                                        filter: blur(0px);
                                      }
                                    }

Soutenez mon travail.

Si vous appréciez mon travail, que vous voulez l'encourager, vous pouvez faire un don ici.
Tout don, aussi petit soit-il, peut faire la différence !

Merci pour votre soutien !

Réalisé avec WebAcappella Fusion - 2023 wa-fusion.fr