Membuat Animasi Glowing Dots dengan CSS dan HTML
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
Komentar
Posting Komentar