卡卡網(wǎng)

今天給大家介紹一個關(guān)于如何用css轉(zhuǎn)換和3d旋轉(zhuǎn)在圓上創(chuàng)建不同有趣的懸停效果的教程。

圓形鼠標(biāo)懸停效果

demo

在今天的教程中，我們將在圓上實現(xiàn)懸停效果。因為我們有邊界半徑屬性，所以我們可以創(chuàng)建圓形，并且它們在網(wǎng)站中經(jīng)常作為設(shè)計元素出現(xiàn)。我特別喜歡看到的一個用途是圓形縮略圖，它看起來比通常的矩形要有趣得多。因為這個圓是一個特殊的形狀，我們將為它創(chuàng)建一些特殊的懸停效果！

所以，我們開始吧！

HTML

對于大多數(shù)示例，我們將使用以下結(jié)構(gòu)：

<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="#">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="#">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="#">View on Dribbble</a></p>
      </div>
    </div>
  </li>
</ul>

雖然我們可以在這里使用圖像，但我們將通過使用背景圖像以便維護(hù)更加方便。我們將在以“ch img-”開頭的類中定義它們。另外，我們將有一個帶有標(biāo)題的項目描述分區(qū)。

現(xiàn)在，讓我們做一些懸停效果！

CSS

我們?yōu)榱斜砗土斜眄椂x一些公共樣式：

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

我們可以使用display: inline-block;并將其父級的文本對齊屬性設(shè)置為居中，從而使列表項居中。

一些示例將有不同的結(jié)構(gòu)，我們將詳細(xì)地研究它們。

實例一

實例一：圓形懸停效果

第一個示例將通過放大描述來顯示，還把框陰影做成動畫。因此，讓我們要定位項目，并設(shè)置一個漂亮的框陰影和一個過渡（transition）：

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

如您之前所注意到的，我們?yōu)樵擁椞峁┝藘蓚€類（不是列表項，而是其子分區(qū)）：一個是ct-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);
}

描述元素將被絕對定位，我們將通過設(shè)置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);
}

項目標(biāo)題將有一些合適的填充和邊距以及平滑的文本陰影：

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

段落元素有0不透明度和一個轉(zhuǎn)換（我們希望在懸停時淡入，但有延遲）：

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

鏈接將以大寫字母顯示，我們將使懸停顏色變?yōu)辄S色：

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

現(xiàn)在，是有趣的懸停動作！

該項目將把其框陰影做成動畫，半徑從16px到1px擴(kuò)散：

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

描述將淡入并縮放到1：

.ch-item:hover .ch-info {
  transform: scale(1);
  opacity: 1;
}

描述的那一段會慢慢消失（延遲）：

.ch-item:hover .ch-info p {
  opacity: 1;
}

這就是第一個實例了。

execcodegetcode

實例二

實例二：圓形懸停效果

本例中的html結(jié)構(gòu)與第一個相同。

在本例中，我們將使用項的框陰影填充圓，并用作描述的背景。

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

描述將縮?。?/p>

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

設(shè)計排版元素的樣式：

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

懸停時，我們將框陰影（略帶紅色的一個）擴(kuò)散半徑：

.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-item:hover .ch-info {
  opacity: 1;
  transform: scale(1);
}

execcodegetcode

標(biāo)簽: css  css3  懸停效果  hover