本文介紹了
在線預覽 下載源碼
在今天的教程中，我們將在圓上試驗懸停效果。 自從有了border- radius屬性，我們可以創建圓形形狀，并且它們作為設計元素更常出現在網站中。 我特別喜歡看到的一個用途是圓形縮略圖，它看起來比通常的矩形更有趣。 因為圓是如此特殊的形狀，我們將為它創造一些特殊的懸停效果！
我們將在本教程中省略瀏覽器前綴。 但你當然會在下載文件中找到它們。
那么，讓我們開始吧！
HTML結構
對于大多數示例，我們將使用以下結構：
<ul class="ch-grid"> <li> <div class="ch-item ch-img-1"> <div class="ch-info"> <h3>Use what you have</h3> <p>by Angela Duncan <a href="http://drbl.in/eOPF">View on Dribbble</a></p> </div> </div> </li> <li> <div class="ch-item ch-img-2"> <div class="ch-info"> <h3>Common Causes of Stains</h3> <p>by Antonio F. Mondragon <a href="http://drbl.in/eKMi">View on Dribbble</a></p> </div> </div> </li> <li> <div class="ch-item ch-img-3"> <div class="ch-info"> <h3>Pink Lightning</h3> <p>by Charlie Wagers <a href="http://drbl.in/ekhp">View on Dribbble</a></p> </div> </div> </li></ul>
雖然我們可以在這里使用圖像，但我們會通過使用背景圖像來給自己更多的選擇。 我們將在以“ch-img-”開頭的類中定義它們。
現在，讓我們做一些懸停效果吧！
CSS樣式
讓我們為列表和列表項定義一些常見的樣式：
.ch-grid { margin: 20px 0 0 0; padding: 0; list-style: none; display: block; text-align: center; width: 100%;}.ch-grid:after,.ch-item:before { content: ''; display: table;}.ch-grid:after { clear: both;}.ch-grid li { width: 220px; height: 220px; display: inline-block; margin: 20px;}一些示例將具有不同的結構，但我們將更詳細地研究每個示例。
示例1
第一個例子是通過縮放來揭示描述，我們還將為".ch-item"的內陰影設置動畫。 所以讓我們定位".ch-item"并設置一個漂亮的，內陰影和過渡：
.ch-item { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; position: relative; cursor: default; box-shadow: inset 0 0 0 16px rgba(255,255,255,0.6), 0 1px 2px rgba(0,0,0,0.1); transition: all 0.4s ease-in-out;}正如您之前注意到的那樣，我們已經為列表項提供了兩個類：一個是ch-item，另一個用于定義特定的背景圖像：
.ch-img-1 { background-image: url(../images/1.jpg);}.ch-img-2 { background-image: url(../images/2.jpg);}.ch-img-3 { background-image: url(../images/3.jpg);}".ch-info"將設置為絕對定位，我們將通過設置RGBA值為其提供半透明背景。 它的不透明度將設置為0，我們也將它縮小到0：
.ch-info { position: absolute; background: rgba(63,147,147, 0.8); width: inherit; height: inherit; border-radius: 50%; overflow: hidden; opacity: 0; transition: all 0.4s ease-in-out; transform: scale(0);}標題將具有一些padding和margin以及平滑的文本陰影：
.ch-info h3 { color: #fff; text-transform: uppercase; letter-spacing: 2px; font-size: 22px; margin: 0 30px; padding: 45px 0 0 0; height: 140px; font-family: 'Open Sans', Arial, sans-serif; text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0,0,0,0.3);}p元素的不透明度為0和一個過渡（我們希望在懸停時將其淡入但有延遲時間）：
.ch-info p { color: #fff; padding: 10px 5px; font-style: italic; margin: 0 30px; font-size: 12px; border-top: 1px solid rgba(255,255,255,0.5); opacity: 0; transition: all 1s ease-in-out 0.4s;}鏈接將使用大寫字母，我們將懸停顏色設置為黃色：
.ch-info p a { display: block; color: rgba(255,255,255,0.7); font-style: normal; font-weight: 700; text-transform: uppercase; font-size: 9px; letter-spacing: 1px; padding-top: 4px; font-family: 'Open Sans', Arial, sans-serif;}.ch-info p a:hover { color: rgba(255,242,34, 0.8);}現在，有趣的懸停動作！ ".ch-item"的內陰影的尺寸從16px設置為1px：
.ch-item:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1), 0 1px 2px rgba(0,0,0,0.1);}".ch-info"將淡入并縮放到1：
.ch-item:hover .ch-info { transform: scale(1); opacity: 1;}描述的段落p將會淡入（延遲）：
.ch-item:hover .ch-info p { opacity: 1;}這是第一個例子！ 我們來看看下一個。
示例2
此示例中的HTML結構與第一個中的HTML結構相同。
在這個例子中，我們將使用".ch-item"的陰影來填充我們的圓并作為描述的背景。 所以，這里沒什么特別的，只是多了一個陰影值：
.ch-item { width: 100%; height: 100%; border-radius: 50%; position: relative; cursor: default; box-shadow: inset 0 0 0 0 rgba(200,95,66, 0.4), inset 0 0 0 16px rgba(255,255,255,0.6), 0 1px 2px rgba(0,0,0,0.1); transition: all 0.4s ease-in-out;}背景圖像：
.ch-img-1 { background-image: url(../images/4.jpg);}.ch-img-2 { background-image: url(../images/5.jpg);}.ch-img-3 { background-image: url(../images/6.jpg);}".ch-info"將再次縮放：
.ch-info { position: absolute; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; opacity: 0; transition: all 0.4s ease-in-out; transform: scale(0); backface-visibility: hidden;}讓我們設計文本元素的風格：
.ch-info h3 { color: #fff; text-transform: uppercase; position: relative; letter-spacing: 2px; font-size: 22px; margin: 0 30px; padding: 65px 0 0 0; height: 110px; font-family: 'Open Sans', Arial, sans-serif; text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0,0,0,0.3);}.ch-info p { color: #fff; padding: 10px 5px; font-style: italic; margin: 0 30px; font-size: 12px; border-top: 1px solid rgba(255,255,255,0.5);}.ch-info p a { display: block; color: rgba(255,255,255,0.7); font-style: normal; font-weight: 700; text-transform: uppercase; font-size: 9px; letter-spacing: 1px; padding-top: 4px; font-family: 'Open Sans', Arial, sans-serif;}.ch-info p a:hover { color: rgba(255,242,34, 0.8);}在懸停時，我們會將內陰影（偏紅的陰影）設置為110px展開半徑。 這將涵蓋所有的圓：
.ch-item:hover { box-shadow: inset 0 0 0 110px rgba(200,95,66, 0.4), inset 0 0 0 16px rgba(255,255,255,0.8), 0 1px 2px rgba(0,0,0,0.1);}我們將縮放".ch-info"并淡化它：
.ch-item:hover .ch-info { opacity: 1; transform: scale(1); }示例3
在這個例子中，我們將使用旋轉。 結構將與前兩個示例略有不同，因為我們需要將".ch-thumb"添加為第二個分區。 所以列表項看起來如下：
<li> <div class="ch-item"> <div class="ch-info"> <h3>Music poster</h3> <p>by Jonathan Quintin <a href="http://drbl.in/eGjw">View on Dribbble</a></p> </div> <div class="ch-thumb ch-img-1"></div> </div></li>
".ch-item"的樣式將與之前一樣（帶有微妙的陰影）：
.ch-item { width: 100%; height: 100%; border-radius: 50%; position: relative; cursor: default; box-shadow: 0 1px 3px rgba(0,0,0,0.2);}".ch-thumb"元素將具有特定的變換原點（位于右中間的某個位置）和過渡。 這將是我們想要在懸停時向下旋轉的元素，以便它顯示".ch-info"元素：
.ch-thumb { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; position: absolute; box-shadow: inset 0 0 0 15px rgba(255,255,255, 0.5); transform-origin: 95% 40%; transition: all 0.3s ease-in-out;}使用偽類：創建一個帶有徑向漸變的小黃銅緊固件：
.ch-thumb:after { content: ''; width: 8px; height: 8px; position: absolute; border-radius: 50%; top: 40%; left: 95%; margin: -4px 0 0 -4px; background: radial-gradient(ellipse at center, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%); box-shadow: 0 0 1px rgba(255,255,255,0.9);}讓我們為每個".ch-thumb"元素定義背景圖像：
.ch-img-1 { background-image: url(../images/7.jpg); z-index: 12;}.ch-img-2 { background-image: url(../images/8.jpg); z-index: 11;}.ch-img-3 { background-image: url(../images/9.jpg); z-index: 10;}".ch-info"元素的樣式如下：
.ch-info { position: absolute; width: inherit; height: inherit; border-radius: 50%; overflow: hidden; background: #c9512e url(../images/noise.png); box-shadow: inset 0 0 0 5px rgba(0,0,0,0.05);}文本元素將按以下方式定位和設置樣式：
.ch-info h3 { color: #fff; text-transform: uppercase; position: relative; letter-spacing: 2px; font-size: 18px; margin: 0 60px; padding: 22px 0 0 0; height: 85px; font-family: 'Open Sans', Arial, sans-serif; text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0,0,0,0.3);}.ch-info p { color: #fff; padding: 10px 5px; font-style: italic; margin: 0 30px; font-size: 12px; border-top: 1px solid rgba(255,255,255,0.5);}鏈接將是一個小圓圈，應該在懸停時從右側移入：
.ch-info p a { display: block; color: #333; width: 80px; height: 80px; background: rgba(255,255,255,0.3); border-radius: 50%; color: #fff; font-style: normal; font-weight: 700; text-transform: uppercase; font-size: 9px; letter-spacing: 1px; padding-top: 24px; margin: 7px auto 0; font-family: 'Open Sans', Arial, sans-serif; opacity: 0; transition: transform 0.3s ease-in-out 0.2s, opacity 0.3s ease-in-out 0.2s, background 0.2s linear 0s; transform: translateX(60px) rotate(90deg);}.ch-info p a:hover { background: rgba(255,255,255,0.5);}由于我們希望移動和不透明度發生延遲，但背景懸停沒有過渡，我們將分離過渡。
在懸停時，我們將旋轉".ch-thumb"并移動/旋轉鏈接元素：
.ch-item:hover .ch-thumb { box-shadow: inset 0 0 0 15px rgba(255,255,255, 0.5), 0 1px 3px rgba(0,0,0,0.2); transform: rotate(-110deg);}.ch-item:hover .ch-info p a{ opacity: 1; transform: translateX(0px) rotate(0deg);}示例4
第四個例子將涉及一些3D旋轉。 因此，我們需要調整結構，以便有一個容器用于透視和前面和后面。 因此，列表項將如下所示：
<li> <div class="ch-item ch-img-1"> <div class="ch-info-wrap"> <div class="ch-info"> <div class="ch-info-front ch-img-1"></div> <div class="ch-info-back"> <h3>Bears Type</h3> <p>by Josh Schott <a href="http://drbl.in/ewUW">View on Dribbble</a></p> </div> </div> </div> </div></li>
如您所見，我們將背景圖像添加到".ch-item"以及".ch-info-front"。 訣竅是給".ch-info-wrap"提供相同的背景。
這將產生幻覺，好像我們的".ch-item"有一個洞。
".ch-item"將具有以下的樣式：
.ch-item { width: 100%; height: 100%; border-radius: 50%; position: relative; box-shadow: 0 1px 2px rgba(0,0,0,0.1); cursor: default;}".ch-info-wrap"將有透視屬性，我們還將添加陰影的過渡：
.ch-info-wrap{ position: absolute; width: 180px; height: 180px; border-radius: 50%; perspective: 800px; transition: all 0.4s ease-in-out; top: 20px; left: 20px; background: #f9f9f9 url(../images/bg.jpg); box-shadow: 0 0 0 20px rgba(255,255,255,0.2), inset 0 0 3px rgba(115,114, 23, 0.8);}".ch-info"將需要preserve-3d值用于變換樣式，我們將給它一個過渡，因為這是我們將在3d中旋轉的元素：
.ch-info{ position: absolute; width: 180px; height: 180px; border-radius: 50%; transition: all 0.4s ease-in-out; transform-style: preserve-3d;}正面和背面將具有以下常見樣式：
.ch-info > div { display: block; position: absolute; width: 100%; height: 100%; border-radius: 50%; background-position: center center; backface-visibility: hidden;}背面將旋轉，以便我們開始不會看到它：
.ch-info .ch-info-back { transform: rotate3d(0,1,0,180deg); background: #000;}再次，背景圖片：
.ch-img-1 { background-image: url(../images/10.jpg);}.ch-img-2 { background-image: url(../images/11.jpg);}.ch-img-3 { background-image: url(../images/12.jpg);}...和文本元素：
.ch-info h3 { color: #fff; text-transform: uppercase; letter-spacing: 2px; font-size: 14px; margin: 0 15px; padding: 40px 0 0 0; height: 90px; font-family: 'Open Sans', Arial, sans-serif; text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0,0,0,0.3);}.ch-info p { color: #fff; padding: 10px 5px; font-style: italic; margin: 0 30px; font-size: 12px; border-top: 1px solid rgba(255,255,255,0.5);}.ch-info p a { display: block; color: rgba(255,255,255,0.7); font-style: normal; font-weight: 700; text-transform: uppercase; font-size: 9px; letter-spacing: 1px; padding-top: 4px; font-family: 'Open Sans', Arial, sans-serif;}.ch-info p a:hover { color: rgba(255,242,34, 0.8);}在懸停時，我們將更改".ch-info-wrap"的陰影并旋轉".ch-info"，以便我們看到背面：
.ch-item:hover .ch-info-wrap { box-shadow: 0 0 0 0 rgba(255,255,255,0.8), inset 0 0 3px rgba(115,114, 23, 0.8);}.ch-item:hover .ch-info { transform: rotate3d(0,1,0,-180deg);}示例5
在此示例中，我們希望將".ch-thumb"縮小為0，并通過將其淡入并將其縮小為1來顯示".ch-info"。 第五示例的結構與前一示例中的相同。
該".ch-item"具有以下的風格：
.ch-item { width: 100%; height: 100%; border-radius: 50%; position: relative; box-shadow: 0 1px 2px rgba(0,0,0,0.1); cursor: default;}".ch-info-wrap"和".ch-info"將具有以下常見樣式：
.ch-info-wrap, .ch-info{ position: absolute; width: 180px; height: 180px; border-radius: 50%;}讓我們通過將相同的背景設置給".ch-info-wrap"來再次執行“漏洞”技巧：
.ch-info-wrap { top: 20px; left: 20px; background: #f9f9f9 url(../images/bg.jpg); box-shadow: 0 0 0 20px rgba(255,255,255,0.2), inset 0 0 3px rgba(115,114, 23, 0.8);}常見的樣式是“前面”和“背面”（它不再是正面和背面）：
.ch-info > div { display: block; position: absolute; width: 100%; height: 100%; border-radius: 50%; background-position: center center;}“前面”將有一個過渡（它會縮小并消失）：
.ch-info .ch-info-front { transition: all 0.6s ease-in-out;}".ch-info-back"最初將具有0不透明度并且可以擴展到1.5：
.ch-info .ch-info-back { opacity: 0; background: #223e87; pointer-events: none; transform: scale(1.5); transition: all 0.4s ease-in-out 0.2s;}我們需要將pointer-events設置為none，因為我們不希望元素“阻塞”其他所有內容...記住，它被放大，我們因為它的不透明性而無法看到它，但它仍然存在。
像往常一樣的背景圖像和文本元素，只是有一些不同的顏色：
.ch-img-1 { background-image: url(../images/13.jpg);}.ch-img-2 { background-image: url(../images/14.jpg);}.ch-img-3 { background-image: url(../images/15.jpg);}.ch-info h3 { color: #fff; text-transform: uppercase; letter-spacing: 2px; font-size: 18px; margin: 0 15px; padding: 40px 0 0 0; height: 80px; font-family: 'Open Sans', Arial, sans-serif; text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0,0,0,0.3);}.ch-info p { color: #fff; padding: 10px 5px 0; font-style: italic; margin: 0 30px; font-size: 12px; border-top: 1px solid rgba(255,255,255,0.5);}.ch-info p a { display: block; color: #e7615e; font-style: normal; font-weight: 700; text-transform: uppercase; font-size: 9px; letter-spacing: 1px; padding-top: 4px; font-family: 'Open Sans', Arial, sans-serif;}.ch-info p a:hover { color: #fff;}在懸停時，我們將縮小".ch-info-front"部分為0并將不透明度設置為0.這將使其消失在后面。
.ch-item:hover .ch-info-front { transform: scale(0); opacity: 0;} ".ch-info-back"將縮小為1并淡入。我們還將pointer event事件設置為auto，因為現在我們希望能夠單擊鏈接：
.ch-item:hover .ch-info-back { transform: scale(1); opacity: 1; pointer-events: auto;}示例6
在此示例中，我們希望向下翻轉內部".ch-thumb"部分以顯示描述。 HTML將與前兩個示例中的相同。
".ch-item"將按以前的樣式設置：
.ch-item { width: 100%; height: 100%; border-radius: 50%; position: relative; box-shadow: 0 1px 2px rgba(0,0,0,0.1); cursor: default;}The common style of the wrapper and the description element:
".ch-info-wrap", ".ch-info"元素的通用樣式：
.ch-info-wrap, .ch-info{ position: absolute; width: 180px; height: 180px; border-radius: 50%; transition: all 0.4s ease-in-out;}".ch-info-wrap"將具有透視：
.ch-info-wrap { top: 20px; left: 20px; background: #f9f9f9 url(../images/bg.jpg); box-shadow: 0 0 0 20px rgba(255,255,255,0.2), inset 0 0 3px rgba(115,114, 23, 0.8); perspective: 800px;}".ch-info"元素需要以下轉換樣式：
.ch-info { transform-style: preserve-3d;}正面和背面將有一個過渡。 請注意，這次我們不會將backface-visibility設置為hidden，因為我們希望".ch-thumb"的背面在我們向下翻轉時顯示：
.ch-info > div { display: block; position: absolute; width: 100%; height: 100%; border-radius: 50%; background-position: center center; transition: all 0.6s ease-in-out;}讓我們設置正確的transform-origin，以便我們可以打開它：
.ch-info .ch-info-front { transform-origin: 50% 100%; z-index: 100; box-shadow: inset 2px 1px 4px rgba(0,0,0,0.1);}我們將為".ch-info-back"設置一個0不透明度的RGBA值：
.ch-info .ch-info-back { background: rgba(230,132,107,0);}和其他元素的通常風格：
.ch-img-1 { background-image: url(../images/16.jpg);}.ch-img-2 { background-image: url(../images/17.jpg);}.ch-img-3 { background-image: url(../images/18.jpg);}.ch-info h3 { color: #fff; text-transform: uppercase; letter-spacing: 2px; font-size: 14px; margin: 0 25px; padding: 40px 0 0 0; height: 90px; font-family: 'Open Sans', Arial, sans-serif; text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0,0,0,0.3);}.ch-info p { color: #fff; padding: 10px 5px; font-style: italic; margin: 0 30px; font-size: 12px; border-top: 1px solid rgba(255,255,255,0.5);}.ch-info p a { display: block; color: rgba(255,255,255,0.7); font-style: normal; font-weight: 700; text-transform: uppercase; font-size: 9px; letter-spacing: 1px; padding-top: 4px; font-family: 'Open Sans', Arial, sans-serif;}.ch-info p a:hover { color: rgba(255,242,34, 0.8);}在懸停時，我們將旋轉前部并略微為陰影設置動畫。 后部將以其背景顏色淡化：
.ch-item:hover .ch-info-front { transform: rotate3d(1,0,0,-180deg); box-shadow: inset 0 0 5px rgba(255,255,255,0.2), inset 0 0 3px rgba(0,0,0,0.3);}.ch-item:hover .ch-info-back { background: rgba(230,132,107,0.6);}示例7
最后一個示例將像旋轉立方體一樣，我們通過從頂部向后旋轉它來顯示描述。 由于我們將旋轉每個面，因此我們不需要額外的父級元素。 因此，我們的HTML將如下所示：
<li> <div class="ch-item"> <div class="ch-info"> <div class="ch-info-front ch-img-1"></div> <div class="ch-info-back"> <h3>Mouse</h3> <p>by Alexander Shumihin <a href="http://drbl.in/eAoj">View on Dribbble</a></p> </div> </div> </div></li>
我們將為".ch-item"提供透視值：
.ch-item { width: 100%; height: 100%; border-radius: 50%; position: relative; cursor: default; perspective: 900px;}".ch-info"將需要preserve-3d值：
.ch-info{ position: absolute; width: 100%; height: 100%; transform-style: preserve-3d;}正面和背面將具有過渡，變換原點將設置為50％0％：
.ch-info > div { display: block; position: absolute; width: 100%; height: 100%; border-radius: 50%; background-position: center center; transition: all 0.4s linear; transform-origin: 50% 0%;}讓我們為前面部分設置一個漂亮的內陰影：
.ch-info .ch-info-front { box-shadow: inset 0 0 0 16px rgba(0,0,0,0.3);}背面將在最初旋轉，以顯示為立方體的下表面：
.ch-info .ch-info-back { transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg); background: #000; opacity: 0;}背景圖像和文本元素的通常風格：
.ch-img-1 { background-image: url(../images/19.jpg);}.ch-img-2 { background-image: url(../images/20.jpg);}.ch-img-3 { background-image: url(../images/21.jpg);}.ch-info h3 { color: #fff; text-transform: uppercase; letter-spacing: 2px; font-size: 24px; margin: 0 15px; padding: 60px 0 0 0; height: 110px; font-family: 'Open Sans', Arial, sans-serif; text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0,0,0,0.3);}.ch-info p { color: #fff; padding: 10px 5px; font-style: italic; margin: 0 30px; font-size: 12px; border-top: 1px solid rgba(255,255,255,0.5);}.ch-info p a { display: block; color: rgba(255,255,255,0.7); font-style: normal; font-weight: 700; text-transform: uppercase; font-size: 9px; letter-spacing: 1px; padding-top: 4px; font-family: 'Open Sans', Arial, sans-serif;}.ch-info p a:hover { color: rgba(255,242,34, 0.8);}我們將使用translate3d在3d空間的Y軸上移動前部，并使用rotate3d實際旋轉它。 我們也會淡出它，因為我們之后不希望看到它的任何部分：
.ch-item:hover .ch-info-front { transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg); opacity: 0;}背面將“向后”旋轉到0度（記住，最初它向下旋轉）：
.ch-item:hover .ch-info-back { transform: rotate3d(1,0,0,0deg); opacity: 1;}就是這樣！ 一大堆懸停效果，允許許多不同的變化，快去嘗試一下吧！
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
