Script-uri HTML|CSS: Efect de Loading Text.

Script-uri HTML|CSS: Efect de hover folosiind CSS si HTML

Salut, de aici poți descărca script-uri HTML și CSS total gratuit. Pentru astăzi am pregătit un text cu un efect de loading text.

Pentru început adaugă urmatoarele rânduri într-un fișier HTML:

<!DOCTYPE html>
<html>
<head>
<title>Loading Text Animation Effects CSS Text Shadow</title>
<link rel=”stylesheet” type=”text/css” href=”style.css”>
</head>
<body>
<div class=”loader”>
<span>L</span>
<span>O</span>
<span>A</span>
<span>D</span>
<span>I</span>
<span>N</span>
<span>G</span>
<span>.</span>
<span>.</span>
<span>.</span>
</div>
</body>
</html>

După aceea, intr-un fișier CSS adăugați următoarele:

body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}

.loader {
position: relative;
display: flex;
}

.loader span {
color: #fff;
margin: 0 15px;
font-size: 8em;
font-weight: bold;
animation: animate 2.4s linear infinite;
font-family: sans-serif;
}

.loader span:nth-child(1)
{
animation-delay: 0s;
}
.loader span:nth-child(2)
{
animation-delay: 0.2s;
}
.loader span:nth-child(3)
{
animation-delay: 0.4s;
}
.loader span:nth-child(4)
{
animation-delay: 0.6s;
}
.loader span:nth-child(5)
{
animation-delay: 0.8s;
}
.loader span:nth-child(6)
{
animation-delay: 1s;
}
.loader span:nth-child(7)
{
animation-delay: 1.2s;
}
.loader span:nth-child(8)
{
animation-delay: 1.4s;
}

@keyframes animate
{
0%
{
text-shadow: 0 0 10px rgba(0, 0, 0, 0);
transform: scale(1);
}
40%
{
text-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
transform: scale(1.4);
}
80%,100%
{
text-shadow: 0 0 10px rgba(0, 0, 0, 0);
transform: scale(1);
}
}

Citește și: Când este necesar să înlocuiești bateria telefonului.

Sau poți descărca de aici un fișier RAR.

Intra in discutie!

%d blogeri au apreciat: