0

我正在尝试在此站点上创建类似正确导航的效果：

http://dianabobar.com/

使用 jQuery。颜色从中间打开的方式是我想要的效果，但不幸的是，该网站是在 Flash 中完成的，所以我没有选择研究它是如何完成的。我不确定要搜索什么。我在想诸如“背景径向动画 jquery”或“来自中心 jquery 的背景颜色动画”之类的东西。

我还考虑了一个 CSS3 缓入，就像他们在这里详述的那样（从中心展开背景（CSS / Javascript））。问题是这个问题的答案只是在我需要它垂直工作时显示CSS3转换水平工作。我已经使用了他们在答案中使用的 JSFiddle ( http://jsfiddle.net/SNzgs/ )，但我似乎只能从顶部向下而不是从中心过渡到动画。他们拥有的代码是：

.redline {background:red;height:10px;width:0;margin:auto;}

.container:hover .redline {
    width:200px;
    -webkit-transition: all 0.3s ease-out;
    transition:all 0.3s ease-out;
}

我试过的代码是：

.redline {background:red;height:0px;width:10px;margin:auto;}

.container:hover .redline {
    height:200px;
    -webkit-transition: all 0.3s ease-out;
    transition:all 0.3s ease-out;
}

谢谢你的帮助！

4

6 回答 6

3

我的解决方案类似于 matewka 的解决方案，但同时使用了伪元素:before和:after伪元素。示例标记如下：

<nav>
    <ul>
        <li><a href="#">Link</a></li>
    </ul>
</nav>

对于 CSS：

nav ul {
    list-style: none;
    width: 6em;
}
nav ul li {
    background-color: #eee;
    position: relative;
}
    nav ul li:before,
    nav ul li:after {
        background-color: #333;
        content: "";
        display: block;
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;       /* Vertically positions pseudo elements in the center */
        bottom: 50%;    /* Vertically positions pseudo elements in the center */
        transition: all .125s ease-in-out;
        z-index: 50;
    }
nav ul li a {
    color: #333;
    display: block;
    padding: .5em 1em;
    position: relative;
    z-index: 100;
    transition: all .125s ease-in-out;
}
nav ul li a:hover {
    color: #eee;
}
    nav ul li:hover:before {
        top: 0;    /* Forces :before to stretch to fill top half */
    }
    nav ul li:hover:after {
        bottom: 0; /* Forces :after to stretch to fill bottom half */
    }

http://jsfiddle.net/teddyrised/rRtmB/

于 2013-10-14T22:43:59.103 回答
2

您可以使用:after伪元素和绝对定位轻松做到这一点。然后，您可以组合该阴影框height的和top属性。 我做了一个全新的小提琴：http: //jsfiddle.net/SNzgs/5/，因为你的小提琴是为了横向完成这项工作而设计的。

.container:after {
    content: "";
    display: block;
    background: #ccc;
    width: 100%;
    height: 0;
    top: 0.5em;
    position: absolute;
    left: 0;

    transition: all 1s ease-out;
}
.container:hover:after {
    top: 0;
    height: 100%;
}
于 2013-10-14T22:41:59.533 回答
1

您可以使用:after伪元素来创建动画背景：

CSS

ul {
    margin: 0;
    padding: 0;
}
ul > li {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}
ul > li > a {
    display: block;
    padding: 10px;
    color: #000000;
    text-decoration: none;
    position: relative;
    z-index: 10;
    -webkit-transition: all 400ms;
    transition: all 400ms;
}
ul > li:hover > a {
    color: #ffffff;
}
ul > li:after {
    content: " ";
    position: absolute;
    top: 50%;
    bottom: 50%;
    left: 0;
    right: 0;
    background: #353535;
    z-index: 0;
    -webkit-transition: all 400ms;
    transition: all 400ms;
}
ul > li:hover:after {
    top: 0;
    bottom: 0;
}

HTML

<ul>
    <li><a href="">Hello</a></li>
    <li><a href="">Hello</a></li>
    <li><a href="">Hello</a></li>
    <li><a href="">Hello</a></li>
</ul>

演示

于 2013-10-14T22:45:29.400 回答
0

这有效（虽然我不确定这正是你想要的）：

.container {height:100px;width:200px;background:#eee;position:relative;}
.container span {display:block;}
.greyline {background:#ccc;height:10px;width:200px;position:absolute;bottom:0;}
.redline {background:red;height:0;width:200px;margin:auto; top:5px;position:relative;}
.container:hover .redline {
    height:10px;
    top: 0px;
    -webkit-transition: all 0.3s ease-out;
    transition:all 0.3s ease-out;
}
于 2013-10-14T22:30:12.033 回答
0

您可以在小提琴中进行一些修改来重新创建类似的效果：

<div class="container">
    <span class="vertgrey">
        <span class="vertredline"></span>        
    </span>
    <span class="greyline">
        <span class="redline"></span>
    </span>
</div>

和CSS：

.container {height:100px;width:200px;background:#eee;position:relative;}
.container span {display:block;}
.greyline {background:#ccc;height:10px;width:200px;position:absolute;bottom:45px;}
.redline, .vertredline {background:red;height:10px;width:0;margin:auto;}
.vertgrey {
    background: #CCC;
    height: 100%;
    position: absolute;
    width: 10px;
    left: 90px;
}
.container:hover .redline {
    width:200px;
    -webkit-transition: all 0.3s ease-out;
    transition:all 0.3s ease-out;
}
.container:hover .vertredline {
    height:100%;
    width: 10px;
    -webkit-transition: all 0.3s ease-out;
    transition:all 0.3s ease-out;
}

这是更新小提琴的链接：http: //jsfiddle.net/SNzgs/4/

于 2013-10-14T22:39:11.713 回答
0

这是我为您提供的解决方案：

小提琴：http: //jsfiddle.net/itsmikem/gF28Y/

CSS：

.container {height:100px;width:200px;background:#eee;position:absolute;}
.greyline {display:block;position:relative;background:#000;height:0%;width:100%;}
.redline {display:block;position:relative;background:#f00;height:0%;width:100%;margin-top:50px;}
.container:hover .redline {
    margin-top:0px;
    height:100px;
    -webkit-transition: all 0.3s ease-out;
    transition:all 0.3s ease-out;
}

html:

<div class="container">
    <div class="greyline">
       <div class="redline"></div>
    </div>
</div>
于 2013-10-14T22:43:53.567 回答