GgNpxz

GgNpxz.markdown

GgNpxz

A Pen by Muhammad Zubair Saleem on CodePen.

License.

index.html

<div><h1 align="center">Z</h1></div>
<div><h1 align="center">U</h1></div>
<div><h1 align="center">B</h1></div>
<div><h1 align="center">A</h1></div>
<div><h1 align="center">I</h1></div>
<div><h1 align="center">R</h1></div>

style.css

div {
    width: 100px;
    height: 100px;
    background: red;
    position: relative;
border-radius:10%;
 float:left;
 align-items:center;
    -webkit-animation: mymove 5s infinite;  /* Chrome, Safari, Opera */
    margin-left:5px;;
    }
h1{
	
	align-self:center;
	font-size:50px;
	font-family:antic;
	color:#000000;
	text-shadow:3px 3px 0.3em;
}

@-webkit-keyframes mymove {
0% {left: 0px; top:0px; background: linear-gradient(red,white);transform: rotate(0deg);}
25% {left: 700px; top:0px; background: linear-gradient(white,purple); transform: rotate(360deg);}
50% {left: 0px; top:500px; background: linear-gradient(white,purple); transform: rotate(720deg);}
90% {left: 700px; top:500px; background: linear-gradient(red,white); transform: rotate(1080deg);}
100% {left: 0px; top:0px; background: linear-gradient(red,white); transform: rotate(1400deg);}