Kayıt ol

Animasyonlu HTML Yazı Kodu

Masmavi

Administrator
10
Katılım
9 Haziran 2018
Konular
1,336
Mesajlar
5,586
Çözümler
8
Reaksiyon puanı
1,732
Puanları
113
Konum
İstanbul
Web sitesi
www.masmavi.net
Cinsiyet
Erkek
Flatcast radyoları için index yapan arkadaşlarını işine yarayabilecek HTML animasyonlu yazı kodu. İndexlerinize eklemek için aşağıdaki kodu ilgili div içerisine ekleyebilirsiniz.

HTML:
<div class="words word-1">
     <span>F</span>
    <span>L</span>
    <span>A</span>
    <span>T</span>
    <span>C</span>
    <span>A</span>
    <span>S</span>
    <span>T</span>
    <span>I</span>
    <span>N</span>
</div>

<div class="words word-2">
    <span>B</span>
    <span>İ</span>
    <span>R</span>
</div>

<div class="words word-3">
    <span>N</span>
    <span>U</span>
    <span>M</span>
    <span>A</span>
    <span>R</span>
    <span>A</span>
    <span>L</span>
    <span>I</span>
    <span>&nbsp;</span>
    <span>R</span>
    <span>A</span>
    <span>D</span>
    <span>Y</span>
    <span>O</span>
    <span>S</span>
    <span>U</span>
 </div>
<style>
.words {color: #fff;font-size: 0;z-index: 20;text-align: center;}
.words span {font-size: 4rem;display: inline-block;animation: move 3s ease-in-out infinite;margin: 35px 0}
@keyframes move { 0% {transform: translate(-30%, 0)}50% {text-shadow: 0 0 15px #000}100% {transform: translate(30%, 0)}}
.words span:nth-child(2) {animation-delay: .5s}
.words span:nth-child(3) {animation-delay: 1s}
.words span:nth-child(4) {animation-delay: 1.5s}
.words span:nth-child(5) {animation-delay: 2s}
.words span:nth-child(6) {animation-delay: 2.5s}
.words span:nth-child(7) {animation-delay: 3s}
</style>

Demo

[PARSEHTML]
<div class="words word-1">
<span>F</span>
<span>L</span>
<span>A</span>
<span>T</span>
<span>C</span>
<span>A</span>
<span>S</span>
<span>T</span>
<span>I</span>
<span>N</span>
</div>

<div class="words word-2">
<span>B</span>
<span>İ</span>
<span>R</span>
</div>

<div class="words word-3">
<span>N</span>
<span>U</span>
<span>M</span>
<span>A</span>
<span>R</span>
<span>A</span>
<span>L</span>
<span>I</span>
<span>&nbsp;</span>
<span>R</span>
<span>A</span>
<span>D</span>
<span>Y</span>
<span>O</span>
<span>S</span>
<span>U</span>
</div>
<style>
.words {color: #fff;font-size: 0;z-index: 20;text-align: center;}
.words span {font-size: 4rem;display: inline-block;animation: move 3s ease-in-out infinite;margin: 35px 0}
@keyframes move { 0% {transform: translate(-30%, 0)}50% {text-shadow: 0 0 15px #000}100% {transform: translate(30%, 0)}}
.words span:nth-child(2) {animation-delay: .5s}
.words span:nth-child(3) {animation-delay: 1s}
.words span:nth-child(4) {animation-delay: 1.5s}
.words span:nth-child(5) {animation-delay: 2s}
.words span:nth-child(6) {animation-delay: 2.5s}
.words span:nth-child(7) {animation-delay: 3s}
</style>
[/PARSEHTML]
 
Son düzenleme:

DeLaL.33

Adalet yasam Tarzimdir
Vip Üye
10
Katılım
23 Eylül 2020
Konular
268
Mesajlar
2,640
Reaksiyon puanı
1,050
Puanları
113
Konum
Mersin
Web sitesi
www.masmavi.net
Cinsiyet
Erkek
Emeğine Sağlık Kardeşim Bilgi ve Paylaşımına Teşekkür ederim..
 

Lady Nur

Ne kadar SAYGI o kadar SEVGİ
Vip Üye
10
Katılım
24 Eylül 2020
Konular
811
Mesajlar
3,152
Reaksiyon puanı
1,897
Puanları
113
Cinsiyet
Kadın
Flatcast radyoları için index yapan arkadaşlarını işine yarayabilecek HTML animasyonlu yazı kodu. İndexlerinize eklemek için aşağıdaki kodu ilgili div içerisine ekleyebilirsiniz.

HTML:
<div class="words word-1">
     <span>F</span>
    <span>L</span>
    <span>A</span>
    <span>T</span>
    <span>C</span>
    <span>A</span>
    <span>S</span>
    <span>T</span>
    <span>I</span>
    <span>N</span>
</div>

<div class="words word-2">
    <span>B</span>
    <span>İ</span>
    <span>R</span>
</div>

<div class="words word-3">
    <span>N</span>
    <span>U</span>
    <span>M</span>
    <span>A</span>
    <span>R</span>
    <span>A</span>
    <span>L</span>
    <span>I</span>
    <span>&nbsp;</span>
    <span>R</span>
    <span>A</span>
    <span>D</span>
    <span>Y</span>
    <span>O</span>
    <span>S</span>
    <span>U</span>
 </div>
<link rel="stylesheet" type="text/css" href="//www.masmavi.net/index-css/flatcast-modern-index/style.css" />

Demo adresi: m01.NET | RADYO
Emeklerine sağlık Kardeşim bilgilendirme adına Teşekkürler...
 

Masmavi

Administrator
10
Katılım
9 Haziran 2018
Konular
1,336
Mesajlar
5,586
Çözümler
8
Reaksiyon puanı
1,732
Puanları
113
Konum
İstanbul
Web sitesi
www.masmavi.net
Cinsiyet
Erkek

Yorum yapmak için bir hesap oluşturun veya giriş yapın

Yeni bir konu oluşturabilmek veya konulara cevap verebilmek için sitemize üye olmanız gerekmektedir

Hesap oluştur

Forum sitemizde bir hesap oluşturun. Bu işlem çok kolay!

Giriş yap

Zaten bir hesabınız var mı? Giriş yapın.

Adobe Photoshop programının ayarlarını sıfırlamak için, Adobe Photoshop simgesini çift tıkladıktan hemen sonra klavyeden "SHIFT+CTRL+ALT" tuşuna basabilirsiniz. Çıkan "Delete the Adobe Photoshop Settings File?" uyarısı çıktığında "Yes" butonuna tıkladığınızda ayarlarınız sıfırlanarak Adobe Photoshop'unuz fabrika ayarlarına dönecektir.
Üst