【发布时间】：2015-11-06 08:10:13
【问题描述】：
我已经查看了我的代码一千次，但我仍然无法弄清楚如何允许点击动画对象（例如指向另一个页面的链接）。动画效果很好，但是当我尝试单击链接时，它们无法正常工作。我知道页面上的对象放置存在问题，但我不知道如何为它们设置动画，因此链接跟随动画。有没有办法只用 HTML 和 CSS 来做到这一点？如果我必须使用其他语言，Java 或 Perl 是首选。
感谢您的帮助！
这是我的相关 html 和 css：（没有包含太多样式，只是基础知识）
.orbit-container {
position: absolute;
top: 50%;
left: 50%;
width: 550px;
height: 550px;
margin-top: -275px;
margin-left: -275px;
border-width: 2px;
border-style: dotted;
border-color: white;
border-radius: 50%;
-webkit-animation: orbit 20s linear infinite;
-moz-animation: orbit 20s linear infinite;
-ms-animation: orbit 20s linear infinite;
-o-animation: orbit 20s linear infinite;
animation: orbit 20s linear infinite;
}
.orbit-text-container {
position: absolute;
top: 50%;
left: 50%;
width: 550px;
height: 550px;
margin-top: -275px;
margin-left: -275px;
-webkit-animation: orbit 20s linear infinite;
-moz-animation: orbit 20s linear infinite;
-ms-animation: orbit 20s linear infinite;
-o-animation: orbit 20s linear infinite;
animation: orbit 20s linear infinite;
}
@-webkit-keyframes orbit {
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes orbit {
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes orbit-text {
100% {
-webkit-transform: rotate(-360deg);
-moz-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
transform: rotate(-360deg);
}
}
@keyframes orbit-text {
100% {
-webkit-transform: rotate(-360deg);
-moz-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
transform: rotate(-360deg);
}
}
.orbit-text {
-webkit-animation: orbit-text 20s linear infinite;
-moz-animation: orbit-text 20s linear infinite;
-ms-animation: orbit-text 20s linear infinite;
-o-animation: orbit-text 20s linear infinite;
animation: orbit-text 20s linear infinite;
}
.circle-large-center {
top: 50%;
left: 50%;
margin-top: -190px;
margin-left: -190px;
}
.circle-small-top {
position: relative;
top: 0;
left: 50%;
margin-left: -60px;
margin-top: -60px;
}
.circle-text-top {
top: 0;
left: 0;
margin-top: -245px;
}
.circle-small-bottom {
position: relative;
top: 90%;
left: 50%;
margin-left: -60px;
margin-top: -60px;
}
.circle-text-bottom {
top: 0;
left: 0;
margin-top: 490px;
}
.circle-small-left {
position: relative;
top: 31%;
left: 100%;
margin-left: -60px;
margin-top: -60px;
}
.circle-text-left {
top: 0;
left: 20%;
margin-top: -330px;
margin-left: 330px;
}
.circle-small-right {
position: relative;
top: 20%;
left: 0;
margin-left: -60px;
margin-top: -60px;
}
.circle-text-right {
top: 0;
left: 0;
margin-left: -550px;
margin-top: -60px;
}
.circle-text-center {
top: 0;
left: 0;
width: 20%;
margin-left: 130px;
margin-top: 230px;
}
.circle-button-large {
position: absolute;
box-shadow: 2px 4px 0 2px rgba(0,0,0,0.1);
background-color: #F5FAFA;
border-radius: 50%;
height: 380px;
width: 380px;
opacity: 0.9;
}
.back-image {
background-color: #3383B8;
color: #F5FAFA;
background-repeat: no-repeat;
background-position: center;
}
.text-medium-large {
font-size: 30px;
}
.text-center {
position: relative;
text-align: center;
padding: 10px;
top: 40%;
}<head>
<link href='https://fonts.googleapis.com/css?family=Exo:200' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
</head>
<div class="container-fluid back-image screen">
<div class="circle-button-large circle-large-center"></div>
<div class="orbit-text-container">
<div class="text-center text-medium-large circle-text-top orbit-text"><a href="text1.html">Text1</a></div>
<div class="text-center text-medium-large circle-text-bottom orbit-text"><a href="text2.html">Text2</a></div>
<div class="text-center text-medium-large circle-text-left orbit-text"><a href="text3.html">Text3</a></div>
<div class="text-center text-medium-large circle-text-right orbit-text"><a href="text4.html">Text4</a></div>
</div>
</div>编辑：（2015 年 11 月 5 日）：
这是我的 JSFiddle： https://jsfiddle.net/hkht1txy/
【问题讨论】：
-
点击对我来说很好。
-
你可以像this一样暂停悬停动画
-
谢谢@Danield！效果很好。
-
@CalebR - 由于该解决方案对您有用，因此我将其添加为答案
标签： html css animation hyperlink