使用CSS3懸停效果打造不同的頁面版式

CSS3 為 Web 開發帶來了非常令人興奮的變化，特別是 CSS 3D 轉換、動畫等特性的支持，可以輕松的創建很酷的 Web 效果。

CSS3新增添了實現動畫效果的新功能，通過本文，你可以對這些新功能有個初步了解。今天就分享一些懸停效果，可以更好的幫助你開發

demo

HTML標記

這個簡單的結構使我們能夠使這些效果。正如你可以看到下面的代碼中我們創建了一個父類視圖，里面的內容。然后，我們創建一個類的面具，我們將了CSS3過渡到懸停效果。在后面的例子中，這個語法可以稍稍發生變化，這取決於你想要的效果應用。

<div class="view">  
      <img src="images/1.jpg" />  
      <div class="mask"></div>  
      <div class="content">  
           <a href="#" class="info" title="Full Image">Full Image</a>  
      </div>  
</div>   

CSS

在這里，你將我們的教程設置的基本屬性。對於每一個效果會有不同的CSS文件，你可以把到一個CSS文件中的各種效果。

.view {
   width: 300px;
   height: 200px;
   margin: 10px;
   float: left;
   border: 5px solid #fff;
   overflow: hidden;
   position: relative;
   text-align: center;
   box-shadow: 0px 0px 5px #aaa;
   cursor: default;
}
.view .mask, .view .content {
   width: 300px;
   height: 200px;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
}
.view img {
   display: block;
   position: relative;
}
.view a.info {
   background:url(../img/link.png) center no-repeat;
   display: inline-block;
   text-decoration: none;
   padding:0;
   text-indent:-9999px;
   width:20px;
   height:20px;
}

1 Example

HTML

對具有這種效果的類視圖的元素添加特殊類效果。這里在view類的基礎上添加effect類

<div class="view effect">  
      <img src="images/1.jpg" />  
      <div class="mask"></div>  
      <div class="content">  
           <a href="#" class="info" title="Full Image">Full Image</a>  
      </div>  
</div>   

CSS

這里除了使用的邊框屬性來創建一個三角形，我使用的多個轉換，允許我在動畫期間對每個屬性有更多的控制。

effect img {
   opacity:1;
   transform:scale(1,1);
   transition: all 0.2s ease-in;
}
.effect .mask {
   opacity:0;
   overflow:visible;
   border-color:rgba(0,0,0,0.7) transparent transparent transparent;
   border-style:solid;
   border-width:150px;
   width:0;
   height:0;
   transform:translateY(-125px);
   transition: transform 0.2s 0.1s ease-out, opacity 0.3s ease-in-out;
}
.effect a.info {
   opacity:0;
   transform:translateY(-125px);
   transition: transform 0.3s ease-in, opacity 0.1s ease-in-out;
}
.effect:hover img {
   opacity:0.7;
   transform:scale(2,2);
}
.effect:hover .mask {
   opacity: 1;
   transform: translateY(0px);
}
.effect:hover a.info {
   opacity:1;
   transform:translateY(100px);
}

 

2 Example

HTML

在此示例中的語法會稍有不同

<div class="view second-effect">  
     <img src="images/2.jpg" />  
     <div class="mask">  
         <a href="#" class="info" title="Full Image">Full Image</a>  
     </div>  
</div>  

CSS

在這個例子當中使用邊框熟悉對變量進行調整. 這里使用 box-sizing. box-sizing 熟悉被用來改變默認的CSS盒寬度和高度大小，具體怎么使用呢，我簡單解釋一下

（說到 IE 的 bug，在 IE6以前的版本中，IE對盒模型的解析出現一些問題，跟其它瀏覽器不同，將 border 與 padding 都包含在 width 之內。而另外一些瀏覽器則與它相反，是不包括border和padding的。box-sizing:content-box：當我們設置 box-sizing: content-box; 時，瀏覽器對盒模型的解釋遵從我們之前認識到的 W3C 標准，當它定義width和height時，它的寬度不包括border和padding。box-sizing:border-box：當我們設置box-sizing: border-box; 時，瀏覽器對盒模型的解釋與 IE6之前的版本相同，當它定義width和height時，border和padding則是被包含在寬高之內的。內容的寬和高可以通過定義的 “width”和 “height”減去相應方向的“padding”和“border”的寬度得到。內容的寬和高必須保證不能為負，必要時將自動增大該元素border box的尺寸以使其內容的寬或高最小為0。

）

.second-effect .mask {
   opacity: 0;
   overflow:visible;
   border:0px solid rgba(0,0,0,0.7);
   box-sizing:border-box;
   transition: all 0.4s ease-in-out;
}
.second-effect a.info {
   position:relative;
   top:-10px;
   opacity:0;
   transform:scale(0,0);
   transition: transform 0.2s 0.1s ease-in, opacity 0.1s ease-in-out;
}
.second-effect:hover .mask {
   opacity: 1;
   border:100px solid rgba(0,0,0,0.7);
}
.second-effect:hover a.info {
   opacity:1;
   transform:scale(1,1);
   transition-delay:0.3s;
}

3 Example

HTML

這里在view類的基礎上添加third-effect類.

<div class="view third-effect">  
     <img src="images/3.jpg" />  
     <div class="mask">  
         <a href="#" class="info" title="Full Image">Full Image</a>  
     </div>  
</div>  

CSS

使用邊框屬性只需要簡單的幾行代碼就能得到非常棒的效果.

.third-effect .mask {
   opacity: 0;
   overflow:visible;
   border:100px solid rgba(0,0,0,0.7);
   box-sizing:border-box;
   transition: all 0.4s ease-in-out;
}
.third-effect a.info {
   position:relative;
   top:-10px; /* Center the link */
   opacity: 0;
   transition: opacity 0.5s 0s ease-in-out;
}
.third-effect:hover .mask {
   opacity: 1;
   border:100px solid rgba(0,0,0,0.7);
}
.third-effect:hover a.info {
   opacity:1;
   transition-delay: 0.3s;
}

4 Example

HTML

在此示例中的代碼是比之前的明顯減少，但做出來的懸停效果將是非常令人印象深刻的.

<div class="view fourth-effect">  
    <a href="#" title="Full Image"><img src="images/4.jpg" /></a>  
    <div class="mask"></div>  
</div>  

CSS

僅使用mask類與border-radius屬性結合打造出一個美麗的懸停效果，單擊圖片實現圖片的可見性

.fourth-effect .mask {
   position:absolute; /* Center the mask */
   top:50px;
   left:100px;
   cursor:pointer;
   border-radius: 50px;
   border-width: 50px;
   display: inline-block;
   height: 100px;
   width: 100px;
   border: 50px solid rgba(0, 0, 0, 0.7);
   box-sizing:border-box;
   opacity:1;
   visibility:visible;
   transform:scale(4);
   transition:all 0.3s ease-in-out;
}
.fourth-effect:hover .mask {
   opacity: 0;
   border:0px solid rgba(0,0,0,0.7);
   visibility:hidden;
}

5 Example

HTML

最后一個例子是上面幾個例子的結合.添加一個fifth-effect類

<div class="view fifth-effect">  
    <a href="#" title="Full Image"><img src="images/5.jpg" /></a>  
    <div class="mask"></div>  
</div> 

<div class="view fifth-effect">  
    <a href="#" title="Full Image"><img src="images/5.jpg" /></a>  
    <div class="mask"></div>  
</div> 

CSS

在這里使用邊框屬性的rgba屬性。來改變可見圖片的透明度.

.fifth-effect img {
   opacity:0.2;
   transition: all 0.3s ease-in;
}
.fifth-effect .mask {
   cursor:pointer;
   opacity:1;
   visibility:visible;
   border:100px solid rgba(0,0,0,0.7);
   box-sizing:border-box;
   transition: all 0.4s cubic-bezier(0.940, 0.850, 0.100, 0.620);
}
.fifth-effect:hover .mask {
   border:0px double rgba(0,0,0,0.7);
   opacity:0;
   visibility:hidden;
}
.fifth-effect:hover img {
   opacity:1;
}

 本文鏈接：使用CSS3懸停效果打造不同的頁面版式

123