Some Animation With MAA Blogger
<html>
<head><title>Animation</title>
<body background="a.jpg">
<style type="text/css">
body{
background:rgb(21, 190, 241);
width:100%;
height:100%;
}
hr{
padding:0%;
margin-top:-9%;
width:80%;
height:1%;
background:#00f;
}
h1{
margin-top:20%;
text-transform:uppercase;
text-align:center;
}
h1 span{
display:inline-block;
}
h1 span:nth-child(odd) {
color:rgb(255, 105, 19);
animation:jump .4s alternate infinite;
}
h1 span:nth-child(even) {
color:rgb(251, 255, 0)
animation:jump .3s alternate infinite;
}
@keyframes jump{
0%{
transform:translateY(-100%);
}
100%{
transform:translateY(0%);
}
}
.t h1{
width:100%;
height:30%;
text-align:center;
text-transform:uppercase;
font-size:480%;
color:rgba(225,225,225,.1);
background:linear-gradient(blue 5px,#f00 30px,green 40px,hotpink 50px,seagreen 60px,#ff0 70px,#0f0 80px,#0ff 90px,#f0f 100px,#090909 10px);
-webkit-background-clip:text;
background-size:200px;
animation:move 90s linear infinite;
}
@keyframes move{
0%{
background-position:0% 200%;
}
20%{
background-position:200% 400%;
}
40%{
background-position:400% 600%;
}
60%{
background-position:600% 800%;
}
80%{
background-position:800% 1000%;
}
100%{
background-position:1000% 0%;
}
}
.to h1{
width:100%;
height:30%;
padding:0%;
margin:0%;
/*border:0%;*/
text-align:center;
text-transform:uppercase;
font-size:280%;
color:rgba(225,225,225,.1);
background:linear-gradient(#000 45%,hotpink 30%);
-webkit-background-clip:text;
background-size:200px;
animation:tomove 80s linear infinite;
}
@keyframes tomove{
0%{
background-position:0% 200%;
}
20%{
background-position:200% 400%;
}
40%{
background-position:400% 600%;
}
60%{
background-position:600% 800%;
}
80%{
background-position:800% 1000%;
}
100%{
background-position:1000% 0%;
}
}
.tt h1{
width:100%;
height:30%;
padding:0%;
margin:0%;
text-align:center;
text-transform:uppercase;
font-size:600%;
color:rgba(225,225,225,.1);
background:linear-gradient(#262626,#fff,#262626);
-webkit-background-clip:text;
background-size:300px;
}
.tth h1{
width:100%;
height:30%;
padding:0%;
margin:0%;
text-align:center;
text-transform:uppercase;
font-size:600%;
color:rgba(225,225,225,.1);
background:linear-gradient(#262626,#FFD700,#262626);
-webkit-background-clip:text;
background-size:300px;
}
h2{
color:red;
animation:type 4s steps(28) infinite;
overflow:hidden;
white-space:nowrap;
height:10%;
font-size:150%;
}
@keyframes type{
0%{
width:0ch;
}
100%{
width:28ch;
}
}
</style>
</body>
</head>
<body>
<h1>
<span><font size="12">M</font></span>
<span>A</span>
<span>A</span>
<span><font size="12">B</font></span>
<span>L</span>
<span>O</span>
<span>G</span>
<span>G</span>
<span>E</span>
<span>R</span>
</h1>
<hr>
<div class="t">
<h1>Follow & Share</h1>
</div>
<h2>Thanks for visiting my blog.</h2>
</body>
</html>
<head><title>Animation</title>
<body background="a.jpg">
<style type="text/css">
body{
background:rgb(21, 190, 241);
width:100%;
height:100%;
}
hr{
padding:0%;
margin-top:-9%;
width:80%;
height:1%;
background:#00f;
}
h1{
margin-top:20%;
text-transform:uppercase;
text-align:center;
}
h1 span{
display:inline-block;
}
h1 span:nth-child(odd) {
color:rgb(255, 105, 19);
animation:jump .4s alternate infinite;
}
h1 span:nth-child(even) {
color:rgb(251, 255, 0)
animation:jump .3s alternate infinite;
}
@keyframes jump{
0%{
transform:translateY(-100%);
}
100%{
transform:translateY(0%);
}
}
.t h1{
width:100%;
height:30%;
text-align:center;
text-transform:uppercase;
font-size:480%;
color:rgba(225,225,225,.1);
background:linear-gradient(blue 5px,#f00 30px,green 40px,hotpink 50px,seagreen 60px,#ff0 70px,#0f0 80px,#0ff 90px,#f0f 100px,#090909 10px);
-webkit-background-clip:text;
background-size:200px;
animation:move 90s linear infinite;
}
@keyframes move{
0%{
background-position:0% 200%;
}
20%{
background-position:200% 400%;
}
40%{
background-position:400% 600%;
}
60%{
background-position:600% 800%;
}
80%{
background-position:800% 1000%;
}
100%{
background-position:1000% 0%;
}
}
.to h1{
width:100%;
height:30%;
padding:0%;
margin:0%;
/*border:0%;*/
text-align:center;
text-transform:uppercase;
font-size:280%;
color:rgba(225,225,225,.1);
background:linear-gradient(#000 45%,hotpink 30%);
-webkit-background-clip:text;
background-size:200px;
animation:tomove 80s linear infinite;
}
@keyframes tomove{
0%{
background-position:0% 200%;
}
20%{
background-position:200% 400%;
}
40%{
background-position:400% 600%;
}
60%{
background-position:600% 800%;
}
80%{
background-position:800% 1000%;
}
100%{
background-position:1000% 0%;
}
}
.tt h1{
width:100%;
height:30%;
padding:0%;
margin:0%;
text-align:center;
text-transform:uppercase;
font-size:600%;
color:rgba(225,225,225,.1);
background:linear-gradient(#262626,#fff,#262626);
-webkit-background-clip:text;
background-size:300px;
}
.tth h1{
width:100%;
height:30%;
padding:0%;
margin:0%;
text-align:center;
text-transform:uppercase;
font-size:600%;
color:rgba(225,225,225,.1);
background:linear-gradient(#262626,#FFD700,#262626);
-webkit-background-clip:text;
background-size:300px;
}
h2{
color:red;
animation:type 4s steps(28) infinite;
overflow:hidden;
white-space:nowrap;
height:10%;
font-size:150%;
}
@keyframes type{
0%{
width:0ch;
}
100%{
width:28ch;
}
}
</style>
</body>
</head>
<body>
<h1>
<span><font size="12">M</font></span>
<span>A</span>
<span>A</span>
<span><font size="12">B</font></span>
<span>L</span>
<span>O</span>
<span>G</span>
<span>G</span>
<span>E</span>
<span>R</span>
</h1>
<hr>
<div class="t">
<h1>Follow & Share</h1>
</div>
<h2>Thanks for visiting my blog.</h2>
</body>
</html>
OUTPUT
Posts
52 Comments
Nice
ReplyDeleteAmazing
ReplyDeleteNice work
ReplyDeleteGood
ReplyDeleteNice
ReplyDeleteBeautiful
ReplyDeleteBeautiful
ReplyDeleteSuper
ReplyDeletenicely done
ReplyDeleteperfect
ReplyDeleteBeautiful
ReplyDeleteBeautiful
ReplyDeleteBeautiful
ReplyDeleteBeautiful
ReplyDeleteBeautiful
ReplyDeleteBeautiful
ReplyDeleteKallu
ReplyDeleteWowwww
Beautiful
ReplyDeleteWow
Beautiful
ReplyDeletenice
Intelligent
ReplyDeleteBeautiful
ReplyDeleteWow
ReplyDeleteSuper
ReplyDeleteBeautiful
ReplyDeleteWonderful
ReplyDeleteWow
ReplyDeleteNice Animation
ReplyDeleteNice
ReplyDeletePerfect 👌
ReplyDeleteBeautiful
ReplyDeleteGood Animation
ReplyDeleteGreat
ReplyDeleteNICE
ReplyDeleteBeautiful
ReplyDeleteBeautiful
ReplyDeleteWow
ReplyDeleteNice
ReplyDeleteSuperb
ReplyDeleteWow
ReplyDeleteKallu
ReplyDeleteNice
good job
ReplyDeleteAwsm
ReplyDeleteGreat
ReplyDeleteGood
ReplyDeleteNicely done
ReplyDeleteWonderful
ReplyDeleteGazab
ReplyDeleteWonderful
ReplyDeleteNice
ReplyDeleteKallu
ReplyDeleteNice
wow amazing
ReplyDeleteVery nice
ReplyDelete