我已經遇到了一些問題。我有一個菜單列表,我定製了一些圖像懸停狀態列表項。這工作得很好,直到我需要更改菜單項(列表項文本長度等)。每次有所改變時,我都必須返回並重新制作所有圖像。自定義CSS圖像盤旋狀態
這裏是什麼,我試圖完成一些圖片:
基本上懸停增加了一個紅色的背景和紅色區域的重複旋轉〜2度顏色較淺。是否有可能通過CSS與:after
和transform: rotate()
?如果不是,那麼對於不同的字長來說,完成這種效果的好方法是什麼?
提前致謝!
Tre
我已經遇到了一些問題。我有一個菜單列表,我定製了一些圖像懸停狀態列表項。這工作得很好,直到我需要更改菜單項(列表項文本長度等)。每次有所改變時,我都必須返回並重新制作所有圖像。自定義CSS圖像盤旋狀態
這裏是什麼,我試圖完成一些圖片:
基本上懸停增加了一個紅色的背景和紅色區域的重複旋轉〜2度顏色較淺。是否有可能通過CSS與:after
和transform: rotate()
?如果不是,那麼對於不同的字長來說,完成這種效果的好方法是什麼?
提前致謝!
Tre
這可以很容易地用變換完成,就像你說的那樣。你需要在每個按鈕兩個元素雖然,一個文本,一個用於扭曲背景:
<div class="menu-button">
<div class="text">Screenings</div>
<div class="hover-bg"></div>
</div>
和風格的.hover-bg
類是這樣的:
#menu .menu-button:hover .hover-bg
{
z-index: 1;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: rgba(220, 50, 50, 0.4);
transform: rotate(2deg) scale(1.05, 1);
transform-origin: center right;
}
Here's an example where I had some fun with transitions。由於懶惰,我只打算讓它在Webkit中工作,這意味着Chrome和Webkit。
注意,跨瀏覽器兼容,你需要供應商特定的屬性前綴(-webkit-
,-moz-
等)
這可以在純CSS來實現(甚至3)。
關於懸停有一個傾斜的背景圖像,將它放置在左側和頂部幾個像素,並添加背景顏色。
因爲背景顏色的,你只能看到圖像的一部分:
<div class="text">Screenings</div>
.text {
color: #000;
margin-left: 5px;/*to make room for the hover image */
padding: 4px;
}
.text:hover {
background: #900 url(tiltedimage.png) no-repeat -5px -5px;
color: #fff;
}
這將指向你的解決方案。
這正是我想要的。我使用Wordpress,因此我使用jQuery在列表項中插入hover-bg div來實現此效果。謝謝一堆。 – tr3online 2012-08-13 23:06:29
但是,我遇到了一個問題,如果將鼠標懸停在'.hoverbg'的頂部,它將激活後退旋轉的div,而不是我的示例中的鏈接:http://jsfiddle.net/heHY9/ ,如果你可以請看看這個,它會非常感激。謝謝 – tr3online 2012-08-13 23:09:15
原因是你對鏈接本身有懸停效果,這意味着只要鼠標離開鏈接,紅色背景消失,即使鼠標技術上仍然在列表項上。相反,將懸停僞類移動到列表項中,並按預期工作:http://jsfiddle.net/heHY9/2/ – Hubro 2012-08-14 11:42:56