Animation letter with html and css
Tuesday, 4 October 2022
Add Comment
Animation any letter/work with html and css
click or touch letter or word to animation auto run with give position
<!DOCTYPE html>
<html>
<head>
<title>Animation</title>
</head>
<style type="text/css">
#h2{
Color:Navy;
position:relative;
top:-200px;
right:-230px;
}
h2{
animation:myAnimation;
animation-duration:2s;
animation-iteration-count:infinite;
}
@keyframes myAnimation{
0%{
position:relative;
top:100px;
color:fuchsia;
left:0px;
}
25%{
position:relative;
top:100px;
color:lime;
left:200px;
}
50%{
position:relative;
top:100px;
color:red;
left:200px;
}
75%{
position:relative;
top:300px;
left:0px;
color:brown;
}
100%{
position:relative;
top:300px;
color:blue;
left:200px;
}
}
#h1{
Color:Navy;
position:relative;
}
h1{
animation:zp;
animation-duration:2s;
animation-iteration-count:infinite;
}
@keyframes zp{
0%{
position:relative;
top:0px;
color:fuchsia;
right:-200px;
}
20%{
position:relative;
top:0px;
color:lime;
right:-300px;
}
40%{
position:relative;
top:100px;
color:red;
right:-300px;
}
60%{
position:relative;
top:100px;
right:-200px;
color:brown;
}
80%{
position:relative;
top:200px;
color:blue;
right:-200px;
}
100%{
position:relative;
top:0px;
color:black;
right:-200px
}
}
#p3{
Color:Navy;
position:relative;
top:-200px;
right:-230px;
}
p3{
animation:zzp;
animation-duration:2s;
animation-iteration-count:infinite;
}
@keyframes zzp{
0%{
position:relative;
top:0px;
color:fuchsia;
right:0px;
}
25%{
position:relative;
top:0px;
color:lime;
right:-250px;
}
50%{
position:relative;
top:400px;
color:red;
right:-250px;
}
75%{
position:relative;
top:0px;
right:-250px;
color:brown;
}
100%{
position:relative;
top:0px;
color:blue;
right:0px;
}
}
#h3{
Color:Navy;
position:relative;
top:-200px;
right:-230px;
}
h3{
animation:za;
animation-duration:2s;
animation-iteration-count:infinite;
}
@keyframes za{
0%{
position:relative;
top:300px;
color:fuchsia;
right:0px;
}
25%{
position:relative;
top:0px;
color:lime;
right:-150px;
}
50%{
position:relative;
top:300px;
color:red;
right:-300px;
}
75%{
position:relative;
top:0px;
right:-150px;
color:brown;
}
100%{
position:relative;
top:300px;
color:blue;
right:0px;
}
}
h2{
display:none;
}
h1{
display:none;
}
p3{
display:none;
}
button{
position:relative;
top:10px;
margin:10px;
background:navy;
color:green;
width:50px;
height:40px;
}
button:hover {
position: sticky;
top:10px;
background:white;
color:green;
transition:2s;
}
h1{
display:none;
}
button:hover + h1{
display:block;
position:relative;
top:200px;
}
button:hover + h2{
display:block;
position:relative;
}
button:hover +h1{
font-size:30px;
display:block;
position:relative;
}
button:hover +p3{
font-size:30px;
display:block;
position:relative;
}
</style>
<body>
<button id="a">Zp</button>
<h2>Zeeshan</h2>
<button id="b">P</button>
<h1>P</h1>
<button id="c">A</button>
<h3>A</h3>
<button id="d">78</button>
<p3>7</p3>
</body>
</html>
0 Response to "Animation letter with html and css "
Post a Comment