As I am currently developing a solar system webpage, my aim is to redirect users to a specific page when they click on a planet. Unfortunately, the anchor tag does not seem to be functioning as intended. I attempted to animate the anchor tag with an image, but that did not resolve the issue.
The HTML
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<div id="one"><a id="aone" href="http://google.com"><img src="one.png"></a></div>
<div id="two"><img src="two.png"></div>
<div id="three"></div>
</body>
</html>
The CSS
body{
position: absolute;
top: 50%; left: 50%;
margin: -150px;
border: dashed 1px;
width: 300px; height: 300px;
border-radius: 50%;
content: '';
}
#one {
text-align: center;
position: absolute;
top: 50%; left: 50%;
margin: -25px;
width: 50px; height: 50px;
animation: rot1 8s infinite linear;
}
@keyframes rot1 {
0% { transform: rotate(0deg) translate(300px) rotate(0deg); }
100% { transform: rotate(360deg) translate(300px) rotate(-360deg); }
}
#two {
text-align: center;
position: absolute;
top: 50%; left: 50%;
margin: -25px;
width: 50px; height: 50px;
animation: rot2 34s infinite linear;
}
@keyframes rot2 {
0% { transform: rotate(0deg) translate(150px) rotate(0deg); }
100% { transform: rotate(360deg) translate(150px) rotate(-360deg); }
}
#three {
text-align: center;
position: absolute;
top: 50%; left: 50%;
margin: -25px;
width: 50px; height: 50px;
background:
linear-gradient(transparent 49%, black 49%, black 51%, transparent 51%),
rgba(0,0,255,.3) linear-gradient(90deg,
transparent 49%, black 49%, black 51%, transparent 51%);
animation: rot3 34s infinite linear;
}
@keyframes rot3 {
0% { transform: rotate(0deg) translate(50px) rotate(0deg); }
100% { transform: rotate(360deg) translate(50px) rotate(-360deg); }
}