Source code
   👇👇👇

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body{
display:flex;
justify-content:center;
align-items:center;
min-height:100vh;
background:#262626;
}
.container span{
color:rgba(255,255,255,0.1);
font-size:25px;
font-family:Arial,sans-serif;
text-transform:uppercase;
display:inline-block;
transition:all 0.5s;
animation:a 2s infinite;
}
span:nth-child(1){
animation-delay:0s;
}
span:nth-child(2){
animation-delay:0.2s;
}
span:nth-child(3){
animation-delay:0.4s;
}
span:nth-child(4){
animation-delay:0.6s;
}
span:nth-child(5){
animation-delay:0.8s;
}
span:nth-child(6){
animation-delay:1s;
}
span:nth-child(7){
animation-delay:1.2s;
}
span:nth-child(8){
animation-delay:1.4s;
}
span:nth-child(9){
animation-delay:1.6s;
}
span:nth-child(10){
animation-delay:1.8s;
}
@keyframes a{
0%{
transform:translateY(0);
margin-left:0px;
}
25%{
color:red;
transform:translateY(-15px)
scale(5);
margin-left:10px;
text-shadow:0px 15px 5px
rgba(0,0,0,1);
}
100%{
color:green;
transform:translateY(0);
margin-left:0px;
}
}
</style>
</head>
<body>
<div class="container">
<span>w</span>
<span>e</span>
<span>b</span>
<span>.</span>
<span>h</span>
<span>t</span>
<span>m</span>
<span>l</span>
<span>c</span>
<span>c</span>
</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body{
display:flex;
justify-content:center;
align-items:center;
height:100vh;
background:#262626;
}
.container{
width:200px;
height:200px;
position:relative;
}
.container div{
width:100px;
height:100px;
position:absolute;
border-radius:50%;
animation:a 1.5s linear infinite;
filter:drop-shadow(0px 0px 10px red);
}
.container div:nth-child(1)
{
top:10px;
left:20px;
border-left:5px solid red;
}
.container div:nth-child(2)
{
top:10px;
right:20px;
border-top:5px solid red;
}
.container div:nth-child(3)
{
bottom:45px;
left:50px;
border-right:5px solid red;
}

@keyframes a{
0%{
transform:rotate(0deg);
}
100%{
transform:rotate(360deg);
}
}
</style>
</head>
<body>
<div class="container">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body{
display:flex;
justify-content:center;
align-items:center;
height:100vh;
background:#262626;
}
.container{
width:300px;
height:100px;
position:relative;
}
.container input{
margin:20px 20px;
width:250px;
height:30px;
padding:5px;
outline:none;
}
h2{
color:red;
font-family:Courier new,monospace;
text-shadow:0px 0px 10px red;
text-align:center;
text-transform:uppercase;
animation:a 2s linear alternate
infinite;
}
@keyframes a{
0%{
transform:translateX(30px);
}
100%{
transform:translateX(-30px);

}
}
</style>
</head>
<body>
<div class="container">
<h2 id="heading"></h2>
<input
type="text"
id="input"
onkeyup="abc()"
placeholder="Enter a text "
>
</div>
<script type="text/javascript">
function abc(){
var heading =
document.getElementById('heading');
var input =
document.getElementById('input');

heading.innerHTML=input.value;
}
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body{
display:flex;
justify-content:center;
align-items:center;
height:100vh;
background:#262626;
}
.container div{
display:flex;
justify-content:center;
align-items:center;
border-radius:50px;
border-top:3px solid red;
animation:a 3s linear alternate
infinite;
}
.innerDiv1
{
width:100px;
height:100px;
}
.innerDiv2
{
width:90px;
height:90px;
}
.innerDiv3
{
width:80px;
height:80px;
}
.innerDiv4
{
width:70px;
height:70px;
}
.innerDiv5
{
width:60px;
height:60px;
}
.innerDiv6
{
width:50px;
height:50px;
}
.innerDiv7
{
width:40px;
height:40px;
}
.innerDiv8
{
width:30px;
height:30px;
}
.innerDiv9
{
width:20px;
height:20px;
}
.innerDiv10
{
width:10px;
height:10px;
}
@keyframes a{
0%{
transform:rotate(90deg);
}
100%{
transform:rotate(-90deg);
}
}
</style>
</head>
<body>
<div class="container">
<div class="innerDiv1">
<div class="innerDiv2">
<div class="innerDiv3">
<div class="innerDiv4">
<div class="innerDiv5">
<div class="innerDiv6">
<div class="innerDiv7">
<div class="innerDiv8">
<div class="innerDiv9">
<div class="innerDiv10">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

SOURCE CODE
👇👇👇

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body{
display:flex;
justify-content:center;
align-items:center;
min-height:100vh;
background:#262626;
}
.container{
width:150px;
height:150px;
border:none;
display:grid;
grid-template-columns:1fr 1fr 1fr;
place-items:center;
}
.container div{
width:15px;
height:15px;
background:#fff;
margin:3px;
animation:a 1s linear alternate
infinite;
}
.container .abc{
animation-delay:1s;
}
@keyframes a{
0%{
width:15px;
height:15px;
border-radius:0 50% 0 50%;
}
100%{
width:40px;
height:40px;
background:red;
border-radius:50% 0 50% 0;
}
}

</style>
</head>
<body>
<div class="container">
<div class="div1"></div>
<div class="div2 abc"></div>
<div class="div3"></div>
<div class="div4 abc"></div>
<div class="div5"></div>
<div class="div6 abc"></div>
<div class="div7"></div>
<div class="div8 abc"></div>
<div class="div9"></div>
</div>
</body>
</html>

SOURCE CODE
👇👇👇