<html>
<head>
<style>
body{
background-color: #00bcd4;
}
.card{
float:left;
width: 10%;
height:10%;
padding-top:3%;
margin:2%;
box-shadow: 0 1px 2px black;
background: white;
border-radius: 5px;
text-align:center;
-webkit-animation: fly4 2s 0s both;
animation: fly4 2s 0s ease both;
}
.card:hover {
cursor: pointer;
float:left;
width: 10%;
height:10%;
padding-top:3%;
margin:2%;
box-shadow: 0 1px 2px black;
background: red;
border-radius: 5px;
text-align:center;
animation:show 1s 0s ease both;
-webkit-animation:show 0.125s 0s ease both;
}
.card1{
float:right;
width: 10%;
height:10%;
padding-top:3%;
margin:2%;
box-shadow: 0 1px 2px black;
background: white;
border-radius: 5px;
text-align:center;
-webkit-animation: fly4 2s 0s both;
animation: fly4 2s 0s ease both;
}
.card1:hover {
cursor: pointer;
float:right;
width: 10%;
height:10%;
padding-top:3%;
margin:2%;
box-shadow: 0 1px 2px black;
background: red;
border-radius: 5px;
text-align:center;
animation:show 1s 0s ease both;
-webkit-animation:show 0.125s 0s ease both;
}
.card2{
float:left;
width: 30%;
height:10%;
padding-top:3%;
margin:2%;
box-shadow: 0 1px 2px black;
background: white;
border-radius: 5px;
-webkit-animation: fly 1s 1s both;
animation: fly 1s 1s ease both;
text-align:center;
}
.card3{
text-align:center;
float:left;
width: 10%;
height:10%;
padding-top:3%;
margin:2%;
box-shadow: 0 1px 2px black;
background: white;
border-radius: 5px;
-webkit-animation: fly4 1s 1s both;
animation: fly4 1s 1s ease both;
}
.card3{
cursor: pointer;
}
.card4{
float:left;
width: 45%;
height:60%;
padding-top:3%;
margin:2%;
box-shadow: 0 1px 2px black;
background: white;
border-radius: 5px;
-webkit-animation: fly5 1.5s 1.5s both;
animation: fly5 1.5s 1.5s ease both;
text-align:center;
}
a{
text-decoration:none;
text-color:black;
color:black;
}
@keyframes fly {
from {
transform: translateY(80em) rotate(-1620deg) scale(2,5);
opacity:0;
}
}
@-webkit-keyframes fly {
from {
-webkit-transform: translateY(80em) rotate(-1620deg) scale(2,5);
opacity:0;
}
}
@keyframes fly1 {
from {
transform:translateX(150vw) translateY(80em) rotate(-1620deg) scale(2,5);
opacity:0;
}
}
@-webkit-keyframes fly1 {
from {
-webkit-transform:translateX(150vw) translateY(80em) rotate(-1620deg) scale(2,5);
opacity:0;
}
}
@keyframes fly2 {
from {
transform:translateX(-150vw) translateY(80em) rotate(-1620deg) scale(2,5);
opacity:0;
}
}
@-webkit-keyframes fly2 {
from {
-webkit-transform:translateX(-150vw) translateY(80em) rotate(-1620deg) scale(2,5);
opacity:0;
}
}
@keyframes fly3 {
from {
transform-origin:50% 50%;
transform: translateY(80em) rotate3d(0,100,0,1080deg) scale(2,5);
opacity:0;
}
}
@-webkit-keyframes fly3 {
from {
-webkit-transform-origin:50% 50%;
-webkit-transform:translateY(80em) rotate3d(0,100,0,1080deg) scale(2,5);
opacity:0;
}
}
@keyframes fly4 {
from {
transform: rotate3d(200,100,100,1080deg) scale(2,5);;
opacity:0;
}
}
@-webkit-keyframes fly4 {
from {
-webkit-transform:rotate3d(200,100,100,1080deg) scale(2,5);
opacity:0;
}
}
@keyframes fly5 {
from {
transform-origin:50% 50%;
transform: translateY(80em) rotate3d(0,100,0,1080deg);
opacity:0;
}
}
@-webkit-keyframes fly5 {
from {
-webkit-transform-origin:50% 50%;
-webkit-transform:translateY(80em) rotate3d(0,100,0,1080deg) scale(5,10);
opacity:0;
}
}
</style>
</head>
<body>
<section style="clear:both">
<a href="#"><div class="card">
<Strong>Sports</Strong>
</div></a>
<a href="#">
<div class="card3" style="-webkit-animation: fly1 1.5s 1s ease both;
animation: fly1 1.5s 1s ease both;
margin-left:7%; ">
<Strong>Prev Article</Strong>
</div>
<div class="card2">
<Strong>Current Article</Strong>
</div>
<a href="#">
<div class="card3" style=" -webkit-animation: fly2 1.5s 1s ease both;
animation: fly2 1.5s 1s ease both;">
<Strong>Next Article</Strong>
</div>
</a>
<a href="#">
<div class="card1" >
<Strong>Asia</Strong>
</div>
</a>
</section>
<section style="clear:both">
<a href="#">
<div class="card">
<Strong>Politics</Strong>
</div>
</a>
<div class="card4" style="margin-left:13%;">
News Article
</div>
<a href="#">
<div class="card1" >
<Strong>Europe<br>and<br/>Australia</Strong>
</div>
</a>
</section >
<section style="margin-top:-40vh;clear:both">
<a href="#">
<div class="card" style="margin-top:-22%;">
<Strong>Current Affairs</Strong>
</div>
</a>
<a href="#">
<div class="card1" style="margin-top:-22%;">
<Strong>America</Strong>
</div>
</a>
</section>
<section style="clear:both">
<a href="#">
<div class="card" style="margin-top:-10%;">
<Strong>Business</Strong>
</div>
</a>
<a href="#">
<div class="card1" style="margin-top:-10%;" >
<Strong>World</Strong>
</div>
</a>
</section>
</body>
</html>
No comments:
Post a Comment