× İletişim Formu CSS Slider Arlina Design 5/06/2017 Etiketler : Blogger CSS Arlina Design <!DOCTYPE html> <html> <head> <style type="text/css"> @import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed'); body { font-family: 'Fira Sans Condensed', sans-serif; -webkit-font-smoothing: antialiased; margin: 20 auto 0 auto; } @keyframes slidy { 0% { left: 0%; } 20% { left: 0%; } 25% { left: -100%; } 45% { left: -100%; } 50% { left: -200%; } 70% { left: -200%; } 75% { left: -300%; } 95% { left: -300%; } 100% { left: -400%; } } div#slider { overflow: hidden; } div#slider figure img { width: 20%; float: left; } div#slider figure { position: relative; width: 500%; margin: 0; left: 0; text-align: left; font-size: 0; animation: 20s slidy infinite; } </style> </head> <body> <div id="slider"> <figure> <img src="https://1.bp.blogspot.com/-XKGVvlEm2vU/WO9UCIttrnI/AAAAAAAABPY/pGeiK9QBtDUBX7fR1EzGuiW-ai4CORT4wCLcB/w530-h298-p-rw/blogger-eklentileri.png" alt> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZFGIoWTDqEMod6NqW8YMaYokiBA_H6meFF0v4fG6n9TLYTA5E_PJ_tUC05Jf9WsF0D40YydyuvdCdfq94eXHa8N3OOL-dCr_eK6F3hDg7djKSAPchAAtT5PTnF5VmB-yltGG-8XP8BgBD/w530-h298-p-rw/amp.png" alt> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTfc8BkLC1TtJ1Ou5nJe3A_3L34ET1RrwbQT6rHVkKG45zWr4TG93W6o6Acda7J96yMSOBSOZnVgxP8HOa-i4U1QJY1Oi9_j_eTqP9gBn-ASCjWABabMvHsAgl40YG8Y_cLwxNa1IAKxD6/w530-h298-p-rw/amp.png" alt> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicyfsMUxwmy33fhZEIBUhqZOQumbfRpzMP13u_Mzu9GtjvyY_Iax9TR6DgsZIjkaFtTzhKQ83JlenmRr45V62KFFA8HumDJbOOleGdY8JgzpIh0FKsfwxYcgdZkHgjjHBhsCJICeGkok-M/w530-h298-p-rw/tabs.png" alt> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmamWOfskD6_CkcpiqSNdXhbgTAX0-Sg3n_wjaKh2_cwoSf_5NJOF9-RbmTivKwibJavOVAGiWjsywjpRd6vGToCcU1PYZ_pPhzhRNpBrOns7ME6Vc-aJL9jpltnj2TyiwWDTSZK1oBGak/w530-h298-p-rw/arac-menusu.png" alt> </figure> </div> </body> </html> YENİ YAYIN ÖNCEKİ YAYIN "CSS Slider" 0 Yorum yapıldı. Yorum Gönder Sonraki Kayıt Ana Sayfa Kaydol: Kayıt Yorumları (Atom) ×
CSS Slider Arlina Design 5/06/2017 Etiketler : Blogger CSS Arlina Design <!DOCTYPE html> <html> <head> <style type="text/css"> @import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed'); body { font-family: 'Fira Sans Condensed', sans-serif; -webkit-font-smoothing: antialiased; margin: 20 auto 0 auto; } @keyframes slidy { 0% { left: 0%; } 20% { left: 0%; } 25% { left: -100%; } 45% { left: -100%; } 50% { left: -200%; } 70% { left: -200%; } 75% { left: -300%; } 95% { left: -300%; } 100% { left: -400%; } } div#slider { overflow: hidden; } div#slider figure img { width: 20%; float: left; } div#slider figure { position: relative; width: 500%; margin: 0; left: 0; text-align: left; font-size: 0; animation: 20s slidy infinite; } </style> </head> <body> <div id="slider"> <figure> <img src="https://1.bp.blogspot.com/-XKGVvlEm2vU/WO9UCIttrnI/AAAAAAAABPY/pGeiK9QBtDUBX7fR1EzGuiW-ai4CORT4wCLcB/w530-h298-p-rw/blogger-eklentileri.png" alt> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZFGIoWTDqEMod6NqW8YMaYokiBA_H6meFF0v4fG6n9TLYTA5E_PJ_tUC05Jf9WsF0D40YydyuvdCdfq94eXHa8N3OOL-dCr_eK6F3hDg7djKSAPchAAtT5PTnF5VmB-yltGG-8XP8BgBD/w530-h298-p-rw/amp.png" alt> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTfc8BkLC1TtJ1Ou5nJe3A_3L34ET1RrwbQT6rHVkKG45zWr4TG93W6o6Acda7J96yMSOBSOZnVgxP8HOa-i4U1QJY1Oi9_j_eTqP9gBn-ASCjWABabMvHsAgl40YG8Y_cLwxNa1IAKxD6/w530-h298-p-rw/amp.png" alt> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicyfsMUxwmy33fhZEIBUhqZOQumbfRpzMP13u_Mzu9GtjvyY_Iax9TR6DgsZIjkaFtTzhKQ83JlenmRr45V62KFFA8HumDJbOOleGdY8JgzpIh0FKsfwxYcgdZkHgjjHBhsCJICeGkok-M/w530-h298-p-rw/tabs.png" alt> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmamWOfskD6_CkcpiqSNdXhbgTAX0-Sg3n_wjaKh2_cwoSf_5NJOF9-RbmTivKwibJavOVAGiWjsywjpRd6vGToCcU1PYZ_pPhzhRNpBrOns7ME6Vc-aJL9jpltnj2TyiwWDTSZK1oBGak/w530-h298-p-rw/arac-menusu.png" alt> </figure> </div> </body> </html>
Yorum Gönder