一款純css3實現的滑鼠經過按鈕特效，css3實現按鈕特效

一款純css3實現的滑鼠經過按鈕特效，css3實現按鈕特效

今天再給大家帶來一款純css3實現的滑鼠經過按鈕特效。這款按鈕非常簡單，但效果很好，非常漂亮。一起看下：

線上預覽   源碼下載

實現的代碼。

html代碼：

 <div align="center">        <div class="contener">            <div class="txt_button">                WIFEO</div>            <div class="circle">                &nbsp;</div>        </div>    </div>

css3代碼：

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

註：本文愛編程原創文章，轉載請註明原文地址：http://www.w2bc.com/Article/9086

軟艦實訓分享的大家可以看懂？

HTML5/CSS3 就是在寫網頁裡可以用到的按鈕特效，很實用的，如果看不太明白，可以先瞭解一下htmlhe和css的關係，這是編程的知識
 
問滑鼠滑過背景圖片，圖片圍繞圓心旋轉的效果怎實現？css3也可以

@-webkit-keyframes btnRotate {0% {-webkit-transform: rotateZ(0deg); }100% {-webkit-transform: rotateZ(360deg); }}#startMenu button:hover img {-webkit-animation: btnRotate 1.5s linear infinite;}<img src="xxx">樓上的代碼，我試了一下，好像只能轉一圈啊
我這個用的css3的動畫效果，滑鼠放上去，他會一直轉，滑鼠移開，就還原