Membuat Rotasi Kata dengan CSS3

Halo, ketemu lagi dengan saya :). Apa kabarnya ? Semoga baik yah, amin.

Pada artikel kali ini saya akan menjelaskan bagaimana CaraÂ Membuat Rotasi Kata Dengan CSS3, Nah seperti pada judul diatas rotasi kata berarti kita akan membuat suatu kata atau suatu kalimat akan berubah secaraÂ bergantian. Penasaran seperti apa cara membuat nya ? yuk simak langkah-langkah nya berikut ini.

1. Seperti biasa silahkan buka teks editornya terlebih dahulu, kemudian ketikan kode HTML berikut:

<section class="rw-wrapper">
	<h2 class="rw-sentence">
		<span>Real poetry is like</span>
		<span>creating</span>
		<div class="rw-words rw-words-1">
			<span>breathtaking moments</span>
			<span>lovely sounds</span>
			<span>incredible magic</span>
			<span>unseen experiences</span>
			<span>happy feelings</span>
			<span>beautiful butterflies</span>
		</div>
		<br />
		<span>with a silent touch of</span>
		<div class="rw-words rw-words-2">
			<span>sugar</span>
			<span>spice</span>
			<span>colors</span>
			<span>happiness</span>
			<span>wonder</span>
			<span>happiness</span>
		</div>
	</h2>
</section>

2. Kalo sudah, lanjutkan untuk kode CSS nya, silahkan ketikan kembali kode CSS berikut:

.rw-wrapper{
	width: 80%;
	position: relative;
	margin: 110px auto 0 auto;
	font-family: 'Bree Serif';
	padding: 10px;
}
.rw-sentence{
	margin: 0;
	text-align: left;
	text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
}
.rw-sentence span{
	color: #444;
	white-space: nowrap;
	font-size: 200%;
	font-weight: normal;
}
.rw-words{
	display: inline;
	text-indent: 10px;
}
.rw-words span{
	position: absolute;
	opacity: 0;
	overflow: hidden;
	width: 100%;
	color: #6b969d;
}
.rw-words-1 span{
	animation: rotateWordsFirst 18s linear infinite 0s;
}
.rw-words-2 span{
	animation: rotateWordsSecond 18s linear infinite 0s;
}
.rw-words span:nth-child(2) { 
	animation-delay: 3s; 
	color: #6b889d;
}
.rw-words span:nth-child(3) { 
	animation-delay: 6s; 
	color: #6b739d;	
}
.rw-words span:nth-child(4) { 
	animation-delay: 9s; 
	color: #7a6b9d;
}
.rw-words span:nth-child(5) { 
	animation-delay: 12s; 
	color: #8d6b9d;
}
.rw-words span:nth-child(6) {  
	animation-delay: 15s; 
	color: #9b6b9d;
}
@keyframes rotateWordsFirst {
    0% { opacity: 1; animation-timing-function: ease-in; height: 0px; }
    8% { opacity: 1; height: 60px; }
    19% { opacity: 1; height: 60px; }
	25% { opacity: 0; height: 60px; }
    100% { opacity: 0; }
}
@keyframes rotateWordsSecond {
    0% { opacity: 1; animation-timing-function: ease-in; width: 0px; }
    10% { opacity: 0.3; width: 0px; }
	20% { opacity: 1; width: 100%; }
    27% { opacity: 0; width: 100%; }
    100% { opacity: 0; }
}

3. Setelah itu, jangan lupa disimpan, kemudian jalankan di browser nya masing-masing dan lihat hasilnya. selesai

Nah seperti itulah CaraÂ Membuat Rotasi Kata Dengan CSS3, cukup mudah yah ?

Baik sampai disini pertemuan kita, semoga bermanfaat, amin.

Selamat Mencoba 🙂

Kategori