当前位置:Gxlcms > html代码 > 一款纯css3实现的鼠标经过按钮特效_html/css_WEB-ITnose

一款纯css3实现的鼠标经过按钮特效_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:3人阅读

今天再给大家带来一款纯css3实现的鼠标经过按钮特效。这款按钮非常简单,但效果很好,非常漂亮。一起看下效果图:

在线预览 源码下载

实现的代码。

html代码:

 
WIFEO

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

人气教程排行