3D ANIMATED TEXT

3D ANIMATED TEXT

Με τον παρακάτω κώδικα μπορούμε να εμφανίσουμε ένα animated 3d κείμενο στο blog μας. Αντιγράψτε τον παρακάτω κώδικα στο τέλος του κώδικα html μιας οποιαδήποτε ανάρτησης ή σελίδας του blogger και θα εμφανιστεί το 3d κείμενο ψηλά και στο κέντρο της ανάρτησης σαν μια 3d animated επικεφαλίδα, ενώ το υπόλοιπο μέρος της ανάρτησης θα είναι ορατό και προσβάσιμο από τους αναγνώστες δείτε το demo στον παρακάτω σύνδεσμο.

ΔΕΙΤΕ ΤΟ ΣΕ ΛΕΙΤΟΥΡΓΙΑ ΣΕ ΕΝΑ DEMO BLOG ΕΔΩ ►

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42

<figure> <h1>WIDGETS FOR BLOGS</h1> <h1>WIDGETS FOR BLOGS</h1> <h1>WIDGETS FOR BLOGS</h1> <h1>WIDGETS FOR BLOGS</h1> <h1>WIDGETS FOR BLOGS</h1> <h1>WIDGETS FOR BLOGS</h1> <h1>WIDGETS FOR BLOGS</h1> <h1>WIDGETS FOR BLOGS</h1> <h1>WIDGETS FOR BLOGS</h1> <h1>WIDGETS FOR BLOGS</h1> <h1>WIDGETS FOR BLOGS</h1> </figure> <style> h1 {animation:glow 10s ease-in-out infinite;} figure { animation:wobble 5s ease-in-out infinite; transform-origin:left left; transform-style:preserve-3d;} @keyframes wobble { 0%,100%{ transform:rotate3d(1,1,0,40deg); } 25%{ transform:rotate3d(-1,1,0,40deg); } 50%{ transform:rotate3d(-1,-1,0,40deg); } 75%{ transform:rotate3d(1,-1,0,40deg); }} h1 {display:block;width:100%;padding:40px;line-height:1.5; font:900 8em 'arial';text-transform:uppercase; position:absolute;color:#0a0a0a;} @keyframes glow { 0%,100%{ text-shadow:0 0 30px red; } 25%{ text-shadow:0 0 30px orange; } 50%{ text-shadow:0 0 30px forestgreen; } 75%{ text-shadow:0 0 30px cyan; }} h1:nth-child(2){ transform:translateZ(5px); } h1:nth-child(3){ transform:translateZ(10px);} h1:nth-child(4){ transform:translateZ(15px); } h1:nth-child(5){ transform:translateZ(20px); } h1:nth-child(6){ transform:translateZ(25px); } h1:nth-child(7){ transform:translateZ(30px); } h1:nth-child(8){ transform:translateZ(35px); } h1:nth-child(9){ transform:translateZ(40px); } h1:nth-child(10){ transform:translateZ(45px); } </style>