- Konuyu Başlatan
- AdminCP
- #1
- Katılım
- 9 Haziran 2018
- Konular
- 1,372
- Mesajlar
- 5,622
- Çözümler
- 1
- Reaksiyon puanı
- 1,730
- Puanları
- 113
- Konum
- Adana
- Web sitesi
- webadam.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.
Demo
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> </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
F
L
A
T
C
A
S
T
I
N
B
İ
R
N
U
M
A
R
A
L
I
R
A
D
Y
O
S
U
Son düzenleme:
