CSS3按鈕沖擊波交互效果,很實用!

主頁 > 學習 > css >

張兵 次瀏覽

摘要:在我們使用的手機軟件中,會有很多非常好的交互效果,通過css3也可以實現很多各種酷炫的交互效果。

 

在咱們運用的手機軟件中,會有許多非常好的交互作用,經過css3也能夠完成許多各種酷炫的交互作用。

如今就看一下按鈕中比較多見的沖擊波交互作用怎么經過css3迅速書寫出來。

效果如圖所示:

 1476435528484150.gif?

效果原理: 主要是通過css3的:after偽類和過渡屬性transition來進行控制。先制作一個圓形沖擊波層

 當激活按鈕的時候讓沖擊波層瞬間變成0,釋放后從0過渡到最大范圍,從而形成沖擊波效果;以下是實現步驟:

1、先準備基礎結構和樣式;

/* 基礎樣式 */
*{padding:0; margin:0; border:0; list-style:none;}
body{ background: #000;}
a{ color: #fff; text-decoration: none; display: block; width: 100px; height: 40px; border-radius: 5px;
background: rgba(31,91,147,0.8); text-align: center; line-height: 40px; transition: all .4s;}
a:hover{ background: rgba(31,91,147,1);}
.all{ overflow: hidden;}
.btn{ float: left; margin: 40px; position: relative; overflow: hidden;  }
 
 
<ul class="all">
    <li class="btn"><a href="#">按鈕</a></li>
    <li class="btn"><a href="#">按鈕</a></li>
    <li class="btn"><a href="#">按鈕</a></li>
    <li class="btn"><a href="#">按鈕</a></li>
</ul>

2、通過偽類:after 給a添加一個沖擊波層,特殊的地方在于為了保證讓沖擊波效果從中間擴散,需要設置層的位置位于中間;

/* 通過偽類給按鈕添加一個沖擊波層 */
    .btn a:after {
        content: "";
        display: block;
        position: absolute;
        left: -50px;
        top: -80px;  /* 設置沖擊波層位置在中間 */
        width: 200px;
        height: 200px; /* 設置沖擊波層的尺寸 */
        background: rgba(255,255,255,0.6);
        border-radius: 50%;
        opacity: 0;
        transition: all 1s;
    }

3、添加激活按鈕的效果,通過:active 給:after 設置瞬間過渡效果,這一步特殊的地方在于需要將過渡時間設置為0

          讓沖擊波圖層瞬間為0,釋放開的時候從0過渡到最大范圍;激活效果的不同位置可以形成不同的交互效果;可以自行測試;

/* 設置激活按鈕的效果,重點是后面的過渡時間; */
    .btn a:active:after {
        width: 0;
        height: 0;
        left: 50px;
        top: 20px; /*設置激活時沖擊波層的位置在中間,保證是從中間擴散,不同位置有不同效果 */
        opacity: 1;
        transition-duration: 0s; /* 激活的時候過渡時間0s瞬間沖擊波圖層變成0,釋放后過渡到上面.btn a:after的樣式 */
    }

總結:交互效果的實現是利用了偽類,:after作用非常強大,這只是它其中的一種效果,除此之外

              還能實現更加強大的交互效果,感興趣的朋友可以多嘗試。


隨機新聞
急速赛车收