链接不工作的 HTML/CSS 轨道动画-6ren

链接不工作的 HTML/CSS 轨道动画

转载作者：行者123 更新时间：2023-11-28 03:03:39

我已经检查了我的代码一千次，但我仍然无法弄清楚如何允许单击动画对象(例如指向另一个页面的链接)。动画完美运行，但当我尝试单击链接时，它们无法正常运行。我知道页面上对象的放置存在问题，但我也不知道如何为它们制作动画，所以链接跟随动画。有没有办法只使用 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/

最佳答案

您可以使用 animation-play-state 属性在鼠标悬停时暂停动画。

.orbit-text-container:hover, .orbit-text-container:hover .orbit-text {
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
     animation-play-state: paused;
}

FIDDLE

.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:hover,
.orbit-text-container:hover .orbit-text {
  -webkit-animation-play-state: paused;
  -moz-animation-play-state: paused;
  -o-animation-play-state: paused;
  animation-play-state: paused;
}
.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%;
}

<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>

关于链接不工作的 HTML/CSS 轨道动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33556580/

文章推荐： c++ - boost circular_buffer 或堆排序性能

文章推荐： javascript - 无法使用 JS 切换侧边栏

文章推荐： C++/CX 属性在集合上抛出错误

python - 轨道 vs 轨道 2
我想使用 Orbited 进行聊天。我还找到了 Orbited2。有什么不同？ Orbited 死了没有？我想用solid solution，不用担心会被关闭或不支持。我还没有找到任何关于 Orbit
C++ SFML，轨道
我最近开始学习SFML，我有一个问题，如何使第二个物体在轨道上运动，请帮助。 #include using namespace sf; int main() { RenderWindow wi
Python tweepy 轨道
我正在尝试使用 Tweepy 获取所有带有关键字的推文，但它没有返回某些关键字的任何内容。例如，如果使用 Obama 作为关键字，我会收到很多推文，如果我使用 Arduino，我不会收到任何返回信息，
checkbox - 轨道 check_box_tag + label_tag
在我看来，我有一个复选框和一个标签。我正在使用 SLIM，所以代码是 = check_box_tag 'All Products' = label_tag 'All Products' 生成的等效 H
api - 如何嵌入 Soundcloud 轨道
正如倾斜所暗示的那样，我试图弄清楚如何嵌入 soundcloud 文件，以及如何轻松更改嵌入的声音.. 我有一个网站，目前，让用户写一个故事，然后附加一个图像或视频。对于视频，我使用 vimeo 和
iphone - 如何隐藏 UISlider 轨道？
我创建了一个在应用程序的实际背景上绘制的 slider 轨道，并且还绘制了 UISlider 拇指图像。我知道如何设置 slider 的缩略图。但如何隐藏 UISlider 轨道呢？最佳答案如果你
windows - 是否可以渐进式播放 DRMed 轨道
从 HTTP 链接下载的 Windows Media DRM 轨道是否可以合法渐进播放？我已经设法在没有 DRM 的情况下做到了这一点，但这里有人告诉我，使用 DRM 是不可能的。这是真的？如果是
javascript - 从字符串添加 .vtt 轨道
我有一个简单的 vtt 轨道文件编辑器，其中构建的 vtt 文件内容保存在 var vtt 中. 目前我通过保存vtt的内容来添加轨道。到文件，然后将文件读取为我想省略保存到文件的步骤，直接将变量
cookies - 轨道 3 cookies
我有一个简单的应用程序，用户可以在其中的文本字段中输入内容以获得各种结果。我想要一个功能，如果用户输入某些内容然后关闭浏览器选项卡，下次他们来时，我可以向他们展示他们之前/最近的搜索。即使他们关闭整个
java - 在不同线程中播放多个 MP3 轨道
我试图在不同的线程中同时运行 4 个 MP3 轨道。我正在使用 JLayer1.0 MP3 library播放 MP3。鉴于我无法控制线程何时启动，我使用 CountDownLatch 至少让它们同时
android - 播放 SoundCloud 轨道
我可以在我的 Android 应用程序中播放来自 SoundCloud 的轨道吗？我正在尝试这段代码，但它不起作用: String res = "https://api.soundcloud.com/
ios - 轨道 MPMediaItem 中的专辑插图
我正在使用 Apple Music API 的 recent played endpoint返回最近播放的媒体 Assets 列表。然后我使用其中之一并在 MPMusicPlayerControll
css - 轨道 css 选择器
我正在使用 Foundation Orbit slider 。它工作正常，只是我需要将一些 css(移动标题)应用于页面上的特定 slider 。如果我使用以下选择器，它会进行更改，唯一的问题是它是
html - 轨道 slider 中的中心文本和按钮元素？
我最难搞清楚如何在 Foundation 的 Orbit slider 中制作两个文本元素和一个按钮。对于这样的初学者问题，我深表歉意，但我是 Foundation 的新手，有些语法让我感到困惑。这
ios - 有没有一种简单的方法可以获取当前最流行的 SoundCloud 轨道？
我需要来自 SoundCloud 的“最流行”或“ HitTest 门的轨道”，但我找不到任何方法来做到这一点。我可以从 http://api.soundcloud.com/tracks?filter
session - 轨道 4 : Session Expiry?
我刚刚从 Rails 3.2 切换到 Rails 4。我正在努力确保我尽可能了解安全问题，并且我现在担心 session 。看起来 Rails 4 已经不再支持除基于 cookie 的 session
java - Android Exoplayer - 如何在离线播放时显示可用品质(轨道)
我正在开发一个应用程序，用户可以在其中流式传输或下载视频。我使用 ExoPlayer 2.9.6 实现了相同的功能。目前，在播放下载的内容时，当我尝试切换质量时，它仅显示下载的轨道。我知道它的默认行为
javascript - slider 标题问题(轨道 slider )
有谁知道制作这样的标题的最佳方法 http://i.imgur.com/NOSF0.png ？我试过使用 Firebug 并实现了这个 http://i.imgur.com/cMB3Y.png但是当我
javascript - 轨道 jquery slider 在最后一张幻灯片上暂停
我正在使用 Zurb 轨道 slider :http://www.zurb.com/playground/jquery_image_slider_plugin 我使用以下设置进行幻灯片放映: $(wi
javascript - Zurb 轨道 slider 未加载
所以我们在这里:http://greeceinsiders.com/VLASIOS/offcanvas/studio.html 我按照说明在页面中放置轨道 slider ，但这个似乎不起作用。我从其他

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

链接不工作的 HTML/CSS 轨道动画

FIDDLE