這篇文章主要為大家介紹了利用css3製作的一款滑鼠經過按鈕特效,當滑鼠放在按鈕上,按鈕就會發生變化,產生一個動態效果,非常漂亮。需要的朋友可以參考下
今天再給大家帶來一款純css3實現的滑鼠經過按鈕特效。這款按鈕非常簡單,但效果很好,非常漂亮。一起看下效果圖:
實作的程式碼。
html程式碼:
XML/HTML Code##複製內容到剪貼簿
<p align="center"> <p class="contener"> <p class="txt_button"> WIFEO</p> <p class="circle"> </p> </p> </p>
css3程式碼:
##CSS Code複製內容到剪貼簿
.contener { width: 300px; height: 60px; background-color: #00bcd4; line-height: 60px; color: #ffffff; font-weight: 300; font-family: 'Roboto'; font-size: 25px; position: relative; overflow: hidden; cursor: pointer; box-shadow:1px 1px 1px #333333; } .txt_button { position: absolute; width: 100%; } .contener:hover .circle { -webkit-animation:oblik 0.4s ease-in; -webkit-transform-origin: 50% 50%; -moz-animation:oblik 0.4s ease-in; -moz-transform-origin: 50% 50%; -ms-animation:oblik 0.4s ease-in; -ms-transform-origin: 50% 50%; animation:oblik 0.4s ease-in; transform-origin: 50% 50%; width: 100px; height: 100px; border-radius: 50%; } @-webkit-keyframes oblik { 0% {opacity:1;-webkit-transform:scale(0);} 100% {opacity:0;-webkit-transform:scale(5);background-color: #006064;} } @-moz-keyframes oblik { 0% {opacity:1;-moz-transform:scale(0);} 100% {opacity:0;-moz-transform:scale(5);background-color: #006064;} } @-ms-keyframes oblik { 0% {opacity:1;-ms-transform:scale(0);} 100% {opacity:0;-ms-transform:scale(5);background-color: #006064;} } @keyframes oblik { 0% {opacity:1;transform:scale(0);} 100% {opacity:0;transform:scale(5);background-color: #006064;} }【相關推薦】1. 2. 3. 4. 5.
以上是css3製作滑鼠經過按鈕特效的詳細內容。更多資訊請關注PHP中文網其他相關文章!