自定義CSS圖像盤旋狀態

我已經遇到了一些問題。我有一個菜單列表，我定製了一些圖像懸停狀態列表項。這工作得很好，直到我需要更改菜單項（列表項文本長度等）。每次有所改變時，我都必須返回並重新制作所有圖像。自定義CSS圖像盤旋狀態

這裏是什麼，我試圖完成一些圖片：

enter image description here

基本上懸停增加了一個紅色的背景和紅色區域的重複旋轉〜2度顏色較淺。是否有可能通過CSS與:after和transform: rotate()？如果不是，那麼對於不同的字長來說，完成這種效果的好方法是什麼？

提前致謝！

Tre

來源

2012-08-13 tr3online

這可以很容易地用變換完成，就像你說的那樣。你需要在每個按鈕兩個元素雖然，一個文本，一個用於扭曲背景：

<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 on JSFiddle

Here's an example where I had some fun with transitions。由於懶惰，我只打算讓它在Webkit中工作，這意味着Chrome和Webkit。

注意，跨瀏覽器兼容，你需要供應商特定的屬性前綴（-webkit-，-moz-等）

來源

2012-08-13 20:46:33 Hubro

這正是我想要的。我使用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

這可以在純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; 
}

這將指向你的解決方案。

來源

2012-08-13 21:56:15 Mark

自定義CSS圖像盤旋狀態

回答

相關問題