技術頻道導航
HTML/CSS
.NET技術
IIS技術
PHP技術
Js/JQuery
Photoshop
Fireworks
服務器技術
操作系統
網站運營

贊助商

分類目錄

贊助商

最新文章

搜索

使用css轉換和3d旋轉的圓形鼠標懸停效果【2例】

作者:admin    時間:2019-9-20 10:19:0    瀏覽:

今天給大家介紹一個關于如何用css轉換和3d旋轉在圓上創建不同有趣的懸停效果的教程。

圓形鼠標懸停效果

圓形鼠標懸停效果

demo

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

所以,我們開始吧!

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="#">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>

雖然我們可以在這里使用圖像,但我們將通過使用背景圖像以便維護更加方便。我們將在以“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;
}

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

一些示例將有不同的結構,我們將詳細地研究它們。

實例一

 實例一:圓形懸停效果

實例一:圓形懸停效果

第一個示例將通過放大描述來顯示,還把框陰影做成動畫。因此,讓我們要定位項目,并設置一個漂亮的框陰影和一個過渡(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;
}

如您之前所注意到的,我們為該項提供了兩個類(不是列表項,而是其子分區):一個是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);
}

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

項目標題將有一些合適的填充和邊距以及平滑的文本陰影:

.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不透明度和一個轉換(我們希望在懸停時淡入,但有延遲):

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

現在,是有趣的懸停動作!

該項目將把其框陰影做成動畫,半徑從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);
}

描述將淡入并縮放到1:

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

描述的那一段會慢慢消失(延遲):

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

這就是第一個實例了。

execcodegetcode

實例二

實例二:圓形懸停效果

實例二:圓形懸停效果

本例中的html結構與第一個相同。

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

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

設計排版元素的樣式:

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

懸停時,我們將框陰影(略帶紅色的一個)擴散半徑:

.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

 

標簽: css  css3  懸停效果  hover  
  • IT熱文
  • 站長推薦
{ganrao}