Question

我一直在寻找两个小时试图找出如何实现这种转变？我尝试过W3学校的代码，但它让我的Div更大了 http://themeforest.net/item/kappe-full-screen-portfolio-blog-wp-theme/full_screen_preview/6854128

这是我到目前为止所拥有的

 .nav{
width:20%;
position:fixed;
margin-right: 1.25%;
margin-left:1.55%;
background-color:white;
height:auto;
font-weight:bold;
box-shadow: 
            0px 11px 8px -10px #CCC,
            -15px -8px 8px -10px #CCC;
}
.nav li {
text-align:right;
}

nav li a{

background-color:white;
color:black;
text-decoration:none;
padding-right:5%;
display:inline-block;
padding-left:70%;
border-right: 1px dotted #DCDCDC;
border-bottom: 1px dotted #DCDCDC;
border-top: 1px dotted #DCDCDC;
font-size: 150%;
font-weight:300;
font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
-webkit-transition:width 2s; /* For Safari 3.1 to 6.0 */
transition:width 2s;
}

.nav li:hover a
{
color:white;
background: #2876b2;
width:100%;
}

<div class="nav left" >

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

</nav>

Answer 1

http://jsfiddle.net/coma/UhErG/

nav a span {
    position: relative;
    z-index: 1;
}

nav a:after {
    content: "";
    position: absolute;
    top: 0;
    right: 100%;
    bottom: 0;
    left: 0;
    background-color: #1AB5B3;
    transition: right 250ms;
}

nav a:hover:after {
    right: 0;
}

Answer 2

过渡＆＃39;使用LESS或SASS Mixin可以很容易地实现CSS中的属性。如果您不熟悉使用CSS预处理器，我建议您阅读使用LESS或SASS等框架。他们让我更容易编写CSS。

LESS介绍各种各样的事情，我最喜欢的是＆＃39; mixin＆＃39;。

这是一个mixin示例，它可以帮助您轻松实现＆＃34;欲望。

/* Mixin */
  .transition (@prop: all, @time: 1s, @ease: linear) {
  -webkit-transition: @prop @time @ease;
  -moz-transition: @prop @time @ease;
  -o-transition: @prop @time @ease;
  -ms-transition: @prop @time @ease;
  transition: @prop @time @ease;
}





/* Example on how to use mixin with div */

#somediv {
    .transition(all, 0.5s, ease-in);
}

如果这不是你想要的，我最积极你可以通过某种较少的混合来实现它。希望我让你开始朝着正确的方向前进！

从左到右缓解Css3

2 个答案: