所以我正在制作一种太阳系页面。我尝试做的是当一个人点击一个星球时，它会将他们重定向到页面。但由于某种原因，它不起作用。就像 anchor 不存在一样。我试图用图像为 anchor 标记设置动画，但这似乎不起作用。
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>
<!-- content to be placed inside <body>…</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>
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;
-webkit-animation: rot1 8s infinite linear;
}
@-webkit-keyframes rot1 {
0% { -webkit-transform: rotate(0deg) translate(300px) rotate(0deg); }
100% { -webkit-transform: rotate(360deg) translate(300px) rotate(-360deg); }
}
@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;
transparent 49%, black 49%, black 51%, transparent 51%);
animation: rot2 34s infinite linear;
-webkit-animation: rot2 34s infinite linear;
}
@-webkit-keyframes rot2 {
0% { -webkit-transform: rotate(0deg) translate(150px) rotate(0deg); }
100% { -webkit-transform: rotate(360deg) translate(150px) rotate(-360deg); }
}
@keyframes rot2 {
0% { transform: rotate(0deg) translate(150px) rotate(0deg); }
100% { transform: rotate(360deg) translate(300px) 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;
-webkit-animation: rot3 34s infinite linear;
}
@-webkit-keyframes rot3 {
0% { -webkit-transform: rotate(0deg) translate(50px) rotate(0deg); }
100% { -webkit-transform: rotate(360deg) translate(50px) rotate(-360deg); }
}
@keyframes rot3 {
0% { transform: rotate(0deg) translate(50px) rotate(0deg); }
100% { transform: rotate(360deg) translate(50px) rotate(-360deg); }
}
最佳答案
我不知道是否可以使用 CSS transform 属性移动真正的 anchor 位置(不仅仅是图形位置)，但是对于这个问题有一个非常简单的解决方案，无需使用 javascript :
您可以创建三个不可见的圆圈，在每个圆圈上放置链接，然后将它们放置在现有动画上。这种方法很好，因为即使用户点击了错误的位置，链接也会起作用。
请注意，我用透明的红色给圆圈上色，但您可以(并且应该)通过删除 background:rgba(255,0,0,0.5); 行来移除颜色。
这是相关的 CSS:
.circle1{
display:block;
position:absolute;
top:50%;
margin-top:-325px;
left:50%;
margin-left:-325px;
width:650px;
height:650px;
background:rgba(255,0,0,0.5); /* unnecessary */
border-radius:100%;
}
.circle2{
display:block;
position:absolute;
top:50%;
margin-top:-175px;
left:50%;
margin-left:-175px;
width:350px;
height:350px;
background:rgba(255,0,0,0.5); /* unnecessary */
border-radius:100%;
}
HTML:
<div id="one"><a id="aone" href="http://google.com"><img src="http://dedobbelaere.sisamul.com/one.png"></a>
</div>
<div id="two"><a id="aone" href="http://google.com"><img src="http://dedobbelaere.sisamul.com/two.png"></a>
</div>
<div id="three"></div>
<a class="circle1" href="http://dedobbelaere.sisamul.com/two.png"></div>
<a class="circle2" href="http://google.com"></div>
关于html - anchor 标记不适用于动画 div 中的 img，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23981092/