如何讓這個CSS Webkit過渡從左到右？

當你將鼠標懸停在它上面時，li元素向右滑動。我怎樣才能改變它，使它可以從右向左移動？我也希望子彈出現在右側。我試過改變子彈的位置，也改變了填充 - 左填充 - 右鍵。但它不會工作。誰能幫我這個？如何讓這個CSS Webkit過渡從左到右？

.cmsms_timeline { 
 
\t position:relative; 
 
\t margin:-11px 0 0 0; 
 
\t padding:0 0 37px 29px; 
 
\t list-style:none; 
 
} 
 
.cmsms_timeline li { 
 
\t position:relative; 
 
\t padding-top:24px; 
 
} 
 
.cmsms_timeline li:before, 
 
.cmsms_timeline:before { 
 
\t position:absolute; 
 
\t top:-2px; 
 
\t left:0; 
 
\t -webkit-box-sizing:border-box; 
 
\t -moz-box-sizing:border-box; 
 
\t box-sizing:border-box; 
 
\t width:1px; 
 
\t height:28px; 
 
\t background:rgba(0, 0, 0, .08); 
 
\t content:''; 
 
} 
 
.cmsms_timeline:before { 
 
\t top:auto; 
 
\t bottom:11px; 
 
\t left:29px; 
 
} 
 
.cmsms_timeline li a { 
 
\t position:relative; 
 
\t padding-left:13px; 
 
\t -webkit-transition:all .3s ease-in-out; 
 
\t -moz-transition:all .3s ease-in-out; 
 
\t -ms-transition:all .3s ease-in-out; 
 
\t -o-transition:all .3s ease-in-out; 
 
\t transition:all .3s ease-in-out; 
 
} 
 
.cmsms_timeline li a:hover {padding-left:19px;} 
 
.cmsms_timeline li a:before { 
 
\t position:absolute; 
 
\t top:5px; 
 
\t left:-2px; 
 
\t width:5px; 
 
\t height:5px; 
 
\t -webkit-border-radius:50%; 
 
\t -moz-border-radius:50%; 
 
\t border-radius:50%; 
 
\t background:rgba(0, 0, 0, .2); 
 
\t content:''; 
 
\t -webkit-transition:background .3s ease-in-out; 
 
\t -moz-transition:background .3s ease-in-out; 
 
\t -ms-transition:background .3s ease-in-out; 
 
\t -o-transition:background .3s ease-in-out; 
 
\t transition:background .3s ease-in-out; 
 
}

<ul class="cmsms_timeline"> 
 
    <li><a>hello world</a></li> 
 
</ul>

來源

2015-02-07 user1872874

嘗試改變這一行：

.cmsms_timeline li a:hover {padding-left:19px;}

你需要做出比13像素這樣的數量少：

.cmsms_timeline li a:hover {padding-left:7px;}

來源

2015-02-07 20:48:21

爲了使過渡權左移，只是反向填充左值：

.cmsms_timeline li a { 
    position:relative; 
    padding-left:19px;/*Just reverse these v*/ 
    -webkit-transition:all .3s ease-in-out; 
    -moz-transition:all .3s ease-in-out; 
    -ms-transition:all .3s ease-in-out; 
    -o-transition:all .3s ease-in-out; 
    transition:all .3s ease-in-out; 
} 
.cmsms_timeline li a:hover {padding-left:13px;}/*Just reverse these ^*/

.cmsms_timeline { 
 
\t position:relative; 
 
\t margin:-11px 0 0 0; 
 
\t padding:0 0 37px 29px; 
 
\t list-style:none; 
 
} 
 
.cmsms_timeline li { 
 
\t position:relative; 
 
\t padding-top:24px; 
 
} 
 
.cmsms_timeline li:before, 
 
.cmsms_timeline:before { 
 
\t position:absolute; 
 
\t top:-2px; 
 
\t left:0; 
 
\t -webkit-box-sizing:border-box; 
 
\t -moz-box-sizing:border-box; 
 
\t box-sizing:border-box; 
 
\t width:1px; 
 
\t height:28px; 
 
\t background:rgba(0, 0, 0, .08); 
 
\t content:''; 
 
} 
 
.cmsms_timeline:before { 
 
\t top:auto; 
 
\t bottom:11px; 
 
\t left:29px; 
 
} 
 
.cmsms_timeline li a { 
 
\t position:relative; 
 
\t padding-left:19px;/*Just reverse these v*/ 
 
\t -webkit-transition:all .3s ease-in-out; 
 
\t -moz-transition:all .3s ease-in-out; 
 
\t -ms-transition:all .3s ease-in-out; 
 
\t -o-transition:all .3s ease-in-out; 
 
\t transition:all .3s ease-in-out; 
 
} 
 
.cmsms_timeline li a:hover {padding-left:13px;}/*Just reverse these ^*/ 
 
.cmsms_timeline li a:before { 
 
\t position:absolute; 
 
\t top:5px; 
 
\t left:-2px; 
 
\t width:5px; 
 
\t height:5px; 
 
\t -webkit-border-radius:50%; 
 
\t -moz-border-radius:50%; 
 
\t border-radius:50%; 
 
\t background:rgba(0, 0, 0, .2); 
 
\t content:''; 
 
\t -webkit-transition:background .3s ease-in-out; 
 
\t -moz-transition:background .3s ease-in-out; 
 
\t -ms-transition:background .3s ease-in-out; 
 
\t -o-transition:background .3s ease-in-out; 
 
\t transition:background .3s ease-in-out; 
 
}

<ul class="cmsms_timeline"> 
 
    <li><a>hello world</a></li> 
 
</ul>

在右側子彈，也有相當多的建議如何做到這一點：
http://css.maxdesign.com.au/listutorial/08.htm
http://www.sitepoint.com/forums/showthread.php?482603-lt-ul-gt-with-bullets-on-the-right
http://voidcanvas.com/how-to-place-bullets-of-tag-after-the-text-of-each/

來源

2015-02-07 20:48:35

謝謝！有效。但是，我怎樣才能將子彈移到右側？當我嘗試這樣做時，子彈也隨着文本一起移動！我的意思是它變得混亂了！ – user1872874 2015-02-07 20:53:32

爲什麼一個-1？如果你的答案有問題，請發表評論，這樣我們都可以知道我做錯了什麼！ – 2015-02-07 20:59:35

@ user1872874查看已更新答案中的鏈接 – 2015-02-07 21:00:18

我覺得這是你的答案。

.cmsms_timeline { 
 
    position:relative; 
 
    margin:-11px 0 0 0; 
 
    padding:0 0 37px 29px; 
 
    list-style:none; 
 

 
} 
 

 
.cmsms_timeline li { 
 
    position:relative; 
 
    padding-top:24px; 
 
} 
 

 
.cmsms_timeline li:before, 
 
.cmsms_timeline:before { 
 
    position:absolute; 
 
    top:-2px; 
 
    left:0; 
 
    -webkit-box-sizing:border-box; 
 
    -moz-box-sizing:border-box; 
 
    box-sizing:border-box; 
 
    width:1px; 
 
    height:28px; 
 
    background:rgba(0, 0, 0, .08); 
 
    content:''; 
 
} 
 

 
.cmsms_timeline:before { 
 
    top:auto; 
 
    bottom:11px; 
 
    left:29px; 
 
} 
 

 
.cmsms_timeline li a { 
 
    position:relative; 
 
    padding-left:13px; 
 
    -webkit-transition:all .3s ease-in-out; 
 
    -moz-transition:all .3s ease-in-out; 
 
    -ms-transition:all .3s ease-in-out; 
 
    -o-transition:all .3s ease-in-out; 
 
    transition:all .3s ease-in-out; 
 
} 
 

 
.cmsms_timeline li a:hover { 
 
    margin-left:-19px; 
 
    padding-right:19px; 
 
} 
 

 
.cmsms_timeline li a:after { 
 
    position:absolute; 
 
    top:7px; 
 
    right:-10px; 
 
    width:5px; 
 
    height:5px; 
 
    -webkit-border-radius:50%; 
 
    -moz-border-radius:50%; 
 
    border-radius:50%; 
 
    background:rgba(0, 0, 0, .2); 
 
    content:''; 
 
    -webkit-transition:background .3s ease-in-out; 
 
    -moz-transition:background .3s ease-in-out; 
 
    -ms-transition:background .3s ease-in-out; 
 
    -o-transition:background .3s ease-in-out; 
 
    transition:background .3s ease-in-out; 
 
}

<ul class="cmsms_timeline"> 
 
    <li><a>hello world</a></li> 
 
</ul>

來源

2015-02-07 20:55:15 WebDevRon

這真的很容易。只要按照我的步驟:)

ul{ 
 
    padding:0; 
 
} 
 
ul>li{ 
 
    list-style:none; 
 
    text-align:right; 
 
    transition: 0.5s all ease-in-out; 
 
    -webkit-transition: 0.5s all ease-in-out; /* Prefix for Chrome & Safari */ 
 
    -moz-transition: 0.5s all ease-in-out; /* Prefix for Mozilla Firefox */ 
 
    -ms-transition: 0.5s all ease-in-out; /* Prefix for IE */ 
 
    -o-transition: 0.5s all ease-in-out; /* Prefix for Opera */ 
 
} 
 
ul>li:after{ 
 
    display:inline-block; 
 
    content:"•"; 
 
} 
 
ul>li:hover{ 
 
    padding-right:50px; 
 
    transition: 0.5s all ease-in-out; 
 
    -webkit-transition: 0.5s all ease-in-out; /* Prefix for Chrome & Safari */ 
 
    -moz-transition: 0.5s all ease-in-out; /* Prefix for Mozilla Firefox */ 
 
    -ms-transition: 0.5s all ease-in-out; /* Prefix for IE */ 
 
    -o-transition: 0.5s all ease-in-out; /* Prefix for Opera */ 
 
}

<ul> 
 
    <li>List 1</li> 
 
    <li>List 2</li> 
 
    <li>List 3</li> 
 
    <li>List 4</li> 
 
    <li>List 5</li> 
 
</ul>

來源

2015-02-07 22:33:38

如何讓這個CSS Webkit過渡從左到右？

回答

相關問題