<code id="ymosk"><acronym id="ymosk"></acronym></code>
  • <strong id="ymosk"><input id="ymosk"></input></strong>
    <nav id="ymosk"></nav>
    <source id="ymosk"><input id="ymosk"></input></source>
  • <object id="ymosk"></object>
    技術頻道導航
    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);
    }

    描述將縮小:

    .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熱文
    • 站長推薦
    微拍福利