agung wisudhatama July 27, 2022 Komentar

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

Membuat Tulisan Tik Tok Model Flip Berputar dengan CSS3

MEDIA SOSIAL TIK TOK adalah media yang sedang digandrungi baik dari kalangan muda mudi hingga orang tua dan bahkan anak-anak. Media sosial berbasis sharing video ini sekarang telah menjadi trend share video menarik dan unik. Dengan berbagai efek yang ditawarkan dan editing secara mudah dan cepat, media sosial ini hampir menguasai jagad maya dengan popularitasnya.

Dan sekarang saya akan berbagi tutorial tentang bagaimana membuat Tulisan Tik Tok Model Flip Berputar dengan CSS3. Dengan kehandalan bahasa pemrograman CSS3, maka tulisan Tik Tok akan dipermak menjadi animasi berputar tanpa henti.

Nanti dalam penerapannya, tulisan Tik Tok ini akan berputar dengan sendirinya dan melingkari bidang yang akan kita buat frame nantinya. Mungkin bagi sebagian blogger trik ini sudah menjadi menarik dan patut untuk dipraktekkan. Bila dipasangkan pada blog kalian, akan semakin menambah semarak nantinya. Unik dan menarik, dan tentu saja blog kalian akan berbeda dari blog lainnya.

Keunikan itulah yang membuat blog menjadi terkenal karena memiliki ciri khas yang tidak dimiliki blogger lain. System utak-atik coding ini membuat kita seakan berpikir untuk menjadi blog berhias tulisan fliptext.

Baca Juga :

Menggunakan property Frame Rotate keadaan tulisan yang semula diam menjadi bergerak dengan animasi yang begitu nyata. Tulisan Tik Tok itu akan berputar dengan tambahan property ini. Dan juga tambahan kode-kode lainnya. Nanti juga terdapat dalam codepen yang sudah saya tuliskan disitu bagaimana kode itu menyatu dan menghasilkan karya baru berupa tulisan fliptext. Delay untuk membuat huruf-huruf itu tidak berputar semua. Tapi dari satu persatu huruf-huruf Tik Tok akan berputar mulai dari huruf T kemudian I kemudian K dan T lagi kemudian ke O dan terakhir ke K. Susunan huruf-huruf itu akan silih berganti berputar-putar tanpa henti.

Nth-child dalam style ini juga turut berperan penting karena dia memerankan gerakan pertama dan dilanjutkan dengan gerakan berikutnya. Dihitung saja berapa detik sekali huruf-huruf itu akan berputar. Misal mulai dari 0 atau even kemudian lanjut ke detik berikutnya misal detik ke 2, detik k 4 dan selanjutnya.

Sekarang kita mulai saja penerapannya pada blog yang kita punya. Silakan ikuti caranya dibawah ini ya.

Membuat Tulisan Tik Tok Model Flip Berputar dengan CSS3

1. Masuk ke Dashboard Blogger kemudian ke Tema
2. Pilih Sesuaikan : Edit HTML
3. Kemudian cari ]]></b:skin>
4. Taruh CSS dibawah ini persis diatas kode ]]></b:skin>

body {
     background-color: #f60251;
     padding: 0;
     margin: 0;
     height: 100vh;
     width: 100vw;
     display: flex;
     align-items: center;
     justify-content: center;
}
.loader {
     perspective: 700px;
}
.loader>span {
    font-size: 130px;
    font-family: "Poppins",sans-serif;
    display: inline-block;
    animation: flip 2.6s infinite linear;
    transform-origin: 0 70%;
    transform-style: preserve-3d;	
}
@keyframes flip {
    35% {
       transform: rotateX(360deg);
     }
    100% {
       transform: rotateX(360deg);
     }
}
.loader>span:nth-child(even) {
    color: white;
}
.loader>span:nth-child(2) {
    animation-delay: 0.3s;
}
.loader>span:nth-child(3) {
    animation-delay: 0.6s;
}
.loader>span:nth-child(4) {
    animation-delay: 0.9s;
}
.loader>span:nth-child(5) {
    animation-delay: 1.2s;
}
.loader>span:nth-child(6) {
    animation-delay: 1.5s;
}
.loader>span:nth-child(7) {
    animation-delay: 1.8s;
}
.loader>span:nth-child(8) {
    animation-delay: 2.1s;
}
.loader>span:nth-child(9) {
    animation-delay: 2.4s;
}

Kemudian masuk ke Tata Letak dan taruh kode dibawah ini disitu dan kemudian save

<div class="loader">
    <span>T</span>
    <span>I</span>
    <span>K</span>
    <span>T</span>
    <span>O</span>
    <span>K</span>
</div>

Untuk demonya saya perlihatkan di codepen saya :

Demo

Nah demikian yang dapat saya berikan terkait tutorial membuat tulisan Tik Tok menjadi berputar. Unik khan. Dicoba dong ya. Eh siapa tahu dengan utak-atik ini blog kalian jadi cakep. Terima kasih ya yang sudah mampir kemari di artikel Membuat Tulisan Tik Tok Model Flip Berputar dengan CSS3. Berusaha tidak hanya mengandalkan keberuntungan tetapi juga dengan doa. Karena doa adalah senjata terakhir yang paling ampuh ketika kata "gagal" sudah mulai terlihat di depan mata. Mari jadikan Usaha dan Doa menjadi pilar kokoh dalam aktivitas kita dalam mengejar impian. Salam.

Bagikan ke teman-teman kamu

Label Postingan : CSS

Terima kasih ya udah mempraktekkan tutorial blog di web alifacode.com dengan judul Membuat Tulisan Tik Tok Model Flip Berputar dengan CSS3 . Semoga tutorial blog ini dapat bermanfaat. Salam Blogger.