0

在谷歌搜索和摆弄各种不同的选项之后，我正在努力让我的 CSS3 动画以我想要的方式运行！

让我从代码开始

<html>
<head>
<style>
body
{
overflow:hidden;
margin:0px;
}
.about
{
overflow:hidden;
width:400%;
height:95%;
background:#10b4ff;
position:absolute;
animation-name:contentPane;
animation-duration:5s;
animation-timing-function:ease;
animation-delay:0s;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-play-state:running;
/* Safari and Chrome: */
-webkit-animation-name:contentPane;
-webkit-animation-duration:5s;
-webkit-animation-timing-function:ease;
-webkit-animation-delay:0s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
-webkit-animation-play-state:running;
}

@keyframes contentPane
{
0%   {background:#eeeeee; left:0px; top:0px;}
33% {background:#10b4ff; left:-100%; top:0px;}
66%   {background:#eeeeee; left:-200%; top:0px;}
100% {background:#10b4ff; left:-300%; top:0px;}
}

@-webkit-keyframes contentPane
{
0%   {background:#eeeeee; left:0px; top:0px;}
33% {background:#10b4ff; left:-100%; top:0px;}
66%   {background:#eeeeee; left:-200%; top:0px;}
100% {background:#10b4ff; left:-300%; top:0px;}
}
.menuMarker{
width:20px;
height:20px;
border:2px solid #fff;
background:#fff;
border-radius:50%;
bottom:7%;
position:absolute;
/* Animation */
animation-name:menuMarker;
animation-duration:5s;
animation-timing-function:ease;
animation-delay:0s;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-play-state:running;
/* Safari and Chrome: */
-webkit-animation-name:menuMarker;
-webkit-animation-duration:5s;
-webkit-animation-timing-function:ease;
-webkit-animation-delay:0s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
-webkit-animation-play-state:running;
}
@keyframes menuMarker
{
0% {background:#10b4ff; border:#eeeeee 2px solid; border-radius:50%; left:12.5%;}
33% {background:#eeeeee;  border:#10b4ff 2px solid; border-radius:30%; left:37.5%;}
66% {background:#10b4ff; border:#eeeeee 2px solid; border-radius:50%; left:62.5%;}
100% {background:#eeeeee; border:#10b4ff 2px solid; border-radius:30%; left:87.5%;}
}

@-webkit-keyframes menuMarker
{
0% {background:#10b4ff; border:#eeeeee 2px solid; border-radius:50%; left:12.5%;}
33% {background:#eeeeee;  border:#10b4ff 2px solid; border-radius:30%; left:37.5%;}
66% {background:#10b4ff; border:#eeeeee 2px solid; border-radius:50%; left:62.5%;}
100% {background:#eeeeee; border:#10b4ff 2px solid; border-radius:30%; left:87.5%;}
}

.one{
width:25%;
height:100%;
left:0px;
top:0px;
position:absolute;
color:#10b4ff;
}
.two{
width:25%;
height:100%;
left:25%;
top:0px;
position:absolute;
color:#eeeeee;
}
.three{
width:25%;
height:100%;
left:50%;
top:0px;
position:absolute;
color:#10b4ff;
}
.four{
width:25%;
height:100%;
left:75%;
top:0px;
position:absolute;
color:#eeeeee;
}
.menuOne{
border-top:2px #fff solid;
left:0%;
width:25%;
height:5%;
bottom:0px;
background:#10b4ff;
position:fixed;
}
.menuTwo{
border-top:2px #fff solid;
left:25%;
width:25%;
height:5%;
bottom:0px;
background:#eeeeee;
position:fixed;
}
.menuThree{
border-top:2px #fff solid;
left:50%;
width:25%;
height:5%;
bottom:0px;
background:#10b4ff;
position:fixed;
}
.menuFour{
border-top:2px #fff solid;
left:75%;
width:25%;
height:5%;
bottom:0px;
background:#eeeeee;
position:fixed;
}

</style>
</head>
<body>

<div class='about'>
<div class='one'>Test 1</div>
<div class='two'>Test 2</div>
<div class='three'>Test 3</div>
<div class='four'>Test 4</div>
</div>
<div class='menuMarker'></div>
<div class='menuOne'><center>About</center></div>
<div class='menuTwo'>Gallery</div>
<div class='menuThree'>Showreel</div>
<div class='menuFour'>Contact</div>
</body>
</html>

事情就是这样。我尝试添加使所有动画播放状态属性“暂停”，然后添加：

menuOne:hover
{
animation-name:menuMarker;
animation-play-state:running;
}

问题是，这可以预见地使 menuOne 类表现得好像它是标记。我正在寻找的是一种将鼠标悬停在不同菜单项（menuOne、menuTwo 等）上并将标记移动到该项目上方的位置的方法。

我完全不知所措，希望得到一些帮助！

谢谢大家！

4

1 回答 1

0

首先，不要使用中心标签。有更好的方法可以将东西放在中间，在你的情况下，这将是提供菜单text-align:center;

使用纯 CSS 动画可以获得的最接近的效果是这样的，当菜单悬停时动画会暂停。您的动画循环运行，目前在 CSS3 中，您不允许在不同的点重新启动动画，因此您无法做好。

话虽如此，您可以在动画中添加简单的过渡，并获得像这样的更理想的结果！它有一些小故障，但你可能会尝试让它变得更流畅一些。但同样，由于 CSS3 不允许在动画中间开始动画，它不会是完美的。如果你也使用 javascript，它可以做得更流畅，但你没有在你的问题中提到这一点

这是更新的 CSS 和稍微修改的 HTML

<html>
<head>
<style>
body {
    overflow:hidden;
    margin:0px;
}
.about {
    overflow:hidden;
    width:400%;
    height:95%;
    background:#10b4ff;
    position:absolute;
    animation-name:contentPane;
    animation-duration:15s;
    animation-timing-function:ease;
    animation-delay:0s;
    animation-iteration-count:infinite;
    animation-direction:alternate;
    animation-play-state:running;
    /* Safari and Chrome: */
    -webkit-animation-name:contentPane;
    -webkit-animation-duration:15s;
    -webkit-animation-timing-function:ease;
    -webkit-animation-delay:0s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-direction:alternate;
    -webkit-animation-play-state:running;

    transition: all .5s linear;
    -webkit-transition: all .5s linear;
}
@keyframes contentPane {
    0% {
        background:#eeeeee;
        left:0px;
    }
    33% {
        background:#10b4ff;
        left:-100%;
    }
    66% {
        background:#eeeeee;
        left:-200%;
    }
    100% {
        background:#10b4ff;
        left:-300%;
    }
}
@-webkit-keyframes contentPane {
    0% {
        background:#eeeeee;
        left:0px;
    }
    33% {
        background:#10b4ff;
        left:-100%;
    }
    66% {
        background:#eeeeee;
        left:-200%;
    }
    100% {
        background:#10b4ff;
        left:-300%;
    }
}
.menuMarker {
    width:20px;
    height:20px;
    border:2px solid #fff;
    background:#fff;
    border-radius:50%;
    bottom:7%;
    position:absolute;
    /* Animation */
    animation-name:menuMarker;
    animation-duration:15s;
    animation-timing-function:ease;
    animation-delay:0s;
    animation-iteration-count:infinite;
    animation-direction:alternate;
    animation-play-state:running;
    /* Safari and Chrome: */
    -webkit-animation-name:menuMarker;
    -webkit-animation-duration:15s;
    -webkit-animation-timing-function:ease;
    -webkit-animation-delay:0s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-direction:alternate;
    -webkit-animation-play-state:running;

    transition: all .5s linear;
    -webkit-transition: all .5s linear;
}
@keyframes menuMarker {
    0% {
        background:#10b4ff;
        border:#eeeeee 2px solid;
        border-radius:50%;
        left:12.5%;
    }
    33% {
        background:#eeeeee;
        border:#10b4ff 2px solid;
        border-radius:30%;
        left:37.5%;
    }
    66% {
        background:#10b4ff;
        border:#eeeeee 2px solid;
        border-radius:50%;
        left:62.5%;
    }
    100% {
        background:#eeeeee;
        border:#10b4ff 2px solid;
        border-radius:30%;
        left:87.5%;
    }
}
@-webkit-keyframes menuMarker {
    0% {
        background:#10b4ff;
        border:#eeeeee 2px solid;
        border-radius:50%;
        left:12.5%;
    }
    33% {
        background:#eeeeee;
        border:#10b4ff 2px solid;
        border-radius:30%;
        left:37.5%;
    }
    66% {
        background:#10b4ff;
        border:#eeeeee 2px solid;
        border-radius:50%;
        left:62.5%;
    }
    100% {
        background:#eeeeee;
        border:#10b4ff 2px solid;
        border-radius:30%;
        left:87.5%;
    }
}
.one {
    width:25%;
    height:100%;
    left:0;
    top:0;
    position:absolute;
    color:#10b4ff;
}
.two {
    width:25%;
    height:100%;
    left:25%;
    top:0;
    position:absolute;
    color:#eeeeee;
}
.three {
    width:25%;
    height:100%;
    left:50%;
    top:0;
    position:absolute;
    color:#10b4ff;
}
.four {
    width:25%;
    height:100%;
    left:75%;
    top:0;
    position:absolute;
    color:#eeeeee;
}
.menu {
    position:absolute;
    bottom:0;
    text-align:center;
    width:25%;
    height:5%;
    background:#10b4ff;
}
.menuOne {
  left:0;
}
.menuTwo {
  left:25%;
}
.menuThree {
  left:50%;
}
.menuFour {
  left:75%;
}
.menu:nth-child(even) {
    background:#eeeeee;
}
.menu:hover ~ .menuMarker {
    animation:none;
    -webkit-animation: none;
}
.menu:hover ~ .about {
    animation: none;
    -webkit-animation:none;
}
.menuOne:hover ~ .about {
    background:#eeeeee;
    left:0px;
}
.menuTwo:hover ~ .about {
    background:#10b4ff;;
    left:-100%;
}
.menuThree:hover ~ .about {
    background:#eeeeee;
    left:-200%;
}
.menuFour:hover ~ .about {
    background:#10b4ff;
    left:-300%;
}
.menuOne:hover ~ .menuMarker {
    background:#10b4ff;
    border:#eeeeee 2px solid;
    border-radius:50%;
    left:12.5%;
}
.menuTwo:hover ~ .menuMarker {
    background:#eeeeee;
    border:#10b4ff 2px solid;
    border-radius:30%;
    left:37.5%;
}
.menuThree:hover ~ .menuMarker {
    background:#10b4ff;
    border:#eeeeee 2px solid;
    border-radius:50%;
    left:62.5%;
}
.menuFour:hover ~ .menuMarker {
    background:#eeeeee;
    border:#10b4ff 2px solid;
    border-radius:30%;
    left:87.5%;
}
</style>
</head>

<body>
<div class='menu menuOne'>About</div><!--
--><div class='menu menuTwo'>Gallery</div><!--
--><div class='menu menuThree'>Showreel</div><!--
--><div class='menu menuFour'>Contact</div>
<div class='about'>
    <div class='one'>Test 1 </div>
    <div class='two'>Test 2</div>
    <div class='three'>Test 3</div>
    <div class='four'>Test 4</div>
</div>
<div class='menuMarker'></div>
</body>
</html>

我更改了您的 HTML 结构，因为您仍然使用position:absolute它，它使选择.about和.menuMarker更容易

旁注：您不必top:0px;为动画声明相同的内容。如果你不告诉它改变它就不会。同样在 CSS 中，如果您的像素值为 0，您可以根据需要将其关闭，也就是top:0=top:0px

如果您有任何问题，请告诉我！

于 2013-08-04T20:34:00.447 回答