• Image en texte 3

    Un possibilité de décoration est de changer les images de fond, non pas au survol mais en animation.

    Dans cet exemple, j'ai utilisé des textures déjà enregistrées chez moi mais vous mettrez les vôtres à la place.

     

    Joyeux
    Noël !

    <p id="bk1">Joyeux<br />No&euml;l !</p>
    <style><!--
    #bk1{animation:cath 20s linear 0s infinite normal; width:55vw; margin:2vw auto; text-align:center; font-size:15vw; color:transparent; -webkit-text-stroke:0.2vh black; background-position:0% 0%; }

    @keyframes cath{
    0% {background:url('http://ekladata.com/G_std2CdZVrQJZVayo5S-uhjCjo/anime-270.gif'); -webkit-background-clip : text;}
    20% {background:url('http://ekladata.com/G_std2CdZVrQJZVayo5S-uhjCjo/anime-270.gif'); -webkit-background-clip : text;}
    20.1% {background:url('http://ekladata.com/GV_KfXmlBOZ8NsUA_hTY4O0ZGMw/anime-344.gif'); -webkit-background-clip : text;}
    40% {background:url('http://ekladata.com/GV_KfXmlBOZ8NsUA_hTY4O0ZGMw/anime-344.gif'); -webkit-background-clip : text;}
    40.1% {background:url('http://ekladata.com/p6MGjUFNr0JKVglGxc8e_SlC9r0/anime-378.gif'); -webkit-background-clip : text;}
    60% {background:url('http://ekladata.com/p6MGjUFNr0JKVglGxc8e_SlC9r0/anime-378.gif'); -webkit-background-clip : text;}
    60.1% {background:url('http://ekladata.com/nIohw9DyFM_XcJFJ8HPC55CfphI/anime-427.gif'); -webkit-background-clip : text;}
    80% {background:url('http://ekladata.com/nIohw9DyFM_XcJFJ8HPC55CfphI/anime-427.gif'); -webkit-background-clip : text;}
    80.1% {background:url('http://ekladata.com/m2u93zX1EWQFY2mopSxzL4PO0yU/anime-511.gif'); -webkit-background-clip : text;}
    100% {background:url('http://ekladata.com/m2u93zX1EWQFY2mopSxzL4PO0yU/anime-511.gif');-webkit-background-clip : text; }
    }
    --></style>

    Le nombre de textures est à votre choix, en réglant le temps d'affichage de chacune.

    Le temps général de l'animation (20s) est à votre choix.

    La taille du montage est à ajuster en modifiant la taille de la police en même temps.

    On peut essayer de mettre des images à la place des textures mais je crains qu'elles ne soient pas très visibles: essai:

    Joyeux
    Noël !