왼쪽에서 오른쪽으로 쉬움 Css3

나는이 전환이 일어나는 방법을 알아 내려고 2 시간 동안 조사를 해왔다. 나는 W3 학교에서 코드를 해봤지만 그냥 내 사업부가 http://themeforest.net/item/kappe-full-screen-portfolio-blog-wp-theme/full_screen_preview/6854128 왼쪽에서 오른쪽으로 쉬움 Css3

더 큰이가 지금까지

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

출처

2014-04-12 Paul Brunache

당신이 관련된 HTML 코드를 줄 수 있습니까? 당신은 어느 요소를 완화하고 싶지는 말조차하지 않았습니다. 더 많은 정보를주세요. – ThatWeirdo

세로 탐색 모음이 있으며 테마로 동일한 전환을 구현하고 싶습니다. 내 HTML 및 전체 CSS 탐색을 추가했습니다 –

어떤 전환이 있습니까? 무엇을 편하게해야합니까? – ThatWeirdo

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

출처

2014-04-13 00:03:02 coma

당신은 남자입니다 !!!!!!!!!!!!!!!!! Html, css 및 웹 개발과 관련하여 내가 읽어야하는 책을 추천합니다. 이것은 완전히 주제가 아니며 스스로 가르치려고합니다. –

CSS에 대해 알아야 할 몇 가지 유용한 것들이 있습니다. 그 중 하나는 상대적/절대/고정 위치 내에서 절대 위치를 사용하는 것입니다. 몇 가지 훌륭한 링크 : http://www.maxdesign.com.au/articles/css-layouts/, http://css-tricks.com/, http://tympanus.net/codrops/, http : // adamschwartz .co/magic-of-css/http://flukeout.github.io/ http://lea.verou.me/ – coma

모든 도움을 주신 것에 대해 감사 드릴 수있는만큼 읽을 것입니다. –

'전환'이 무엇을 만든 CSS의 속성은 LESS 또는 SASS Mixin을 사용하여 매우 쉽게 얻을 수 있습니다. CSS 전처리기를 사용하는 것에 익숙하지 않다면 LESS 나 SASS와 같은 프레임 워크를 사용해 보시기 바랍니다. 그들은 CSS 작성을 훨씬 쉽게 해주었습니다.

나는 모든 것을 소개합니다. 내가 좋아하는 것은 '믹스 인'입니다.

"편안함"을 원하는 믹스 인 예입니다.

/* 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); 
}

이것이 정확히 원하는 것이 아니라면, 나는 어떤 종류의 mixin을 적게 사용하여 얻을 수 있다고 확신합니다. 바라건대 내가 올바른 방향으로 시작했으면 좋겠어!

출처

2014-04-12 23:43:28 jrK

필자는이 내용을 정확하게 구현하겠습니까? 몇 주전에 필자가 강의에서 언급 한 내용을 읽어 보겠습니다. –

정확하게 쓰여진 것은 아닙니다. 이것은 적은 mixin을 사용하는 예입니다. [LESS Site] (http://lesscss.org/)와 같은 CSS Preprocessor를 사용하여 읽기 바랍니다. – jrK

당신의 모든 도움을 주신 모든 사람에게 감사드립니다 –

왼쪽에서 오른쪽으로 쉬움 Css3

답변

관련 문제