Question

所以我正在研究一种太阳系页面。我尝试做的是当一个人点击一个星球时，它会将它们重定向到页面。但由于某种原因，它不起作用。这就像锚不存在。我试图用图像设置锚标签的动画，但这似乎不起作用。

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); }
}

http://jsfiddle.net/DJsU9/

Answer 1

仅在嵌套的html元素上更正了sintax，在IE10和Chrome35（Windows 8 Pro）上进行了测试，但可能需要修复某些平台/跨浏览器问题。无论如何，你应该为你的超链接设置一个唯一的ID

http://jsfiddle.net/InferOn/DJsU9/11/

<强> HTML

<div id="one">
 <a id="aone" target="_blank" href="http://google.com">
  <img src="http://dedobbelaere.sisamul.com/one.png"/>
 </a>
</div>
<div id="two">
 <a id="aone" target="_blank" href="http://google.com">
  <img src="http://dedobbelaere.sisamul.com/two.png"/>
 </a>
</div>
<div id="three"></div>

<强> CSS

/**
 * Prevent an element to rotate itself in a circular CSS3 animation
 * http://stackoverflow.com/q/14057780/1397351
 */
 a {
    border: 1px solid red;
}
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);
    }
}

Answer 2

我不知道是否可以使用CSS transform属性移动真实的锚点位置（而不仅仅是图形位置），但是在不使用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>

JSFiddle

锚标记不适用于动画div中的img

2 个答案: