【发布时间】：2017-02-03 03:18:14
【问题描述】：
我在创建可以在 CSS3 和 HTML 中旋转的导航栏时遇到问题。我怎样才能做到这一点？下面是来自旧游戏的想法的图片。我想要它使用的相同动画类型。当它位于活动圆圈上时，将显示该页面。当你左右移动时，页面会改变。有没有办法做到这一点？如何在 CSS3 和 HTML5 中创建它。
我已经添加了一个代码 sn-p 到目前为止我所做的基本想法。我需要两个按钮来允许动画向左或向右移动，而不是 1、2、3、4。
这个想法来自 SliderDock。适用于 Windows 和 MacOS 的扩展坞。 如果我没记错的话，CSS3 应该可以完成这个任务。
http://img05.deviantart.net/d13f/i/2011/139/7/4/altimit_mine_os_by_tenshi_no_chi-d3gowsq.png
* {
margin: 0;
padding: 0;
-webkit-backface-visibility: hidden;
}
/*HEADER*/
.header {
height: 25px;
background: #222;
color: #eee;
text-align: center;
font: 10px/25px Helvetica, Verdana, sans-serif;
}
.header a {
color: #999;
}
/*WRAPPER*/
.wrapper {
position: relative;
overflow: hidden;
margin: 20px auto;
width: 370px;
}
.menu a {
margin-right: -4px;
padding: 10px 30px;
width: 50px;
color: #333;
text-decoration: none;
font: 15px/25px Helvetica, Arial, sans-serif;
}
.menu a:hover {
background: #eee;
}
/*INNER CIRCLE*/
.wrapper:before {
content: "Menu";
text-align: center;
font: 30px/120px Georgia, Times, serif;
color: #black;
position: absolute;
top: 140px;
left: 110px;
z-index: 10;
width: 130px;
height: 130px;
border-radius: 50%;
background: #fff;
-webkit-box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
}
/*MAIN CIRCLE*/
.circle {
position: relative;
margin-top: 30px;
margin-bottom: 20px;
margin-left: 25px;
width: 300px;
height: 300px;
border-radius: 50%;
background: #white;
box-shadow: inset 0px 0px 30px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: inset 0px 0px 30px rgba(0, 0, 0, 0.3);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
/*LITTLE CIRCLES*/
.circle li {
position: absolute;
width: 50px;
height: 50px;
border-radius: 50%;
background: white;
list-style-type: none;
text-align: center;
font: 20px/50px Helvetica, Arial, sans-serif;
top: 0;
left: 0;
}
.circle li:nth-child(1) {
top: 15px;
left: 125px;
}
.circle li:nth-child(2) {
top: 125px;
left: 235px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
.circle li:nth-child(3) {
top: 235px;
left: 125px;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
.circle li:nth-child(4) {
top: 125px;
left: 15px;
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
}
/*HOVER STATES*/
.menu > .one:hover ~ .circle {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
.menu > .two:hover ~ .circle {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.menu > .three:hover ~ .circle {
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
-o-transform: rotate(-180deg);
transform: rotate(-180deg);
}
.menu > .four:hover ~ .circle {
-webkit-transform: rotate(-270deg);
-moz-transform: rotate(-270deg);
-ms-transform: rotate(-270deg);
-o-transform: rotate(-270deg);
transform: rotate(-270deg);
}<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<meta name="description" content="description">
<title>Nav Menu</title>
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
</head>
<body>
<div class="header"></div>
<div class="wrapper">
<div class="menu">
<a href="#" class="one">1</a>
<a href="#" class="two">2</a>
<a href="#" class="three">3</a>
<a href="#" class="four">4</a>
<div class="circle">
<ul>
<li>Home</li>
<li>World</li>
<li>Games</li>
<li>AboutUs</li>
</ul>
</div>
</div>
</div>
</body>
</html>【问题讨论】：
-
欢迎来到 StackOverflow！请提供您尝试的Minimal, Complete, and Verifiable example，例如作为Stack Snippet，因此我们可以尝试解决您的问题并解释您自己的尝试失败的原因 - 这样您就可以学到一些对您未来的发展有用的东西，并得到这个问题的答案。
-
您需要使用 javascript 才能正确完成这项工作（如果我完全理解您要问的内容），请查看 AjaxShake 看看是否有什么可以为您服务（我记得看到一些我认为可以完成的整页js脚本）ajaxshake.com