Sharing Teknologi – Membuat Neon Persegi Animation Effect HTML CSS Di WordPress. HTML, atau HyperText Markup Language, adalah bahasa markup yang digunakan untuk membangun struktur dasar halaman web.
Tim Berners-Lee mengembangkan HTML pada tahun 1991, dan sejak itu, itu telah menjadi standar utama untuk membuat dan menyusun konten online.
HTML menggunakan “tags” atau tanda untuk mendefinisikan elemen-elemen seperti judul, paragraf, gambar, dan tautan dalam sebuah halaman. Tags ini membentuk struktur hierarkis, membantu dalam penyusunan yang terorganisir.
CSS, atau Cascading Style Sheets, adalah bahasa gaya yang bekerja bersama HTML untuk mengatur tampilan dan presentasi halaman web.
Dengan CSS, pengembang dapat mengontrol properti seperti warna, tata letak, dan ukuran elemen HTML. Ini memisahkan gaya dari struktur, memungkinkan perubahan desain tanpa memengaruhi konten dasar.
CSS juga mendukung responsivitas, memungkinkan desainer mengoptimalkan tampilan halaman untuk berbagai perangkat, dari layar desktop hingga perangkat seluler.
Kombinasi HTML dan CSS memberikan dasar untuk pengembangan web yang kreatif dan berfungsional. HTML menyediakan kerangka kerja yang solid dengan elemen-elemen struktural, sementara CSS menambahkan sentuhan estetika dan pengaturan tampilan.
Dengan evolusi HTML5 dan CSS3, pengembang dapat memanfaatkan fitur-fitur baru untuk meningkatkan interaktivitas dan keindahan desain halaman web, menjadikan keduanya sebagai alat yang tak terpisahkan dalam pembangunan web modern.
NB: kami menggunakan tambahan CSS dari bootstrap.
Membuat Neon Persegi Animation
Silakan Copas kode dibawah ini. Rekan-rekan bisa mengubahnya sesuai dengan kebutuhan.
Untuk contoh hasilnya ada di paling bawah ya, silakan scroll ke bawah.
HTML
<div class="position-relative p-3 my-1 overflow-hidden">
<div class="neonpersegi">
<div class="box">
<span class="text">Visit Klaten</span>
</div>
</div>
</div>
Style CSS
@import url(//teknologi.visitklaten.com/cloudme.fonts.googleapis.com/css?family=Pacifico);
root {
--angle: 0deg;
--rotate: -15deg;
}
.neonpersegi {
display: flex;
align-items: center;
justify-content: center;
min-height: 500px;
background-color: #291e27;
font-family: Pacifico;
}
/* Box */
.neonpersegi .box {
inline-size: 300px;
block-size: 300px;
display: flex;
align-items: center;
justify-content: center;
padding: 4ch;
border: 25px solid transparent;
border-image-slice: 1;
border-image-source: linear-gradient(var(--angle),#f64f59,#c471ed,#12c2e9);
background-color: #000;
box-shadow: 5px 5px 25px 0 rgb(225 48 139 / 50%);
font-size: 45px;
animation: 10s spin linear infinite;
}
/* Text inside box */
.neonpersegi .text {
color: #fff;
transform: rotate(-15deg);
animation: neon 5s infinite;
line-height: 1.5em;
}
/* Text animation */
@keyframes neon {
0%,
39%,
41%,
59%,
61%,
100% {
text-shadow: #fff 0 0 12px, #ff3aad 0 0 24px, #ff3aad 0 0 36px;
}
40%,
60% {
text-shadow: none;
}
}
/* Border animation */
@keyframes spin {
to {
--angle: 360deg;
}
}
@property --angle {
syntax: "<angle>";
initial-value: 0deg;
inherits: false;
}
Hasil
Tampilannya kurang lebih bisa dilihat dibawah ini.
Terima kasih telah mengunjungi website kami.
Share jika bermanfaat, jika ada kritik, tambahan, pertanyaan atau saran silakan hubungi kami atau silakan isi di kolom komentar.
Komentar