Membuat Animasi Glowing Dots dengan CSS dan HTML
Apr 21, 2018
Add Comment
Selamat siang, kali ini admin masih membahas tentang animasi. pada kesempatan kali ini kita akan membuat animasi glowing dots dengan HTML dan CSS.
Langkah pertama buat dulu struktur HTML nya seperti dibawah :
Selanjutnya masukan kode CSS berikut
Sekarang lihat hasilnya di browser jika tampilanya seperti di atas berarti animasi glowing dots anda sudah jadi, selamat mencoba. jika artikel ini bermanfaat silakan share ke teman anda
Langkah pertama buat dulu struktur HTML nya seperti dibawah :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Glowing Dots</title>
<link rel="stylesheet" href="css/glowing.css">
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
Selanjutnya masukan kode CSS berikut
body {
margin: 0; padding: 0; background: #262626; }
ul {
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0; padding: 0; display: flex; }
ul li {
list-style: none; width: 40px; height: 40px; background: #fff; border-radius: 50%; animation: animate 1.6s ease-in-out infinite; }
@keyframes animate {
0%, 40%, 100% {
transform: scale(0.2); }
20% {
transform: scale(1); }
}
ul li:nth-child(1)
{
animation-delay: -1.4s; background: #ffff00; box-shadow: 0 0 50px #ffff00; }
ul li:nth-child(2)
{
animation-delay: -1.2s; background: #76ff03; box-shadow: 0 0 50px #76ff03; }
ul li:nth-child(3)
{
animation-delay: -1s; background: #f06292; box-shadow: 0 0 50px #f06292; }
ul li:nth-child(4)
{
animation-delay: -0.8s; background: #4fc3f7; box-shadow: 0 0 50px #4fc3f7; }
ul li:nth-child(5)
{
animation-delay: -0.6s; background: #ba68c8; box-shadow: 0 0 50px #ba68c8; }
ul li:nth-child(6)
{
animation-delay: -0.4s; background: #f57c00; box-shadow: 0 0 50px #f57c00; }
ul li:nth-child(7)
{
animation-delay: -0.2s; background: #673ab7; box-shadow: 0 0 50px #673ab7; }Sekarang lihat hasilnya di browser jika tampilanya seperti di atas berarti animasi glowing dots anda sudah jadi, selamat mencoba. jika artikel ini bermanfaat silakan share ke teman anda
Autodika.com menyediakan jawaban serta materi seputar tugas kuliah Manajemen Informatika, Sistem Informasi, Teknik Informatika dan berbagai macam tugas kuliah yang berkaitan tentang teknologi.
0 Response to "Membuat Animasi Glowing Dots dengan CSS dan HTML"
Post a Comment