Link Dengan Transisi CSS

Ingin memperindah link di web anda? Hari ini kami ingin berbagi beberapa efek tautan eksperimental dan kreatif dengan Anda. Idenya adalah menggunakan elemen pseudo dan menghidupkannya untuk menciptakan efek halus dan modern. Dalam contoh kita menggunakan transisi hover, tapi Anda juga bisa membayangkan efek ini pada klik atau sebagai animasi awal.
Dalam kebanyakan kasus, HTML hanyalah sebuah nav dengan beberapa jangkar:

<nav class="cl-effect-13">
 <a href="#">Beleaguer</a>
 <a href="#">Lassitude</a>
 <a href="#">Murmurous</a>
 <a href="#">Palimpsest</a>
 <a href="#">Assemblage</a>
</nav>

Tetapi untuk beberapa efek khusus, kita mungkin menggunakan atribut data untuk mengulangi teks tautan dalam elemen semu:

<nav class="cl-effect-11">
 <a href="#" data-hover="Desultory">Desultory</a>
 <a href="#" data-hover="Sumptuous">Sumptuous</a>
 <a href="#" data-hover="Scintilla">Scintilla</a>
 <a href="#" data-hover="Propinquity">Propinquity</a>
 <a href="#" data-hover="Harbinger">Harbinger</a>
</nav>

Kita mungkin juga menggunakan rentang dalam beberapa kasus karena kita ingin menambahkan perspektif pada setiap item atau mencapai efek lain.

<nav class="cl-effect-10">
 <a href="#" data-hover="Seraglio"><span>Seraglio</span></a>
 <a href="#" data-hover="Sumptuous"><span>Sumptuous</span></a>
 <a href="#" data-hover="Scintilla"><span>Scintilla</span></a>
 <a href="#" data-hover="Palimpsest"><span>Palimpsest</span></a>
 <a href="#" data-hover="Assemblage"><span>Assemblage</span></a>
</nav>

Contoh untuk efek adalah gaya berikut. Ini menempatkan elemen semu di atas teks tautan sebenarnya dan di hover, kita akan membuat elemen semu hilang dengan menskalakannya dan membuatnya memudar (seperti pada blok html kedua):

/* Effect 15: scale down, reveal */
.cl-effect-15 a {
 color: rgba(0,0,0,0.2);
 font-weight: 700;
 text-shadow: none;
}

.cl-effect-15 a::before {
 color: #fff;
 content: attr(data-hover);
 position: absolute;
 transition: transform 0.3s, opacity 0.3s;
}

.cl-effect-15 a:hover::before,
.cl-effect-15 a:focus::before {
 transform: scale(0.9);
 opacity: 0;
}

Lihat  Unduh

Password: www.duniadesain.net

Script ini bisa bekerja di ( IE9, Google Chrome 30+, Firefox 27+)

Kami berharap koleksi ini memberi Anda beberapa inspirasi untuk menciptakan beberapa efek bagus.
Harap dicatat bahwa IE10 tidak mendukung gaya transform: preserve-3d, properti yang digunakan dalam beberapa contoh. Karena kita tidak dapat mengujinya jika menggunakan Modernizr, Anda dapat mencoba menggunakan salah satu solusi yang disarankan untuk mendeteksi IE10.
Source: Tympanus